From 89683b11064026b5fb78f3774b5b2105c4c9f5bf Mon Sep 17 00:00:00 2001
From: Arnaud Ambroselli <31724752+arnaudambro@users.noreply.github.com>
Date: Wed, 14 Feb 2024 18:52:18 +0100
Subject: [PATCH] feat: print new report (#1861)

---
 dashboard/src/components/IncrementorSmall.js  |   2 +-
 .../report/SelectAndCreateCollaboration.js    |   3 +-
 .../ActionsOrConsultationsReport.js           |  40 +++++-
 .../report/components/CommentsReport.js       |  24 +++-
 .../report/components/ObservationsReport.js   |  16 ++-
 .../report/components/PassagesReport.js       |  16 ++-
 .../scenes/report/components/PersonsReport.js |  16 ++-
 .../report/components/RencontresReport.js     |  18 ++-
 .../report/components/ServicesReport.js       | 130 ++++++++++-------
 .../scenes/report/components/Transmissions.js | 136 +++++++++++-------
 dashboard/src/scenes/report/view.js           |  98 +++++++------
 dashboard/tailwind.config.js                  |   3 +
 12 files changed, 333 insertions(+), 169 deletions(-)

diff --git a/dashboard/src/components/IncrementorSmall.js b/dashboard/src/components/IncrementorSmall.js
index 8392a891a..bb1628e7b 100644
--- a/dashboard/src/components/IncrementorSmall.js
+++ b/dashboard/src/components/IncrementorSmall.js
@@ -22,7 +22,7 @@ export default function IncrementorSmall({ service, team, date, count: initialVa
     [value]
   );
   return (
-    <div className={['tw-mb-2.5 tw-flex tw-gap-0.5', className].join(' ')}>
+    <div className={['tw-mb-2.5 tw-flex tw-gap-0.5 print:tw-max-w-sm', className].join(' ')}>
       <p id={`${service}-title`} className="tw-m-0 tw-flex-grow tw-text-black75">
         {service}
       </p>
diff --git a/dashboard/src/scenes/report/SelectAndCreateCollaboration.js b/dashboard/src/scenes/report/SelectAndCreateCollaboration.js
index 06d6bedcf..0e1ae3c3f 100644
--- a/dashboard/src/scenes/report/SelectAndCreateCollaboration.js
+++ b/dashboard/src/scenes/report/SelectAndCreateCollaboration.js
@@ -11,7 +11,7 @@ const NoOptionsMessage = () => (
   </span>
 );
 
-const SelectAndCreateCollaboration = ({ values, onChange }) => {
+const SelectAndCreateCollaboration = ({ values, onChange, className = '' }) => {
   const [organisation, setOrganisation] = useRecoilState(organisationState);
 
   const onChangeRequest = (newCollabs) => {
@@ -47,6 +47,7 @@ const SelectAndCreateCollaboration = ({ values, onChange }) => {
       isSearchable
       isMulti
       name="collaborations"
+      className={className}
       components={{ NoOptionsMessage }}
       onChange={(v) => onChangeRequest(v.map((v) => v.value))}
       placeholder={' -- Ajoutez une co-intervention -- '}
diff --git a/dashboard/src/scenes/report/components/ActionsOrConsultationsReport.js b/dashboard/src/scenes/report/components/ActionsOrConsultationsReport.js
index abf58ed83..420c96c03 100644
--- a/dashboard/src/scenes/report/components/ActionsOrConsultationsReport.js
+++ b/dashboard/src/scenes/report/components/ActionsOrConsultationsReport.js
@@ -30,7 +30,7 @@ export const ActionsOrConsultationsReport = ({ actions, consultations, period })
 
   return (
     <>
-      <section title={activeTab} className="tw-relative tw-flex tw-h-full tw-flex-col tw-overflow-hidden">
+      <section title={activeTab} className="noprint tw-relative tw-flex tw-h-full tw-flex-col tw-overflow-hidden">
         <div className="tw-flex tw-items-center tw-bg-white tw-px-3 tw-py-3">
           <TabsNav
             className="tw-m-0 tw-flex-wrap tw-justify-start tw-border-b-0 tw-py-0.5 tw-pl-0 [&_button]:tw-text-xl"
@@ -74,6 +74,44 @@ export const ActionsOrConsultationsReport = ({ actions, consultations, period })
           <ActionsSortableList data={filteredData} />
         </div>
       </section>
+      <section
+        aria-hidden="true"
+        className="printonly tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
+        <div className="tw-flex tw-flex-col tw-items-stretch tw-bg-white tw-px-3 tw-py-3">
+          <h3 className="tw-m-0 tw-text-base tw-font-medium">Actions ({filteredActions.length})</h3>
+          {filterStatus.length > 0 && (
+            <h4 className="tw-m-0 tw-text-base tw-font-medium">
+              Filtrées par status:{' '}
+              {mappedIdsToLabels
+                .filter((s) => filterStatus.includes(s._id))
+                .map((status) => status.name)
+                .join(', ')}
+            </h4>
+          )}
+        </div>
+        <div className="tw-grow tw-overflow-y-auto tw-border-t tw-border-main tw-border-opacity-20">
+          <ActionsSortableList data={filteredActions} />
+        </div>
+      </section>
+      <section
+        aria-hidden="true"
+        className="printonly tw-mt-12 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
+        <div className="tw-flex tw-flex-col tw-items-stretch tw-bg-white tw-px-3 tw-py-3">
+          <h3 className="tw-m-0 tw-text-base tw-font-medium">Consultations ({filteredConsultations.length})</h3>
+          {filterStatus.length > 0 && (
+            <h4 className="tw-m-0 tw-text-base tw-font-medium">
+              Filtrées par status:{' '}
+              {mappedIdsToLabels
+                .filter((s) => filterStatus.includes(s._id))
+                .map((status) => status.name)
+                .join(', ')}
+            </h4>
+          )}
+        </div>
+        <div className="tw-grow tw-overflow-y-auto tw-border-t tw-border-main tw-border-opacity-20">
+          <ActionsSortableList data={filteredConsultations} />
+        </div>
+      </section>
       <ModalContainer open={!!fullScreen} className="" size="full" onClose={() => setFullScreen(false)}>
         <ModalHeader title={`${activeTab} (${filteredData.length})`} onClose={() => setFullScreen(false)}>
           <div className="tw-mx-auto tw-mt-2 tw-w-full tw-max-w-lg">
diff --git a/dashboard/src/scenes/report/components/CommentsReport.js b/dashboard/src/scenes/report/components/CommentsReport.js
index ec4098dc2..a1a939a5b 100644
--- a/dashboard/src/scenes/report/components/CommentsReport.js
+++ b/dashboard/src/scenes/report/components/CommentsReport.js
@@ -28,7 +28,7 @@ export const CommentsSocialAndMedical = ({ comments, commentsMedical }) => {
 
   return (
     <>
-      <section title={activeTab} className="tw-relative tw-flex tw-h-full tw-flex-col tw-overflow-hidden">
+      <section title={activeTab} className="noprint tw-relative tw-flex tw-h-full tw-flex-col tw-overflow-hidden">
         <div className="tw-flex tw-items-center tw-bg-white tw-px-3 tw-py-3">
           <TabsNav
             className="tw-m-0 tw-flex-wrap tw-justify-start tw-border-b-0 tw-py-0.5 tw-pl-0 [&_button]:tw-text-xl"
@@ -54,6 +54,28 @@ export const CommentsSocialAndMedical = ({ comments, commentsMedical }) => {
           <CommentsTable data={data} activeTab={activeTab} />
         </div>
       </section>
+      <section
+        aria-hidden="true"
+        className="printonly tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
+        <div className="tw-flex tw-flex-col tw-items-stretch tw-bg-white tw-px-3 tw-py-3">
+          <h3 className="tw-m-0 tw-text-base tw-font-medium">Commentaires ({comments.length})</h3>
+        </div>
+        <div className="tw-grow tw-overflow-y-auto tw-border-t tw-border-main tw-border-opacity-20">
+          <CommentsTable data={comments} activeTab="Commentaires" />
+        </div>
+      </section>
+      {!!canSeeMedicalData && (
+        <section
+          aria-hidden="true"
+          className="printonly tw-mt-12 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
+          <div className="tw-flex tw-flex-col tw-items-stretch tw-bg-white tw-px-3 tw-py-3">
+            <h3 className="tw-m-0 tw-text-base tw-font-medium">Commentaires médicaux ({commentsMedical.length})</h3>
+          </div>
+          <div className="tw-grow tw-overflow-y-auto tw-border-t tw-border-main tw-border-opacity-20">
+            <CommentsTable data={commentsMedical} activeTab="Commentaires médicaux" />
+          </div>
+        </section>
+      )}
       <ModalContainer open={!!fullScreen} className="" size="full" onClose={() => setFullScreen(false)}>
         <ModalHeader title={`${activeTab} (${data.length})`} onClose={() => setFullScreen(false)} />
         <ModalBody>
diff --git a/dashboard/src/scenes/report/components/ObservationsReport.js b/dashboard/src/scenes/report/components/ObservationsReport.js
index da8f83d86..336f180ea 100644
--- a/dashboard/src/scenes/report/components/ObservationsReport.js
+++ b/dashboard/src/scenes/report/components/ObservationsReport.js
@@ -18,7 +18,7 @@ export const ObservationsReport = ({ observations, period, selectedTeams }) => {
 
   return (
     <>
-      <section title="Observations" className="tw-relative tw-m-2 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-main">
+      <section title="Observations" className="noprint tw-relative tw-m-2 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-main">
         <p className="tw-m-0 tw-w-full tw-text-center tw-text-2xl tw-font-semibold tw-text-white">{observations.length}</p>
         <p className="tw-m-0 tw-w-full tw-text-center tw-text-sm tw-font-normal tw-text-white">observation{observations.length > 1 ? 's' : ''}</p>
         <button
@@ -28,6 +28,16 @@ export const ObservationsReport = ({ observations, period, selectedTeams }) => {
           <FullScreenIcon />
         </button>
       </section>
+      <section
+        aria-hidden="true"
+        className="printonly tw-mt-12 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
+        <div className="tw-flex tw-flex-col tw-items-stretch tw-bg-white tw-px-3 tw-py-3">
+          <h3 className="tw-m-0 tw-text-base tw-font-medium">Observations de territoire ({observations.length})</h3>
+        </div>
+        <div className="tw-grow tw-overflow-y-auto tw-border-t tw-border-main tw-border-opacity-20">
+          <ObservationsTable observations={observations} period={period} selectedTeams={selectedTeams} />
+        </div>
+      </section>
       <ModalContainer open={!!fullScreen} className="" size="full" onClose={() => setFullScreen(false)}>
         <ModalHeader title={`Observations (${observations.length})`} onClose={() => setFullScreen(false)} />
         <ModalBody>
@@ -99,8 +109,8 @@ const ObservationsTable = ({ period, observations, selectedTeams }) => {
 
   return (
     <>
-      <div className="tw-py-2 tw-px-4 print:tw-mb-4">
-        <div className="tw-mb-5 tw-flex tw-justify-between">
+      <div className="tw-py-2 tw-px-4 print:tw-mb-4 print:tw-px-0">
+        <div className="noprint tw-mb-5 tw-flex tw-justify-between">
           <h3 className="tw-w-full tw-px-3 tw-py-2 tw-text-2xl tw-font-medium tw-text-black">Observations</h3>
           <button onClick={exportXlsx} className="button-submit tw-ml-auto tw-mr-4">
             Télécharger un export
diff --git a/dashboard/src/scenes/report/components/PassagesReport.js b/dashboard/src/scenes/report/components/PassagesReport.js
index 7d41951a3..4ba54c857 100644
--- a/dashboard/src/scenes/report/components/PassagesReport.js
+++ b/dashboard/src/scenes/report/components/PassagesReport.js
@@ -17,7 +17,7 @@ export const PassagesReport = ({ passages, period, selectedTeams }) => {
 
   return (
     <>
-      <section title="Passages" className="tw-relative tw-m-2 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-main">
+      <section title="Passages" className="noprint tw-relative tw-m-2 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-main">
         <p className="tw-m-0 tw-w-full tw-text-center tw-text-2xl tw-font-semibold tw-text-white">{passages.length}</p>
         <p className="tw-m-0 tw-w-full tw-text-center tw-text-sm tw-font-normal tw-text-white">passage{passages.length > 1 ? 's' : ''}</p>
         <button
@@ -27,6 +27,16 @@ export const PassagesReport = ({ passages, period, selectedTeams }) => {
           <FullScreenIcon />
         </button>
       </section>
+      <section
+        aria-hidden="true"
+        className="printonly tw-mt-12 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
+        <div className="tw-flex tw-flex-col tw-items-stretch tw-bg-white tw-px-3 tw-py-3">
+          <h3 className="tw-m-0 tw-text-base tw-font-medium">Passages ({passages.length})</h3>
+        </div>
+        <div className="tw-grow tw-overflow-y-auto tw-border-t tw-border-main tw-border-opacity-20">
+          <PassagesTable passages={passages} period={period} selectedTeams={selectedTeams} />
+        </div>
+      </section>
       <ModalContainer open={!!fullScreen} className="" size="full" onClose={() => setFullScreen(false)}>
         <ModalHeader title={`Passages (${passages.length})`} onClose={() => setFullScreen(false)} />
         <ModalBody>
@@ -52,8 +62,8 @@ const PassagesTable = ({ period, passages, selectedTeams }) => {
 
   return (
     <>
-      <div className="tw-py-2 tw-px-4 print:tw-mb-4">
-        <div className="tw-mb-5 tw-flex tw-justify-between">
+      <div className="tw-py-2 tw-px-4 print:tw-mb-4 print:tw-px-0">
+        <div className="noprint tw-mb-5 tw-flex tw-justify-between">
           <h3 className="tw-w-full tw-px-3 tw-py-2 tw-text-xl tw-font-medium tw-text-black">Passages</h3>
           <button
             type="button"
diff --git a/dashboard/src/scenes/report/components/PersonsReport.js b/dashboard/src/scenes/report/components/PersonsReport.js
index 74424947e..7523f7cf2 100644
--- a/dashboard/src/scenes/report/components/PersonsReport.js
+++ b/dashboard/src/scenes/report/components/PersonsReport.js
@@ -15,7 +15,7 @@ export const PersonsReport = ({ personsCreated, period, selectedTeams }) => {
 
   return (
     <>
-      <section title="Personnes créées" className="tw-relative tw-m-2 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-main">
+      <section title="Personnes créées" className="noprint tw-relative tw-m-2 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-main">
         <p className="tw-m-0 tw-w-full tw-text-center tw-text-2xl tw-font-semibold tw-text-white">{personsCreated.length}</p>
         <p className="tw-m-0 tw-w-full tw-text-center tw-text-sm tw-font-normal tw-text-white">
           personne{personsCreated.length > 1 ? 's' : ''} créée{personsCreated.length > 1 ? 's' : ''}
@@ -27,6 +27,16 @@ export const PersonsReport = ({ personsCreated, period, selectedTeams }) => {
           <FullScreenIcon />
         </button>
       </section>
+      <section
+        aria-hidden="true"
+        className="printonly tw-mt-12 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
+        <div className="tw-flex tw-flex-col tw-items-stretch tw-bg-white tw-px-3 tw-py-3">
+          <h3 className="tw-m-0 tw-text-base tw-font-medium">Personnes créées ({personsCreated.length})</h3>
+        </div>
+        <div className="tw-grow tw-overflow-y-auto tw-border-t tw-border-main tw-border-opacity-20">
+          <PersonsTable personsCreated={personsCreated} period={period} selectedTeams={selectedTeams} />
+        </div>
+      </section>
       <ModalContainer open={!!fullScreen} className="" size="full" onClose={() => setFullScreen(false)}>
         <ModalHeader title={`Personnes créées (${personsCreated.length})`} onClose={() => setFullScreen(false)} />
         <ModalBody>
@@ -49,8 +59,8 @@ const PersonsTable = ({ period, personsCreated, selectedTeams }) => {
 
   return (
     <>
-      <div className="tw-py-2 tw-px-4 print:tw-mb-4">
-        <div className="tw-mb-5 tw-flex tw-justify-between">
+      <div className="tw-py-2 tw-px-4 print:tw-mb-4 print:tw-px-0">
+        <div className="noprint tw-mb-5 tw-flex tw-justify-between">
           <h3 className="tw-w-full tw-px-3 tw-py-2 tw-text-xl tw-font-medium tw-text-black">Personnes créées</h3>
         </div>
         {!!personsCreated.length && (
diff --git a/dashboard/src/scenes/report/components/RencontresReport.js b/dashboard/src/scenes/report/components/RencontresReport.js
index a40d17692..4457f7d14 100644
--- a/dashboard/src/scenes/report/components/RencontresReport.js
+++ b/dashboard/src/scenes/report/components/RencontresReport.js
@@ -17,7 +17,7 @@ export const RencontresReport = ({ rencontres, period, selectedTeams }) => {
 
   return (
     <>
-      <section title="Rencontres" className="tw-relative tw-m-2 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-main">
+      <section title="Rencontres" className="noprint tw-relative tw-m-2 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-main">
         <p className="tw-m-0 tw-w-full tw-text-center tw-text-2xl tw-font-semibold tw-text-white">{rencontres.length}</p>
         <p className="tw-m-0 tw-w-full tw-text-center tw-text-sm tw-font-normal tw-text-white">rencontre{rencontres.length > 1 ? 's' : ''}</p>
         <button
@@ -27,6 +27,16 @@ export const RencontresReport = ({ rencontres, period, selectedTeams }) => {
           <FullScreenIcon />
         </button>
       </section>
+      <section
+        aria-hidden="true"
+        className="printonly tw-mt-12 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
+        <div className="tw-flex tw-flex-col tw-items-stretch tw-bg-white tw-px-3 tw-py-3">
+          <h3 className="tw-m-0 tw-text-base tw-font-medium">Rencontres ({rencontres.length})</h3>
+        </div>
+        <div className="tw-grow tw-overflow-y-auto tw-border-t tw-border-main tw-border-opacity-20">
+          <RencontresTable rencontres={rencontres} period={period} selectedTeams={selectedTeams} />
+        </div>
+      </section>
       <ModalContainer open={!!fullScreen} className="" size="full" onClose={() => setFullScreen(false)}>
         <ModalHeader title={`Rencontres (${rencontres.length})`} onClose={() => setFullScreen(false)} />
         <ModalBody>
@@ -51,8 +61,8 @@ const RencontresTable = ({ period, rencontres, selectedTeams }) => {
 
   return (
     <>
-      <div className="tw-py-2 tw-px-4 print:tw-mb-4">
-        <div className="tw-mb-5 tw-flex tw-justify-between">
+      <div className="tw-py-2 tw-px-4 print:tw-mb-4 print:tw-px-0">
+        <div className="noprint tw-mb-5 tw-flex tw-justify-between">
           <h3 className="tw-w-full tw-px-3 tw-py-2 tw-text-xl tw-font-medium tw-text-black">Rencontres</h3>
           <button
             type="button"
@@ -67,7 +77,7 @@ const RencontresTable = ({ period, rencontres, selectedTeams }) => {
             Ajouter une rencontre
           </button>
         </div>
-        <div className="tw-mb-4 tw-flex tw-justify-around">
+        <div className="noprint tw-mb-4 tw-flex tw-justify-around">
           <div className="tw-basis-1/4">
             <Card
               countId="report-rencontres-non-anonymous-count"
diff --git a/dashboard/src/scenes/report/components/ServicesReport.js b/dashboard/src/scenes/report/components/ServicesReport.js
index 4b185eb9e..c889169c8 100644
--- a/dashboard/src/scenes/report/components/ServicesReport.js
+++ b/dashboard/src/scenes/report/components/ServicesReport.js
@@ -74,59 +74,61 @@ export default function ServicesReport({ period, selectedTeamsObject }) {
   const isSingleDay = dayjs(period.startDate).format('YYYY-MM-DD') === dayjs(period.endDate).format('YYYY-MM-DD');
 
   return (
-    <div className="tw-py-2 print:tw-mb-4">
-      <div className="tw-flex tw-items-center tw-justify-between tw-px-3">
-        <h3 className="tw-w-full tw-py-2 tw-text-base tw-font-medium tw-text-black">Services effectués</h3>
-        <button
-          title="Passer les actions/consultations en plein écran"
-          className="tw-h-6 tw-w-6 tw-rounded-full tw-text-main tw-transition hover:tw-scale-125 disabled:tw-opacity-30"
-          onClick={() => setFullScreen(true)}>
-          <FullScreenIcon />
-        </button>
-      </div>
-      <div className="tw-mb-4">
-        {!serviceSumsForAllReports ? (
-          <Spinner />
-        ) : (
-          <div className="tw-flex tw-flex-col tw-items-center tw-justify-center tw-rounded-2xl tw-py-4">
-            {teamIds.length > 1 ? (
-              <>
-                <div className="tw-mb-6 tw-flex tw-items-center tw-justify-between tw-border-b-gray-300 tw-pb-2 tw-font-medium">
-                  <p className="tw-mb-0">
-                    Services effectués par toutes les équipes sélectionnées
-                    <>
-                      <br />
-                      <small className="tw-opacity-50">
-                        Ces données sont en lecture seule. Pour les modifier, vous devez le faire équipe par équipe en plein écran
-                      </small>
-                    </>
-                  </p>
-                </div>
-                {Object.entries(serviceSumsForAllReports).map(([key, value]) => (
-                  <IncrementorSmall
-                    dataTestId={`general-${key}-${value || 0}`}
-                    key={`general-${key}-${value || 0}`}
-                    service={key}
-                    count={value || 0}
-                    date={dayjs(period.startDate).format('YYYY-MM-DD')}
-                    disabled
-                    className="max-w-[400px] tw-w-full tw-text-neutral-600"
-                  />
-                ))}
-              </>
-            ) : (
-              <ServiceByTeam
-                services={services[teamIds[0]]}
-                onUpdateServices={(updated) => setServices((s) => ({ ...s, [teamIds[0]]: updated }))}
-                team={selectedTeamsObject[teamIds[0]]}
-                disabled={!isSingleDay}
-                dateString={dayjs(period.startDate).format('YYYY-MM-DD')}
-                dataTestIdPrefix={`${selectedTeamsObject[teamIds[0]].name}-`}
-              />
-            )}
-          </div>
-        )}
-      </div>
+    <>
+      <section className="noprint tw-py-2 print:tw-mb-4">
+        <div className="tw-flex tw-items-center tw-justify-between tw-px-3">
+          <h3 className="tw-w-full tw-py-2 tw-text-base tw-font-medium tw-text-black">Services effectués</h3>
+          <button
+            title="Passer les actions/consultations en plein écran"
+            className="tw-h-6 tw-w-6 tw-rounded-full tw-text-main tw-transition hover:tw-scale-125 disabled:tw-opacity-30"
+            onClick={() => setFullScreen(true)}>
+            <FullScreenIcon />
+          </button>
+        </div>
+        <div className="tw-mb-4">
+          {!serviceSumsForAllReports ? (
+            <Spinner />
+          ) : (
+            <div className="tw-flex tw-flex-col tw-items-center tw-justify-center tw-rounded-2xl tw-py-4">
+              {teamIds.length > 1 ? (
+                <>
+                  <div className="tw-mb-6 tw-flex tw-items-center tw-justify-between tw-border-b-gray-300 tw-pb-2 tw-font-medium print:tw-justify-start">
+                    <p className="tw-mb-0">
+                      Services effectués par toutes les équipes sélectionnées
+                      <>
+                        <br />
+                        <small className="noprint tw-opacity-50">
+                          Ces données sont en lecture seule. Pour les modifier, vous devez le faire équipe par équipe en plein écran
+                        </small>
+                      </>
+                    </p>
+                  </div>
+                  {Object.entries(serviceSumsForAllReports).map(([key, value]) => (
+                    <IncrementorSmall
+                      dataTestId={`general-${key}-${value || 0}`}
+                      key={`general-${key}-${value || 0}`}
+                      service={key}
+                      count={value || 0}
+                      date={dayjs(period.startDate).format('YYYY-MM-DD')}
+                      disabled
+                      className="max-w-[400px] tw-w-full tw-text-neutral-600"
+                    />
+                  ))}
+                </>
+              ) : (
+                <ServiceByTeam
+                  services={services[teamIds[0]]}
+                  onUpdateServices={(updated) => setServices((s) => ({ ...s, [teamIds[0]]: updated }))}
+                  team={selectedTeamsObject[teamIds[0]]}
+                  disabled={!isSingleDay}
+                  dateString={dayjs(period.startDate).format('YYYY-MM-DD')}
+                  dataTestIdPrefix={`${selectedTeamsObject[teamIds[0]].name}-`}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </section>
       <ServicesFullScreen
         open={fullScreen}
         onClose={() => setFullScreen(false)}
@@ -138,7 +140,27 @@ export default function ServicesReport({ period, selectedTeamsObject }) {
         selectedTeamsObject={selectedTeamsObject}
         isSingleDay={isSingleDay}
       />
-    </div>
+      <section
+        aria-hidden="true"
+        className="printonly tw-mt-12 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
+        <div className="tw-flex tw-flex-col tw-items-stretch tw-bg-white tw-px-3 tw-py-3">
+          <h3 className="tw-m-0 tw-text-base tw-font-medium">Services effectués {teamIds.length > 1 && ' par toutes les équipes sélectionnées'}</h3>
+        </div>
+        <div className="tw-grow tw-overflow-y-auto tw-border-t tw-border-main tw-border-opacity-20 tw-p-4">
+          {Object.entries(serviceSumsForAllReports).map(([key, value]) => (
+            <IncrementorSmall
+              dataTestId={`general-${key}-${value || 0}`}
+              key={`general-${key}-${value || 0}`}
+              service={key}
+              count={value || 0}
+              date={dayjs(period.startDate).format('YYYY-MM-DD')}
+              disabled
+              className="max-w-[400px] tw-w-full tw-text-neutral-600"
+            />
+          ))}
+        </div>
+      </section>
+    </>
   );
 }
 
diff --git a/dashboard/src/scenes/report/components/Transmissions.js b/dashboard/src/scenes/report/components/Transmissions.js
index 31b6e1524..d3e45b3ad 100644
--- a/dashboard/src/scenes/report/components/Transmissions.js
+++ b/dashboard/src/scenes/report/components/Transmissions.js
@@ -25,22 +25,40 @@ export default function Transmissions({ period, selectedTeamsObject, reports })
   }, [period]);
 
   return (
-    <div>
-      <h3 className="tw-w-full tw-px-3 tw-py-2 tw-text-base tw-font-medium tw-text-black">👋&nbsp;Comment s'est passée la&nbsp;journée&nbsp;?</h3>
-      {days.map((day) => {
-        return (
-          <details open={days.length === 1} className="tw-my-2 tw-p-2" key={day}>
-            <summary>
-              <h4 className="tw-inline-block tw-text-base tw-capitalize">{dayjs(day).format('dddd D MMM')}</h4>
-            </summary>
-            {Object.keys(selectedTeamsObject).map((teamId) => {
-              const report = reports.find((report) => report.team === teamId && report.date === day);
-              return <Transmission day={day} teamId={teamId} report={report} team={selectedTeamsObject[teamId]} key={teamId + report?._id} />;
-            })}
-          </details>
-        );
-      })}
-    </div>
+    <>
+      <section className="noprint">
+        <h3 className="tw-w-full tw-px-3 tw-py-2 tw-text-base tw-font-medium tw-text-black">👋&nbsp;Comment s'est passée la&nbsp;journée&nbsp;?</h3>
+        {days.map((day) => {
+          return (
+            <details open={days.length === 1} className="tw-my-2 tw-p-2" key={day}>
+              <summary>
+                <h4 className="tw-inline-block tw-text-base tw-capitalize">{dayjs(day).format('dddd D MMM')}</h4>
+              </summary>
+              {Object.keys(selectedTeamsObject).map((teamId) => {
+                const report = reports.find((report) => report.team === teamId && report.date === day);
+                return <Transmission day={day} teamId={teamId} report={report} team={selectedTeamsObject[teamId]} key={teamId + report?._id} />;
+              })}
+            </details>
+          );
+        })}
+      </section>
+      <section
+        aria-hidden="true"
+        className="printonly tw-mt-12 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
+        <h3 className="tw-w-full tw-px-3 tw-py-2 tw-text-base tw-font-medium tw-text-black">👋&nbsp;Comment s'est passée la&nbsp;journée&nbsp;?</h3>
+        {days.map((day) => {
+          return (
+            <div className="tw-border-t tw-border-zinc-200" key={day}>
+              <h4 className="tw-inline-block tw-p-4 tw-text-base tw-capitalize">{dayjs(day).format('dddd D MMM')}</h4>
+              {Object.keys(selectedTeamsObject).map((teamId) => {
+                const report = reports.find((report) => report.team === teamId && report.date === day);
+                return <Transmission day={day} teamId={teamId} report={report} team={selectedTeamsObject[teamId]} key={teamId + report?._id} />;
+              })}
+            </div>
+          );
+        })}
+      </section>
+    </>
   );
 }
 
@@ -76,49 +94,61 @@ function Transmission({ report, team, day, teamId }) {
 
   return (
     <>
-      <div className="p-2 tw-mb-4 tw-flex tw-flex-col tw-rounded-2xl tw-bg-gray-100">
+      <div className="p-2 tw-mb-4 tw-flex tw-flex-col tw-rounded-2xl tw-bg-gray-100 print:tw-mx-4 print:tw-bg-transparent">
         <p className="tw-font-medium">
           {team?.nightSession ? '🌒' : '☀️ '} {team?.name || ''}
         </p>
-        {!report?.description ? (
-          <button onClick={() => setIsEditingTransmission(true)} className="tw-mx-auto tw-rounded-lg tw-border tw-border-main tw-px-3 tw-py-1">
-            Ajouter une transmission
-          </button>
-        ) : (
-          <>
-            <p>
-              {report?.description?.split('\n').map((sentence, index) => (
-                <React.Fragment key={index}>
-                  {sentence}
-                  <br />
-                </React.Fragment>
-              ))}
-            </p>
-            <button onClick={() => setIsEditingTransmission(true)} className="tw-mx-auto tw-rounded-lg tw-border tw-border-main tw-px-3 tw-py-1">
-              Modifier la transmission
-            </button>
-          </>
-        )}
-        <hr />
-        <div className="tw-my-2">
-          {!!collaborations.length && (
+        <div className="print:tw-ml-4 print:tw-border-l-2 print:tw-border-zinc-300 print:tw-pl-8">
+          {!report?.description ? (
+            <>
+              <h5 className="printonly tw-text-base tw-font-medium">Aucune transmission pour cette journée</h5>
+              <button
+                onClick={() => setIsEditingTransmission(true)}
+                className="noprint tw-mx-auto tw-rounded-lg tw-border tw-border-main tw-px-3 tw-py-1">
+                Ajouter une transmission
+              </button>
+            </>
+          ) : (
             <>
-              <p className="tw-mb-2">Co-interventions avec&nbsp;:</p>
+              {report?.description?.length > 0 && <h5 className="printonly tw-text-base tw-font-medium">Transmission :</h5>}
+              <p className="print:tw-border-l print:tw-border-zinc-200 print:tw-pl-4">
+                {report?.description?.split('\n').map((sentence, index) => (
+                  <React.Fragment key={index}>
+                    {sentence}
+                    <br />
+                  </React.Fragment>
+                ))}
+              </p>
+              <button
+                onClick={() => setIsEditingTransmission(true)}
+                className="noprint tw-mx-auto tw-rounded-lg tw-border tw-border-main tw-px-3 tw-py-1">
+                Modifier la transmission
+              </button>
             </>
           )}
-          <SelectAndCreateCollaboration
-            values={collaborations}
-            onChange={(e) => {
-              const nextCollabs = e.currentTarget.value;
-              setCollaborations(nextCollabs);
-              onSaveReport({
-                ...report,
-                collaborations: nextCollabs,
-                team: teamId,
-                date: day,
-              });
-            }}
-          />
+          <hr />
+          <div className="tw-my-2">
+            {!!collaborations.length && (
+              <>
+                <p className="tw-mb-2">Co-interventions avec&nbsp;:</p>
+                <p className="print:tw-border-l print:tw-border-zinc-200 print:tw-pl-4">{collaborations.join(', ')}</p>
+              </>
+            )}
+            <SelectAndCreateCollaboration
+              values={collaborations}
+              className="noprint"
+              onChange={(e) => {
+                const nextCollabs = e.currentTarget.value;
+                setCollaborations(nextCollabs);
+                onSaveReport({
+                  ...report,
+                  collaborations: nextCollabs,
+                  team: teamId,
+                  date: day,
+                });
+              }}
+            />
+          </div>
         </div>
       </div>
       <ModalContainer open={isEditingTransmission} size="3xl">
diff --git a/dashboard/src/scenes/report/view.js b/dashboard/src/scenes/report/view.js
index 5124489e3..0eacc5268 100644
--- a/dashboard/src/scenes/report/view.js
+++ b/dashboard/src/scenes/report/view.js
@@ -16,7 +16,7 @@ import SelectTeamMultiple from '../../components/SelectTeamMultiple';
 import { arrayOfitemsGroupedByPersonSelector, onlyFilledObservationsTerritories } from '../../recoil/selectors';
 import { ActionsOrConsultationsReport } from './components/ActionsOrConsultationsReport';
 import ServicesReport from './components/ServicesReport';
-import DateRangePickerWithPresets, { reportsPresets } from '../../components/DateRangePickerWithPresets';
+import DateRangePickerWithPresets, { formatPeriod, reportsPresets } from '../../components/DateRangePickerWithPresets';
 import { CommentsSocialAndMedical } from './components/CommentsReport';
 import { PassagesReport } from './components/PassagesReport';
 import { RencontresReport } from './components/RencontresReport';
@@ -265,6 +265,17 @@ const View = () => {
   return (
     <>
       <HeaderStyled className=" !tw-py-4 tw-px-0">
+        <div className="printonly tw-py-4 tw-px-8 tw-text-2xl tw-font-bold" aria-hidden>
+          Compte-rendu{' '}
+          {viewAllOrganisationData ? (
+            <>global</>
+          ) : (
+            <>
+              {selectedTeams.length > 1 ? 'des équipes' : "de l'équipe"} {selectedTeams.map((t) => t.name).join(', ')}
+            </>
+          )}{' '}
+          - {formatPeriod({ period, preset })}
+        </div>
         <div className="noprint tw-flex tw-grow">
           <HeaderTitle className="tw-w-96 tw-font-normal">
             <span>
@@ -338,59 +349,56 @@ const View = () => {
         </div>
       </div>
       {!!selectedTeams.length && (
-        <div className="noprint -tw-mx-12 tw-flex tw-h-full tw-flex-col">
-          <div
-            className={[
-              'noprint tw-mt-4 tw-flex tw-w-full tw-grow tw-basis-full tw-items-start',
-              viewAllOrganisationData || selectedTeamIds.length ? 'tw-flex' : 'tw-hidden',
-            ].join(' ')}>
-            <div className="tw-mb-12 tw-min-h-1/2 tw-basis-6/12 tw-overflow-auto">
-              <div className="tw-mb-4 tw-h-[60vh] tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
-                <ActionsOrConsultationsReport actions={actions} consultations={consultations} period={period} />
-              </div>
-              {canSeeComments && (
-                <div className="tw-h-[60vh] tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
-                  <CommentsSocialAndMedical comments={comments} commentsMedical={commentsMedical} />
+        <>
+          <div className="-tw-mx-12 tw-flex tw-h-full tw-flex-col print:tw-mx-0">
+            <div
+              className={[
+                'tw-mt-4 tw-flex tw-w-full tw-grow tw-basis-full tw-items-start print:tw-flex-wrap print:tw-items-stretch',
+                viewAllOrganisationData || selectedTeamIds.length ? 'tw-flex' : 'tw-hidden',
+              ].join(' ')}>
+              <div className="tw-mb-12 tw-min-h-1/2 tw-basis-6/12 tw-overflow-auto print:tw-min-h-0 print:tw-basis-full">
+                <div className="tw-mb-4 tw-h-[60vh] tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow print:tw-h-auto print:tw-border-none print:tw-shadow-none">
+                  <ActionsOrConsultationsReport actions={actions} consultations={consultations} period={period} />
                 </div>
-              )}
-            </div>
-            <div className="tw-mx-4 tw-mb-12 tw-basis-3/12 ">
-              <div
-                style={{
-                  gridTemplateColumns: 'repeat(auto-fit, minmax(40%, 1fr))',
-                }}
-                className="tw-mb-4 tw-grid tw-gap-4">
-                {organisation.passagesEnabled && (
-                  <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow-2xl">
-                    <PassagesReport passages={passages} period={period} selectedTeams={selectedTeams} />
+                {canSeeComments && (
+                  <div className="tw-mb-4 tw-h-[60vh] tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow print:tw-h-auto print:tw-border-none print:tw-shadow-none">
+                    <CommentsSocialAndMedical comments={comments} commentsMedical={commentsMedical} />
                   </div>
                 )}
-                {organisation.rencontresEnabled && (
-                  <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow">
-                    <RencontresReport rencontres={rencontres} period={period} selectedTeams={selectedTeams} />
+              </div>
+              <div className="tw-mx-4 tw-mb-12 tw-basis-3/12 print:tw-basis-full">
+                <div className="tw-mb-4 tw-grid tw-grid-cols-new-report-squares tw-gap-4 print:tw-flex print:tw-flex-col">
+                  {organisation.passagesEnabled && (
+                    <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow-2xl print:tw-border-none print:tw-bg-transparent print:tw-shadow-none">
+                      <PassagesReport passages={passages} period={period} selectedTeams={selectedTeams} />
+                    </div>
+                  )}
+                  {organisation.rencontresEnabled && (
+                    <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow-2xl print:tw-border-none print:tw-bg-transparent print:tw-shadow-none">
+                      <RencontresReport rencontres={rencontres} period={period} selectedTeams={selectedTeams} />
+                    </div>
+                  )}
+                  {organisation.territoriesEnabled && (
+                    <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow-2xl print:tw-border-none print:tw-bg-transparent print:tw-shadow-none">
+                      <ObservationsReport observations={observations} period={period} selectedTeams={selectedTeams} />
+                    </div>
+                  )}
+                  <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow-2xl print:tw-border-none print:tw-bg-transparent print:tw-shadow-none">
+                    <PersonsReport personsCreated={personsCreated} period={period} selectedTeams={selectedTeams} />
                   </div>
-                )}
-                {organisation.territoriesEnabled && (
-                  <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow">
-                    <ObservationsReport observations={observations} period={period} selectedTeams={selectedTeams} />
+                </div>
+                {organisation.receptionEnabled && (
+                  <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-white tw-shadow-2xl print:tw-border-none print:tw-bg-transparent print:tw-shadow-none">
+                    <ServicesReport selectedTeamsObject={selectedTeamsObject} period={period} />
                   </div>
                 )}
-                <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow">
-                  <PersonsReport personsCreated={personsCreated} period={period} selectedTeams={selectedTeams} />
-                </div>
               </div>
-              {organisation.receptionEnabled && (
-                <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
-                  <ServicesReport selectedTeamsObject={selectedTeamsObject} period={period} />
-                </div>
-              )}
-            </div>
-
-            <div className="tw-mr-2 tw-mb-12 tw-min-h-screen tw-basis-3/12 tw-overflow-auto tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
-              <Transmissions period={period} selectedTeamsObject={selectedTeamsObject} reports={reports} />
+              <div className="tw-mr-2 tw-mb-12 tw-min-h-screen tw-basis-3/12 tw-overflow-auto tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow print:tw-basis-full print:tw-border-none print:tw-shadow-none">
+                <Transmissions period={period} selectedTeamsObject={selectedTeamsObject} reports={reports} />
+              </div>
             </div>
           </div>
-        </div>
+        </>
       )}
       <ModalContainer open={showWarning} size="prose" onClose={() => setShowWarning(false)}>
         <ModalHeader title="Comptes-rendus - Version Beta" onClose={() => setShowWarning(false)} />
diff --git a/dashboard/tailwind.config.js b/dashboard/tailwind.config.js
index 0fee50f8a..5003dbaf6 100644
--- a/dashboard/tailwind.config.js
+++ b/dashboard/tailwind.config.js
@@ -36,6 +36,9 @@ module.exports = {
           '20%': { transform: 'rotate(0deg)' },
         },
       },
+      gridTemplateColumns: {
+        "new-report-squares": 'repeat(auto-fit, minmax(40%, 1fr))'
+      },
       colors: {
         main: '#226854', // higher contrast
         main75: '#617e71',