feat: affiche la répartition de la RGCP mois par mois

site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx

@@ -5,7 +5,9 @@ import { styled } from 'styled-components'
 import { ExplicableRule } from '@/components/conversation/Explicable'
 import NumberInput from '@/components/conversation/NumberInput'
 import { useEngine } from '@/components/utils/EngineContext'
+import { Tooltip } from '@/design-system/tooltip'
 
+import Répartition from './components/Répartition'
 import { MonthState, rémunérationBruteDottedName } from './utils'
 
 type RémunérationBruteInput = {
@@ -87,40 +89,55 @@ export default function RéductionGénéraleMoisParMois({
 				</thead>
 				<tbody>
 					{data.length > 0 &&
-						months.map((monthName, monthIndex) => (
-							<tr key={`month-${monthIndex}`}>
-								<th scope="row">{monthName}</th>
-								<td>
-									<NumberInput
-										{...ruleInputProps}
-										id={`${rémunérationBruteDottedName.replace(
-											/\s|\./g,
-											'_'
-										)}-${monthIndex}`}
-										aria-label={`${engine.getRule(rémunérationBruteDottedName)
-											?.title} (${monthName})`}
-										onChange={(rémunérationBrute?: PublicodesExpression) =>
-											onRémunérationChange(
-												monthIndex,
-												rémunérationBrute as RémunérationBruteInput
-											)
-										}
-										value={data[monthIndex].rémunérationBrute}
-									/>
-								</td>
-								<td>
-									{data[monthIndex].réductionGénérale
-										? formatValue(
-												{ nodeValue: data[monthIndex].réductionGénérale },
-												{
-													displayedUnit,
-													language,
-												}
-										  )
-										: formatValue(0, { displayedUnit, language })}
-								</td>
-							</tr>
-						))}
+						months.map((monthName, monthIndex) => {
+							const tooltip = (
+								<Répartition
+									contexte={{
+										[rémunérationBruteDottedName]:
+											data[monthIndex].rémunérationBrute,
+									}}
+								/>
+							)
+
+							return (
+								<tr key={`month-${monthIndex}`}>
+									<th scope="row">{monthName}</th>
+									<td>
+										<NumberInput
+											{...ruleInputProps}
+											id={`${rémunérationBruteDottedName.replace(
+												/\s|\./g,
+												'_'
+											)}-${monthIndex}`}
+											aria-label={`${engine.getRule(rémunérationBruteDottedName)
+												?.title} (${monthName})`}
+											onChange={(rémunérationBrute?: PublicodesExpression) =>
+												onRémunérationChange(
+													monthIndex,
+													rémunérationBrute as RémunérationBruteInput
+												)
+											}
+											value={data[monthIndex].rémunérationBrute}
+										/>
+									</td>
+									<td>
+										{data[monthIndex].réductionGénérale ? (
+											<Tooltip tooltip={tooltip}>
+												{formatValue(
+													{ nodeValue: data[monthIndex].réductionGénérale },
+													{
+														displayedUnit,
+														language,
+													}
+												)}
+											</Tooltip>
+										) : (
+											formatValue(0, { displayedUnit, language })
+										)}
+									</td>
+								</tr>
+							)
+						})}
 				</tbody>
 			</StyledTable>
 		</>

site/source/pages/simulateurs/reduction-generale/components/Répartition.tsx

@@ -2,24 +2,32 @@ import { styled } from 'styled-components'
 
 import { SimulationValue } from '@/components/Simulation/SimulationValue'
 import { Li, Ul } from '@/design-system/typography/list'
+import { Contexte } from '@/domaine/Contexte'
 
-export default function Répartition() {
+type Props = {
+	contexte?: Contexte
+}
+
+export default function Répartition({ contexte = {} }: Props) {
 	return (
 		<StyledUl>
 			<StyledLi>
 				<SimulationValue
 					dottedName="salarié . cotisations . exonérations . réduction générale . part retraite"
+					contexte={contexte}
 					round={false}
 				/>
 			</StyledLi>
 			<StyledLi>
 				<SimulationValue
 					dottedName="salarié . cotisations . exonérations . réduction générale . part Urssaf"
+					contexte={contexte}
 					round={false}
 				/>
 				<SimulationValue
 					dottedName="salarié . cotisations . exonérations . réduction générale . part Urssaf . part chômage"
 					label="dont chômage"
+					contexte={contexte}
 					round={false}
 				/>
 			</StyledLi>