fix buttons and status

src/frontend/src/components/targeting/TargetPopulationDetails.tsx

@@ -1,6 +1,9 @@
 import { Grid, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { paymentPlanStatusToColor } from '@utils/utils';
+import {
+  paymentPlanStatusToColor,
+  targetPopulationStatusDisplayMap,
+} from '@utils/utils';
 import { ContainerColumnWithBorder } from '@core/ContainerColumnWithBorder';
 import { LabelizedField } from '@core/LabelizedField';
 import { OverviewContainer } from '@core/OverviewContainer';
@@ -46,6 +49,7 @@ export function TargetPopulationDetails({
                 dataCy="target-population-status"
                 status={targetPopulation.status}
                 statusToColor={paymentPlanStatusToColor}
+                statusNameMapping={targetPopulationStatusDisplayMap}
               />
             </LabelizedField>
           </Grid>

src/frontend/src/components/targeting/TargetPopulationTableFilters.tsx

@@ -2,11 +2,11 @@ import { Grid, MenuItem } from '@mui/material';
 import { Group, Person } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { PaymentPlanStatus } from '@generated/graphql';
 import {
-  createHandleApplyFilterChange,
-  paymentPlanStatusMapping,
-} from '@utils/utils';
+  PaymentPlanStatus,
+  usePaymentPlanStatusChoicesQueryQuery,
+} from '@generated/graphql';
+import { createHandleApplyFilterChange } from '@utils/utils';
 import { DatePickerFilter } from '@core/DatePickerFilter';
 import { NumberTextField } from '@core/NumberTextField';
 import { SearchTextField } from '@core/SearchTextField';
@@ -32,7 +32,6 @@ export const TargetPopulationTableFilters = ({
   const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();
-  const isAccountability = location.pathname.includes('accountability');
   const { selectedProgram } = useProgramContext();
   const beneficiaryGroup = selectedProgram?.beneficiaryGroup;
 
@@ -54,9 +53,18 @@ export const TargetPopulationTableFilters = ({
     clearFilter();
   };
 
-  const preparedStatusChoices = isAccountability
-    ? Object.values(PaymentPlanStatus).filter((key) => key !== 'OPEN')
-    : Object.values(PaymentPlanStatus);
+  const allowedStatusChoices = [
+    PaymentPlanStatus.TpOpen,
+    PaymentPlanStatus.TpLocked,
+    PaymentPlanStatus.Finished,
+  ];
+
+  const { data: statusChoicesData } = usePaymentPlanStatusChoicesQueryQuery();
+
+  const preparedStatusChoices =
+    statusChoicesData?.paymentPlanStatusChoices?.filter((el) =>
+      allowedStatusChoices.includes(el.value as PaymentPlanStatus),
+    ) || [];
 
   return (
     <FiltersSection
@@ -82,9 +90,9 @@ export const TargetPopulationTableFilters = ({
             fullWidth
             data-cy="filters-status"
           >
-            {preparedStatusChoices.sort().map((key) => (
-              <MenuItem key={key} value={key}>
-                {paymentPlanStatusMapping(key)}
+            {preparedStatusChoices.map((item) => (
+              <MenuItem key={item.value} value={item.value}>
+                {item.name}
               </MenuItem>
             ))}
           </SelectFilter>

src/frontend/src/containers/pages/headers/TargetPopulationPageHeader.tsx

@@ -30,7 +30,7 @@ const StatusWrapper = styled.div`
   flex-direction: row;
 `;
 
-export interface ProgramDetailsPageHeaderPropTypes {
+export interface TargetPopulationPageHeaderProps {
   paymentPlan;
   canEdit: boolean;
   canRemove: boolean;
@@ -48,7 +48,7 @@ export function TargetPopulationPageHeader({
   canLock,
   canUnlock,
   canSend,
-}: ProgramDetailsPageHeaderPropTypes): ReactElement {
+}: TargetPopulationPageHeaderProps): ReactElement {
   const { t } = useTranslation();
   const { baseUrl, businessArea } = useBaseUrl();
   const { data: businessAreaData, loading: businessAreaDataLoading } =
@@ -68,7 +68,7 @@ export function TargetPopulationPageHeader({
   let buttons;
 
   switch (paymentPlan.status) {
-    case PaymentPlanStatus.Open:
+    case PaymentPlanStatus.TpOpen:
       buttons = (
         <OpenTargetPopulationHeaderButtons
           targetPopulation={paymentPlan}
@@ -79,7 +79,7 @@ export function TargetPopulationPageHeader({
         />
       );
       break;
-    case PaymentPlanStatus.Locked:
+    case PaymentPlanStatus.TpLocked:
     case PaymentPlanStatus.SteficonCompleted:
     case PaymentPlanStatus.SteficonError:
     case PaymentPlanStatus.SteficonRun:

src/frontend/src/containers/tables/targeting/TargetPopulationTable/TargetPopulationTableRow.tsx

@@ -5,7 +5,10 @@ import { BlackLink } from '@components/core/BlackLink';
 import { StatusBox } from '@components/core/StatusBox';
 import { ClickableTableRow } from '@components/core/Table/ClickableTableRow';
 import { UniversalMoment } from '@components/core/UniversalMoment';
-import { paymentPlanStatusToColor } from '@utils/utils';
+import {
+  paymentPlanStatusToColor,
+  targetPopulationStatusDisplayMap,
+} from '@utils/utils';
 import { PaymentPlanNode } from '@generated/graphql';
 import { useBaseUrl } from '@hooks/useBaseUrl';
 import { ReactElement } from 'react';
@@ -67,6 +70,7 @@ export function TargetPopulationTableRow({
         <StatusBox
           status={targetPopulation.status}
           statusToColor={paymentPlanStatusToColor}
+          statusNameMapping={targetPopulationStatusDisplayMap}
         />
       </TableCell>
       <TableCell align="left">

src/frontend/src/utils/utils.ts

@@ -190,6 +190,20 @@ export function paymentStatusDisplayMap(status: string): string {
       return 'UNSUCCESSFUL';
   }
 }
+
+export function targetPopulationStatusDisplayMap(status: string): string {
+  switch (status) {
+    case PaymentPlanStatus.TpOpen:
+      return 'OPEN';
+    case PaymentPlanStatus.TpLocked:
+      return 'LOCKED';
+    case PaymentPlanStatus.Finished:
+      return 'FINISHED';
+    default:
+      return 'UNKNOWN STATUS';
+  }
+}
+
 export function paymentVerificationStatusToColor(
   theme: typeof themeObj,
   status: string,