retours revue

components/action/ActionRow.tsx

@@ -74,7 +74,8 @@ export default function ActionRow({ action, jeuneId }: ActionRowProps) {
       <TD className='rounded-r-base w-[160px]'>
         <span className='flex items-center justify-between'>
           <TagStatutAction
-            status={actionEstEnRetard ? StatutAction.EnRetard : action.status}
+            status={action.status}
+            actionEstEnRetard={actionEstEnRetard}
           />
           <IconComponent
             name={IconName.ChevronRight}

components/action/FiltresStatutsActions.tsx

@@ -61,6 +61,7 @@ export default function FiltresStatutsActions({
         aria-expanded={afficherFiltresStatuts}
         onClick={() => setAfficherFiltresStatuts(!afficherFiltresStatuts)}
         aria-label='Statut - Filtrer les actions'
+        title='Filtrer les actions par statut'
         className='flex items-center p-4 w-full h-full'
       >
         Statut

components/action/OngletActions.tsx

@@ -114,15 +114,16 @@ export default function OngletActions({
         filtresParEtatsQualification,
         tri
       ).then(({ actions, metadonnees }) => {
-        if (filtresParStatuts.includes(StatutAction.EnRetard))
+        /*if (filtresParStatuts.includes(StatutAction.EnRetard))
           setActionsAffichees(
             actions.filter(
               (action) =>
                 DateTime.fromISO(action.dateEcheance) < DateTime.now() &&
                 action.status === StatutAction.EnCours
             )
           )
-        else setActionsAffichees(actions)
+        else */
+        setActionsAffichees(actions)
 
         setNombrePages(metadonnees.nombrePages)
         setIsLoading(false)

components/action/TableauActionsJeune.tsx

@@ -67,6 +67,12 @@ export default function TableauActionsJeune({
   const headerColumnWithButtonHover = 'rounded-base hover:bg-primary_lighten'
   const columnHeaderButtonStyle = 'flex items-center w-full h-full p-4'
 
+  function getOrdreTriParDate() {
+    return `Trier les actions ordre ${
+      getIsSortedDesc() ? 'antéchronologique' : 'chronologique'
+    }`
+  }
+
   function filtrerActionsParStatuts(statutsSelectionnes: StatutAction[]) {
     setStatutsValides(statutsSelectionnes)
     onFiltres({
@@ -113,7 +119,8 @@ export default function TableauActionsJeune({
               <TH className={headerColumnWithButtonHover} estCliquable={true}>
                 <button
                   onClick={trierParDateEcheance}
-                  aria-label='Date de l’action - trier les actions'
+                  aria-label={`Date de l’action - ${getOrdreTriParDate()}`}
+                  title={getOrdreTriParDate()}
                   className={columnHeaderButtonStyle}
                 >
                   Date de l’action

components/action/TagStatutAction.tsx

@@ -6,14 +6,25 @@ import { StatutAction } from 'interfaces/action'
 
 interface TagStatutActionProps {
   status: StatutAction
+  actionEstEnRetard: boolean
 }
 
-export default function TagStatutAction({ status }: TagStatutActionProps) {
-  const {
-    label,
-    color,
-    altColor: backgroundColor,
-  } = propsStatutsActions[status]
+export default function TagStatutAction({
+  status,
+  actionEstEnRetard,
+}: TagStatutActionProps) {
+  const { label, color, altColor: backgroundColor } = determineAttributs()
+
+  function determineAttributs() {
+    if (actionEstEnRetard)
+      return {
+        label: 'En retard',
+        color: 'warning',
+        altColor: 'warning_lighten',
+      }
+    return propsStatutsActions[status]
+  }
+
   return (
     <TagStatut
       label={label}

components/action/propsStatutsActions.ts

@@ -27,11 +27,6 @@ const propsStatutsActions: {
     color: 'success',
     altColor: 'success_lighten',
   },
-  EnRetard: {
-    label: 'En retard',
-    color: 'warning',
-    altColor: 'warning_lighten',
-  },
 }
 
 export default propsStatutsActions

components/agenda-jeune/AgendaRow.tsx

@@ -1,10 +1,12 @@
+import { DateTime } from 'luxon'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React from 'react'
 
 import TagStatutAction from 'components/action/TagStatutAction'
 import IconComponent, { IconName } from 'components/ui/IconComponent'
 import { TagStatut } from 'components/ui/Indicateurs/Tag'
+import { StatutAction } from 'interfaces/action'
 import { EntreeAgenda } from 'interfaces/agenda'
 import { StructureConseiller } from 'interfaces/conseiller'
 
@@ -44,6 +46,14 @@ export default function AgendaRow({ entree, idBeneficiaire }: AgendaRowProps) {
   }
   const { href, iconName, label } = props[entree.type]
 
+  function determineActionEnRetard() {
+    return (
+      entree.type === 'action' &&
+      entree.statut === StatutAction.EnCours &&
+      entree.date < DateTime.now()
+    )
+  }
+
   return (
     <li className='mt-4 text-base-regular rounded-base shadow-base hover:bg-primary_lighten'>
       <Link
@@ -66,7 +76,12 @@ export default function AgendaRow({ entree, idBeneficiaire }: AgendaRowProps) {
           {entree.typeSession && entree.sousTitre && entree.sousTitre}
         </div>
         <div className='flex justify-end'>
-          {entree.statut && <TagStatutAction status={entree.statut} />}
+          {entree.statut && (
+            <TagStatutAction
+              status={entree.statut}
+              actionEstEnRetard={determineActionEnRetard()}
+            />
+          )}
           {entree.source === StructureConseiller.MILO && (
             <>
               {entree.type === 'session' && entree.typeSession && (

interfaces/action.ts

@@ -38,7 +38,6 @@ export enum StatutAction {
   Terminee = 'Terminee',
   Qualifiee = 'Qualifiee',
   Annulee = 'Annulee',
-  EnRetard = 'EnRetard',
 }
 
 export enum EtatQualificationAction {