From 922e163ef94f9b22fc1931f447b60216285cf8b1 Mon Sep 17 00:00:00 2001
From: Malek Zemni <malek.zemni@octo.com>
Date: Thu, 12 Dec 2024 15:04:24 +0100
Subject: [PATCH] feat: ajout archivage dans portefeuille

---
 .../(with-chat)/pilotage/PilotagePage.tsx     | 57 +++++++++++++++++-
 .../(with-chat)/pilotage/page.tsx             |  3 +
 .../OngletBeneficiairesAArchiverPilotage.tsx  | 33 +++++++++++
 .../TableauBeneficiairesAArchiver.tsx         | 58 +++++++++++++++++++
 4 files changed, 150 insertions(+), 1 deletion(-)
 create mode 100644 components/pilotage/OngletBeneficiairesAArchiverPilotage.tsx
 create mode 100644 components/pilotage/TableauBeneficiairesAArchiver.tsx

diff --git a/app/(connected)/(with-sidebar)/(with-chat)/pilotage/PilotagePage.tsx b/app/(connected)/(with-sidebar)/(with-chat)/pilotage/PilotagePage.tsx
index 3ae40de00..0b79086ac 100644
--- a/app/(connected)/(with-sidebar)/(with-chat)/pilotage/PilotagePage.tsx
+++ b/app/(connected)/(with-sidebar)/(with-chat)/pilotage/PilotagePage.tsx
@@ -5,6 +5,8 @@ import dynamic from 'next/dynamic'
 import { useRouter } from 'next/navigation'
 import React, { useEffect, useState } from 'react'
 
+import { BaseBeneficiaire } from '../../../../../interfaces/beneficiaire'
+
 import IconComponent, { IconName } from 'components/ui/IconComponent'
 import Tab from 'components/ui/Navigation/Tab'
 import TabList from 'components/ui/Navigation/TabList'
