feat: use enabled period types

.gitignore

@@ -31,3 +31,4 @@ bundle.stats.json
 # DHIS2 Platform
 .d2
 src/locales
+CLAUDE.md

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: 2025-09-09T09:32:04.677Z\n"
-"PO-Revision-Date: 2025-09-09T09:32:04.678Z\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"
@@ -822,6 +822,16 @@ msgstr "Period"
 msgid "Selected Periods"
 msgstr "Selected Periods"
 
+msgid "No period types available"
+msgstr "No period types available"
+
+msgid ""
+"No period types are enabled in the system. Please contact your system "
+"administrator."
+msgstr ""
+"No period types are enabled in the system. Please contact your system "
+"administrator."
+
 msgid "Relative periods"
 msgstr "Relative periods"
 
@@ -870,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"
 

src/components/PeriodDimension/FixedPeriodFilter.js

@@ -3,24 +3,18 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../../locales/index.js'
 import styles from './styles/PeriodFilter.style.js'
-import { getFixedPeriodsOptions } from './utils/fixedPeriods.js'
-import { filterPeriodTypesById } from './utils/index.js'
-
-const EXCLUDED_PERIOD_TYPES_PROP_DEFAULT = []
 
 const FixedPeriodFilter = ({
-    allowedPeriodTypes,
-    excludedPeriodTypes = EXCLUDED_PERIOD_TYPES_PROP_DEFAULT,
+    availableOptions,
     currentPeriodType,
     currentYear,
     onSelectPeriodType,
     onSelectYear,
     dataTest,
 }) => {
     const onlyAllowedTypeIsSelected =
-        Array.isArray(allowedPeriodTypes) &&
-        allowedPeriodTypes.length === 1 &&
-        allowedPeriodTypes[0] === currentPeriodType
+        availableOptions.length === 1 &&
+        availableOptions[0].id === currentPeriodType
 
     return (
         <>
@@ -34,17 +28,7 @@ const FixedPeriodFilter = ({
                     className="filterElement"
                     dataTest={`${dataTest}-period-type`}
                 >
-                    {(allowedPeriodTypes
-                        ? getFixedPeriodsOptions().filter((option) =>
-                              allowedPeriodTypes.some(
-                                  (type) => type === option.id
-                              )
-                          )
-                        : filterPeriodTypesById(
-                              getFixedPeriodsOptions(),
-                              excludedPeriodTypes
-                          )
-                    ).map((option) => (
+                    {availableOptions.map((option) => (
                         <SingleSelectOption
                             key={option.id}
                             value={option.id}
@@ -72,13 +56,12 @@ const FixedPeriodFilter = ({
 }
 
 FixedPeriodFilter.propTypes = {
+    availableOptions: PropTypes.array.isRequired,
     currentPeriodType: PropTypes.string.isRequired,
     currentYear: PropTypes.string.isRequired,
     onSelectPeriodType: PropTypes.func.isRequired,
     onSelectYear: PropTypes.func.isRequired,
-    allowedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
     dataTest: PropTypes.string,
-    excludedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
 }
 
 export default FixedPeriodFilter

src/components/PeriodDimension/FixedPeriodSelect.js

@@ -7,6 +7,7 @@ import styles from './styles/FixedPeriodSelect.style.js'
 import {
     parsePeriodCode,
     getFixedPeriodsOptionsById as getPeriodById,
+    getFixedPeriodsOptions,
     getYearOffsetFromNow,
 } from './utils/fixedPeriods.js'
 
@@ -63,14 +64,21 @@ class FixedPeriodSelect extends Component {
     }
 
     render() {
+        const allOptions = getFixedPeriodsOptions()
+        const availableOptions = this.props.allowedPeriodTypes
+            ? allOptions.filter((option) =>
+                  this.props.allowedPeriodTypes.includes(option.id)
+              )
+            : allOptions
+
         return (
             <div
                 data-test={this.props.dataTest}
                 className={this.props.className}
             >
                 <div className="row">
                     <FixedPeriodFilter
-                        allowedPeriodTypes={this.props.allowedPeriodTypes}
+                        availableOptions={availableOptions}
                         currentPeriodType={this.state.periodType}
                         currentYear={this.state.year}
                         onSelectPeriodType={this.onSelectPeriodType}

src/components/PeriodDimension/PeriodDimension.js

@@ -1,8 +1,9 @@
 import { useConfig, useDataQuery } from '@dhis2/app-runtime'
 import PropTypes from 'prop-types'
-import React from 'react'
 import { DIMENSION_ID_PERIOD } from '../../modules/predefinedDimensions.js'
 import PeriodTransfer from './PeriodTransfer.js'
+import { useDataOutputPeriodTypes } from './useDataOutputPeriodTypes.js'
+import { applyPeriodNameOverrides } from './utils/enabledPeriodTypes.js'
 
 const userSettingsQuery = {
     userSettings: {
@@ -23,11 +24,16 @@
     infoBoxMessage,
     height,
 }) => {
-    const { systemInfo } = useConfig()
-    const result = useDataQuery(userSettingsQuery)
+    const config = useConfig()
+    const { systemInfo } = config
+    const userSettingsResult = useDataQuery(userSettingsQuery)
+
+    const { supportsEnabledPeriodTypes, enabledPeriodTypesData } =
+        useDataOutputPeriodTypes()
 
     const { calendar = 'gregory' } = systemInfo
-    const { data: { userSettings: { keyUiLocale: locale } = {} } = {} } = result
+    const { data: { userSettings: { keyUiLocale: locale } = {} } = {} } =
+        userSettingsResult
 
     const periodsSettings = { calendar, locale }
 
@@ -37,16 +43,24 @@
             items: periods,
         })
     }
+
+    const selectedPeriodsWithCustomDisplayNames = applyPeriodNameOverrides(
+        selectedPeriods,
+        enabledPeriodTypesData?.metaData
+    )
+
     return (
         <PeriodTransfer
             onSelect={selectPeriods}
-            selectedItems={selectedPeriods}
+            selectedItems={selectedPeriodsWithCustomDisplayNames}
             infoBoxMessage={infoBoxMessage}
             rightFooter={rightFooter}
             dataTest={'period-dimension'}
             excludedPeriodTypes={excludedPeriodTypes}
             periodsSettings={periodsSettings}
             height={height}
+            enabledPeriodTypesData={enabledPeriodTypesData}
+            supportsEnabledPeriodTypes={supportsEnabledPeriodTypes}
         />
     )
 }