feat: add support for all period types from @dhis2/multi-calendar-dates

janhenrikoverland · claude · janhenrikoverland · commit 41c304ec89a1 · 2026-01-29T13:32:50.000+01:00
Expand the period type mappings to include all 52 period types supported by @dhis2/multi-calendar-dates library, including all 12 financial year variants (FYJAN-FYDEC), weekly variants, quarterly variants, and six-monthly variants. This ensures that when a period type like FinancialSep is enabled on the server, it correctly appears in the fixed periods dropdown. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2026-01-27T09:57:38.828Z\n"
-"PO-Revision-Date: 2026-01-27T09:57:38.828Z\n"
+"POT-Creation-Date: 2026-01-29T11:57:17.738Z\n"
+"PO-Revision-Date: 2026-01-29T11:57:17.738Z\n"
 
 msgid "view only"
 msgstr "view only"
@@ -880,18 +880,42 @@ msgstr "Six-monthly April"
 msgid "Yearly"
 msgstr "Yearly"
 
-msgid "Financial year (Start November)"
-msgstr "Financial year (Start November)"
+msgid "Financial year (Start January)"
+msgstr "Financial year (Start January)"
 
-msgid "Financial year (Start October)"
-msgstr "Financial year (Start October)"
+msgid "Financial year (Start February)"
+msgstr "Financial year (Start February)"
 
-msgid "Financial year (Start July)"
-msgstr "Financial year (Start July)"
+msgid "Financial year (Start March)"
+msgstr "Financial year (Start March)"
 
 msgid "Financial year (Start April)"
 msgstr "Financial year (Start April)"
 
+msgid "Financial year (Start May)"
+msgstr "Financial year (Start May)"
+
+msgid "Financial year (Start June)"
+msgstr "Financial year (Start June)"
+
+msgid "Financial year (Start July)"
+msgstr "Financial year (Start July)"
+
+msgid "Financial year (Start August)"
+msgstr "Financial year (Start August)"
+
+msgid "Financial year (Start September)"
+msgstr "Financial year (Start September)"
+
+msgid "Financial year (Start October)"
+msgstr "Financial year (Start October)"
+
+msgid "Financial year (Start November)"
+msgstr "Financial year (Start November)"
+
+msgid "Financial year (Start December)"
+msgstr "Financial year (Start December)"
+
 msgid "Today"
 msgstr "Today"
 
diff --git a/src/components/PeriodDimension/PeriodTransfer.js b/src/components/PeriodDimension/PeriodTransfer.js
@@ -1,7 +1,7 @@
 import { getNowInCalendar } from '@dhis2/multi-calendar-dates'
 import { IconInfo16, NoticeBox, TabBar, Tab, Transfer } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import React, { useEffect, useState, useMemo } from 'react'
