feat: Add expiration annotations to date qualifications

Author: PolariTOON

react/Viewer/Panel/QualificationListItemDate.jsx

@@ -1,17 +1,23 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
+import { models } from 'cozy-client'
+
 import ListItem from '../../MuiCozyTheme/ListItem'
 import ListItemSecondaryAction from '../../MuiCozyTheme/ListItemSecondaryAction'
 import IconButton from '../../IconButton'
 import Icon from '../../Icon'
 import Dots from '../../Icons/Dots'
+import Typography from '../../Typography'
+import ExpirationAnnotation from '../components/ExpirationAnnotation'
 import QualificationListItemText from './QualificationListItemText'
 import { useI18n } from '../../I18n'
 import { formatDate } from '../helpers'
 
+const { isExpired, isExpiringSoon } = models.paper
+
 const QualificationListItemDate = forwardRef(
-  ({ formatedMetadataQualification, toggleActionsMenu }, ref) => {
+  ({ file, formatedMetadataQualification, toggleActionsMenu }, ref) => {
     const { t, f, lang } = useI18n()
     const { name, value } = formatedMetadataQualification
     const formattedDate = value
@@ -22,7 +28,21 @@ const QualificationListItemDate = forwardRef(
       <ListItem className={'u-pl-2 u-pr-3'}>
         <QualificationListItemText
           primary={t(`Viewer.panel.qualification.date.title.${name}`)}
-          secondary={formattedDate}
+          secondary={
+            <>
+              <Typography component="span" variant="inherit">
+                {formattedDate}
+              </Typography>
+              {(isExpired(file) || isExpiringSoon(file)) && (
+                <>
+                  <Typography component="span" variant="inherit">
+                    {' · '}
+                  </Typography>
+                  <ExpirationAnnotation file={file} />
+                </>
+              )}
+            </>
+          }
           disabled={!value}
         />
         <ListItemSecondaryAction>
@@ -41,6 +61,7 @@ const QualificationListItemDate = forwardRef(
 QualificationListItemDate.displayName = 'QualificationListItemDate'
 
 QualificationListItemDate.propTypes = {
+  file: PropTypes.object.isRequired,
   formatedMetadataQualification: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.string