feat: print new report (#1861)

SocialGouv · Feb 14, 2024 · c98d280 · c98d280
1 parent 37678e3
commit c98d280
Show file tree

Hide file tree

Showing 12 changed files with 333 additions and 169 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"