@@ -29,11 +31,18 @@ const OngletAnimationsCollectivesPilotage = dynamic(
 const OngletSessionsImiloPilotage = dynamic(
   () => import('components/pilotage/OngletSessionsImiloPilotage')
 )
+const OngletBeneficiairesAArchiverPilotage = dynamic(
+  () => import('components/pilotage/OngletBeneficiairesAArchiverPilotage')
+)
 const EncartAgenceRequise = dynamic(
   () => import('components/EncartAgenceRequise')
 )
 
-export type Onglet = 'ACTIONS' | 'ANIMATIONS_COLLECTIVES' | 'SESSIONS_IMILO'
+export type Onglet =
+  | 'ACTIONS'
+  | 'ANIMATIONS_COLLECTIVES'
+  | 'SESSIONS_IMILO'
+  | 'ARCHIVAGE'
 
 const ongletProps: {
   [key in Onglet]: { queryParam: string; trackingLabel: string }
@@ -47,6 +56,10 @@ const ongletProps: {
     queryParam: 'sessionsImilo',
     trackingLabel: 'Sessions i-milo',
   },
+  ARCHIVAGE: {
+    queryParam: 'archivage',
+    trackingLabel: 'Archivage bénéficiaire',
+  },
 }
 
 type PilotageProps = {
@@ -87,6 +100,12 @@ function PilotagePage({
       | undefined
     >(animationsCollectives)
 
+  const beneficiairesAArchiver = portefeuille.filter(
+    (beneficiaire) => beneficiaire.estAArchiver
+  )
+  const nbBeneficiairesAArchiver = beneficiairesAArchiver.length
+  const aDesBeneficiairesAArchiver = nbBeneficiairesAArchiver > 0
+
   const pageTracking = 'Pilotage'
   const [trackingLabel, setTrackingLabel] = useState<string>(
     pageTracking + ' - Consultation ' + ongletProps[currentTab].trackingLabel
@@ -215,6 +234,17 @@ function PilotagePage({
               )}
             </>
           )}
+          {aDesBeneficiairesAArchiver && (
+            <div>
+              <dt className='text-base-bold'>Bénéficiaires</dt>
+              <dd
+                className={`mt-2 rounded-base px-3 py-2 ${aDesBeneficiairesAArchiver ? 'bg-warning_lighten text-warning' : 'bg-primary_lighten text-primary_darken'}`}
+              >
+                <div className='text-xl-bold'>{nbBeneficiairesAArchiver}</div>
+                <span className='text-base-bold'> À archiver</span>
+              </dd>
+            </div>
+          )}
         </dl>
       </div>
 
@@ -246,6 +276,17 @@ function PilotagePage({
             iconName={IconName.EventFill}
           />
         )}
+        {aDesBeneficiairesAArchiver && (
+          <Tab
+            label='Archivage'
+            ariaLabel='Archivage des bénéficiaires'
+            count={nbBeneficiairesAArchiver}
+            selected={currentTab === 'ARCHIVAGE'}
+            controls='liste-beneficiaires-a-archiver'
+            onSelectTab={() => switchTab('ARCHIVAGE')}
+            iconName={IconName.EventFill}
+          />
+        )}
       </TabList>
 
       {currentTab === 'ACTIONS' && (
@@ -308,6 +349,20 @@ function PilotagePage({
             {sessions && <OngletSessionsImiloPilotage sessions={sessions} />}
           </div>
         )}
+
+      {currentTab === 'ARCHIVAGE' && aDesBeneficiairesAArchiver && (
+        <div
+          role='tabpanel'
+          aria-labelledby='liste-beneficiaires-a-archiver--tab'
+          tabIndex={0}
+          id='liste-beneficiaires-a-archiver'
+          className='mt-8 pb-8 border-b border-primary_lighten'
+        >
+          <OngletBeneficiairesAArchiverPilotage
+            beneficiaires={beneficiairesAArchiver}
+          />
+        </div>
+      )}
     </>
   )
 }
diff --git a/app/(connected)/(with-sidebar)/(with-chat)/pilotage/page.tsx b/app/(connected)/(with-sidebar)/(with-chat)/pilotage/page.tsx
index 0ddbc451d..bdde32c41 100644
--- a/app/(connected)/(with-sidebar)/(with-chat)/pilotage/page.tsx
+++ b/app/(connected)/(with-sidebar)/(with-chat)/pilotage/page.tsx
@@ -73,6 +73,9 @@ export default async function Pilotage({
     case 'sessionsImilo':
       onglet = 'SESSIONS_IMILO'
       break
+    case 'archivage':
+      onglet = 'ARCHIVAGE'
+      break
   }
 
   return (
diff --git a/components/pilotage/OngletBeneficiairesAArchiverPilotage.tsx b/components/pilotage/OngletBeneficiairesAArchiverPilotage.tsx
new file mode 100644
index 000000000..f313d3a93
--- /dev/null
+++ b/components/pilotage/OngletBeneficiairesAArchiverPilotage.tsx
@@ -0,0 +1,33 @@
+import { BeneficiaireWithActivity } from '../../interfaces/beneficiaire'
+
+import TableauBeneficiairesAArchiver from './TableauBeneficiairesAArchiver'
+
+import EmptyStateImage from 'assets/images/illustration-event-grey.svg'
+
+interface OngletBeneficiairesAArchiverPilotageProps {
+  beneficiaires: BeneficiaireWithActivity[]
+}
+export default function OngletBeneficiairesAArchiverPilotage({
+  beneficiaires,
+}: OngletBeneficiairesAArchiverPilotageProps) {
+  return (
+    <>
+      {Boolean(beneficiaires && beneficiaires.length === 0) && (
+        <div className='flex flex-col justify-center items-center'>
+          <EmptyStateImage
+            focusable={false}
+            aria-hidden={true}
+            className='w-[360px] h-[200px]'
+          />
+          <p className='mt-4 text-base-medium w-2/3 text-center'>
+            Vous n’avez pas de bénéficiaires à archiver.
+          </p>
+        </div>
+      )}
+
+      {beneficiaires.length > 0 && (
+        <TableauBeneficiairesAArchiver beneficiaires={beneficiaires} />
+      )}
+    </>
+  )
+}
diff --git a/components/pilotage/TableauBeneficiairesAArchiver.tsx b/components/pilotage/TableauBeneficiairesAArchiver.tsx
new file mode 100644
index 000000000..289c0102a
--- /dev/null
+++ b/components/pilotage/TableauBeneficiairesAArchiver.tsx
@@ -0,0 +1,58 @@
+import {
+  BaseBeneficiaire,
+  BeneficiaireFromListe,
+} from '../../interfaces/beneficiaire'
+
+import { Badge } from 'components/ui/Indicateurs/Badge'
+import Table from 'components/ui/Table/Table'
+import TD from 'components/ui/Table/TD'
+import TDLink from 'components/ui/Table/TDLink'
+import { TH } from 'components/ui/Table/TH'
+import TR from 'components/ui/Table/TR'
+import { toLongMonthDate } from 'utils/date'
+
+interface TableauBeneficiairesAArchiverProps {
+  beneficiaires: BeneficiaireFromListe[]
+}
+
+export default function TableauBeneficiairesAArchiver({
+  beneficiaires,
+}: TableauBeneficiairesAArchiverProps) {
+  return (
+    <>
+      {beneficiaires.length > 0 && (
+        <Table caption={{ text: 'Liste des bénéficiaires à archiver' }}>
+          <thead>
+            <TR isHeader={true}>
+              <TH>Date</TH>
+              <TH>Titre de l’animation collective</TH>
+              <TH>Participants</TH>
+              <TH>Voir le détail</TH>
+            </TR>
+          </thead>
+
+          <tbody>
+            {beneficiaires.map((benef: BaseBeneficiaire) => (
+              <TR key={benef.id}>
+                <TD>{toLongMonthDate(benef.date)}</TD>
+                <TD isBold>{benef.titre}</TD>
+                <TD>
+                  <Badge
+                    count={benef.nombreInscrits}
+                    textColor='accent_1'
+                    bgColor='accent_1_lighten'
+                    size={6}
+                  />
+                </TD>
+                <TDLink
+                  href={`/mes-jeunes/edition-rdv?idRdv=${benef.id}`}
+                  labelPrefix='Archiver le jeune'
+                />
+              </TR>
+            ))}
+          </tbody>
+        </Table>
+      )}
+    </>
+  )
+}