+import React, { useRef, useState, useMemo } from 'react'
 import PeriodIcon from '../../assets/DimensionItemIcons/PeriodIcon.js' //TODO: Reimplement the icon.js
 import i18n from '../../locales/index.js'
 import {
@@ -137,9 +137,7 @@ const PeriodTransfer = ({
         reversePeriods: false,
     })
 
-    const [allPeriods, setAllPeriods] = useState(
-        defaultRelativePeriodType?.getPeriods() || []
-    )
+    const [userPeriods, setUserPeriods] = useState(null)
     const [isRelative, setIsRelative] = useState(true)
     const [relativeFilter, setRelativeFilter] = useState({
         periodType: defaultRelativePeriodType?.id || '',
@@ -149,32 +147,69 @@ const PeriodTransfer = ({
         year: defaultFixedPeriodYear.toString(),
     })
 
-    useEffect(() => {
-        if (!defaultRelativePeriodType) {
-            return
+    const effectiveRelativeFilterType = filteredRelativeOptions.some(
+        (opt) => opt.id === relativeFilter.periodType
+    )
+        ? relativeFilter.periodType
+        : defaultRelativePeriodType?.id || ''
+
+    const effectiveFixedFilterType = filteredFixedOptions.some(
+        (opt) => opt.id === fixedFilter.periodType
+    )
+        ? fixedFilter.periodType
+        : defaultFixedPeriodType?.id || ''
+
+    const prevEffectiveRelativeRef = useRef(effectiveRelativeFilterType)
+    const prevEffectiveFixedRef = useRef(effectiveFixedFilterType)
+
+    if (prevEffectiveRelativeRef.current !== effectiveRelativeFilterType) {
+        prevEffectiveRelativeRef.current = effectiveRelativeFilterType
+        if (relativeFilter.periodType !== effectiveRelativeFilterType) {
+            setRelativeFilter({ periodType: effectiveRelativeFilterType })
         }
-        setRelativeFilter({ periodType: defaultRelativePeriodType.id })
         if (isRelative) {
-            setAllPeriods(defaultRelativePeriodType.getPeriods())
+            setUserPeriods(null)
         }
-    }, [defaultRelativePeriodType]) // eslint-disable-line react-hooks/exhaustive-deps
+    }
 
-    useEffect(() => {
-        if (!defaultFixedPeriodType) {
-            return
+    if (prevEffectiveFixedRef.current !== effectiveFixedFilterType) {
+        prevEffectiveFixedRef.current = effectiveFixedFilterType
+        if (fixedFilter.periodType !== effectiveFixedFilterType) {
+            setFixedFilter((prev) => ({
+                ...prev,
+                periodType: effectiveFixedFilterType,
+            }))
         }
-        setFixedFilter((prev) => ({
-            ...prev,
-            periodType: defaultFixedPeriodType.id,
-        }))
         if (!isRelative) {
-            setAllPeriods(
-                defaultFixedPeriodType.getPeriods(
-                    fixedPeriodConfig(Number(fixedFilter.year))
-                ) || []
+            setUserPeriods(null)
+        }
+    }
+
+    const derivedPeriods = useMemo(() => {
+        if (isRelative) {
+            const opt = filteredRelativeOptions.find(
+                (o) => o.id === effectiveRelativeFilterType
+            )
+            return opt?.getPeriods() || []
+        } else {
+            const opt = filteredFixedOptions.find(
+                (o) => o.id === effectiveFixedFilterType
+            )
+            return (
+                opt?.getPeriods(fixedPeriodConfig(Number(fixedFilter.year))) ||
+                []
             )
         }
-    }, [defaultFixedPeriodType]) // eslint-disable-line react-hooks/exhaustive-deps
+    }, [
+        isRelative,
+        effectiveRelativeFilterType,
+        effectiveFixedFilterType,
+        filteredRelativeOptions,
+        filteredFixedOptions,
+        fixedFilter.year,
+    ])
+
+    const allPeriods = userPeriods !== null ? userPeriods : derivedPeriods
 
     const isActive = (value) => {
         const item = selectedItems.find((item) => item.id === value)
@@ -184,21 +219,7 @@ const PeriodTransfer = ({
     const onIsRelativeClick = (state) => {
         if (state !== isRelative) {
             setIsRelative(state)
-            if (state) {
-                const selectedOption = filteredRelativeOptions.find(
-                    (opt) => opt.id === relativeFilter.periodType
-                )
-                setAllPeriods(selectedOption?.getPeriods() || [])
-            } else {
-                const selectedOption = filteredFixedOptions.find(
-                    (opt) => opt.id === fixedFilter.periodType
-                )
-                setAllPeriods(
-                    selectedOption?.getPeriods(
-                        fixedPeriodConfig(Number(fixedFilter.year))
-                    ) || []
-                )
-            }
+            setUserPeriods(null)
         }
     }
 
@@ -233,20 +254,20 @@ const PeriodTransfer = ({
             <div className="filterContainer">
                 {isRelative ? (
                     <RelativePeriodFilter
-                        currentFilter={relativeFilter.periodType}
+                        currentFilter={effectiveRelativeFilterType}
                         onSelectFilter={(filter) => {
                             setRelativeFilter({ periodType: filter })
                             const selectedOption = filteredRelativeOptions.find(
                                 (opt) => opt.id === filter
                             )
-                            setAllPeriods(selectedOption?.getPeriods() || [])
+                            setUserPeriods(selectedOption?.getPeriods() || [])
                         }}
                         dataTest={`${dataTest}-relative-period-filter`}
                         availableOptions={filteredRelativeOptions}
                     />
                 ) : (
                     <FixedPeriodFilter
-                        currentPeriodType={fixedFilter.periodType}
+                        currentPeriodType={effectiveFixedFilterType}
                         currentYear={fixedFilter.year}
                         onSelectPeriodType={(periodType) => {
                             onSelectFixedPeriods({
@@ -276,7 +297,7 @@ const PeriodTransfer = ({
             const selectedOption = filteredFixedOptions.find(
                 (opt) => opt.id === filter.periodType
             )
-            setAllPeriods(
+            setUserPeriods(
                 selectedOption?.getPeriods(
                     fixedPeriodConfig(Number(filter.year))
                 ) || []
diff --git a/src/components/PeriodDimension/__tests__/fixedPeriods.spec.js b/src/components/PeriodDimension/__tests__/fixedPeriods.spec.js
@@ -31,10 +31,18 @@ describe('fixedPeriods utils', () => {
                 'SIXMONTHLY',
                 'SIXMONTHLYAPR',
                 'YEARLY',
-                'FYNOV',
-                'FYOCT',
-                'FYJUL',
+                'FYJAN',
+                'FYFEB',
+                'FYMAR',
                 'FYAPR',
+                'FYMAY',
+                'FYJUN',
+                'FYJUL',
+                'FYAUG',
+                'FYSEP',
+                'FYOCT',
+                'FYNOV',
+                'FYDEC',
             ])
         })
     })
diff --git a/src/components/PeriodDimension/__tests__/utils.spec.js b/src/components/PeriodDimension/__tests__/utils.spec.js
@@ -27,9 +27,17 @@ describe('utils', () => {
                 'SIXMONTHLY',
                 'SIXMONTHLYAPR',
                 'YEARLY',
-                'FYNOV',
-                'FYJUL',
+                'FYJAN',
+                'FYFEB',
+                'FYMAR',
                 'FYAPR',
+                'FYMAY',
+                'FYJUN',
+                'FYJUL',
+                'FYAUG',
+                'FYSEP',
+                'FYNOV',
+                'FYDEC',
             ])
         })
 
diff --git a/src/components/PeriodDimension/utils/enabledPeriodTypes.js b/src/components/PeriodDimension/utils/enabledPeriodTypes.js
@@ -2,38 +2,103 @@
 export const SERVER_PT_TO_MULTI_CALENDAR_PT = {
     Daily: 'DAILY',
     Weekly: 'WEEKLY',
+    WeeklyMonday: 'WEEKLYMON',
+    WeeklyTuesday: 'WEEKLYTUE',
     WeeklyWednesday: 'WEEKLYWED',
     WeeklyThursday: 'WEEKLYTHU',
+    WeeklyFriday: 'WEEKLYFRI',
     WeeklySaturday: 'WEEKLYSAT',
     WeeklySunday: 'WEEKLYSUN',
     BiWeekly: 'BIWEEKLY',
     Monthly: 'MONTHLY',
     BiMonthly: 'BIMONTHLY',
     Quarterly: 'QUARTERLY',
+    QuarterlyJan: 'QUARTERLYJAN',
+    QuarterlyFeb: 'QUARTERLYFEB',
+    QuarterlyMar: 'QUARTERLYMAR',
+    QuarterlyApr: 'QUARTERLYAPR',
+    QuarterlyMay: 'QUARTERLYMAY',
+    QuarterlyJun: 'QUARTERLYJUN',
+    QuarterlyJul: 'QUARTERLYJUL',
+    QuarterlyAug: 'QUARTERLYAUG',
+    QuarterlySep: 'QUARTERLYSEP',
+    QuarterlyOct: 'QUARTERLYOCT',
+    QuarterlyNov: 'QUARTERLYNOV',
+    QuarterlyDec: 'QUARTERLYDEC',
     SixMonthly: 'SIXMONTHLY',
+    SixMonthlyJan: 'SIXMONTHLYJAN',
+    SixMonthlyFeb: 'SIXMONTHLYFEB',
+    SixMonthlyMar: 'SIXMONTHLYMAR',
     SixMonthlyApril: 'SIXMONTHLYAPR',
+    SixMonthlyMay: 'SIXMONTHLYMAY',
+    SixMonthlyJun: 'SIXMONTHLYJUN',
+    SixMonthlyJul: 'SIXMONTHLYJUL',
+    SixMonthlyAug: 'SIXMONTHLYAUG',
+    SixMonthlySep: 'SIXMONTHLYSEP',
+    SixMonthlyOct: 'SIXMONTHLYOCT',
+    SixMonthlyNov: 'SIXMONTHLYNOV',
+    SixMonthlyDec: 'SIXMONTHLYDEC',
     Yearly: 'YEARLY',
+    FinancialJan: 'FYJAN',
+    FinancialFeb: 'FYFEB',
+    FinancialMar: 'FYMAR',
     FinancialApril: 'FYAPR',
+    FinancialMay: 'FYMAY',
+    FinancialJun: 'FYJUN',
     FinancialJuly: 'FYJUL',
+    FinancialAug: 'FYAUG',
+    FinancialSep: 'FYSEP',
     FinancialOct: 'FYOCT',
     FinancialNov: 'FYNOV',
+    FinancialDec: 'FYDEC',
 }
 
 // Mapping from relative period categories to their corresponding fixed period types
 export const RP_CATEGORY_TO_FP_DEPENDENCIES = {
     DAILY: ['Daily'],
     WEEKLY: [
         'Weekly',
+        'WeeklyMonday',
+        'WeeklyTuesday',
         'WeeklyWednesday',
         'WeeklyThursday',
+        'WeeklyFriday',
         'WeeklySaturday',
         'WeeklySunday',
     ],
     BIWEEKLY: ['BiWeekly'],
     MONTHLY: ['Monthly'],
     BIMONTHLY: ['BiMonthly'],
-    QUARTERLY: ['Quarterly'],
-    SIXMONTHLY: ['SixMonthly', 'SixMonthlyApril'],
+    QUARTERLY: [
+        'Quarterly',
+        'QuarterlyJan',
+        'QuarterlyFeb',
+        'QuarterlyMar',
+        'QuarterlyApr',
+        'QuarterlyMay',
+        'QuarterlyJun',
+        'QuarterlyJul',
+        'QuarterlyAug',
+        'QuarterlySep',
+        'QuarterlyOct',
+        'QuarterlyNov',
+        'QuarterlyDec',
+    ],
+    SIXMONTHLY: [
+        'SixMonthly',
+        'SixMonthlyJan',
+        'SixMonthlyFeb',
+        'SixMonthlyMar',
+        'SixMonthlyApril',
+        'SixMonthlyMay',
+        'SixMonthlyJun',
+        'SixMonthlyJul',
+        'SixMonthlyAug',
+        'SixMonthlySep',
+        'SixMonthlyOct',
+        'SixMonthlyNov',
+        'SixMonthlyDec',
+    ],
     YEARLY: ['Yearly'],
 }
 
diff --git a/src/components/PeriodDimension/utils/fixedPeriods.js b/src/components/PeriodDimension/utils/fixedPeriods.js
diff --git a/src/components/PeriodDimension/utils/index.js b/src/components/PeriodDimension/utils/index.js
