Merge pull request #1988 from IFRCGo/feature/local-unit-status-update

frozenhelium · web-flow · commit 226c9df2886f · 2025-09-16T15:01:26.000+05:45
Update status in local unit section
diff --git a/.changeset/blue-insects-show.md b/.changeset/blue-insects-show.md
@@ -0,0 +1,9 @@
+---
+"go-web-app": patch
+---
+
+Update local units UI
+
+  - Add icon for externally managed status
+  - Relocate status column in local units table
+  - Improve overall UI
diff --git a/app/src/utils/localUnits.ts b/app/src/utils/localUnits.ts
@@ -23,8 +23,6 @@ export function getFormFields(value: LocalUnitResponse | PartialLocalUnits) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         modified_by_details,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        is_locked,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         status,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         version_id,
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportModal/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportModal/index.tsx
@@ -89,13 +89,15 @@ function LocalUnitBulkUploadModal(props: Props) {
         || isLocalUnitRegionValidatorByType(countryResponse?.region, localUnitType);
 
     const { response: localUnitsOptions } = useRequest({ url: '/api/v2/local-units-options/' });
+
     const { response: bulkUploadHealthTemplate } = useRequest({
         url: '/api/v2/bulk-upload-local-unit/get-bulk-upload-template/',
-        pathVariables: { bulk_upload_template: 'health_care' },
+        query: { bulk_upload_template: 'health_care' },
     });
+
     const { response: bulkUploadDefaultTemplate } = useRequest({
         url: '/api/v2/bulk-upload-local-unit/get-bulk-upload-template/',
-        pathVariables: { bulk_upload_template: 'local_unit' },
+        query: { bulk_upload_template: 'local_unit' },
     });
 
     const {
@@ -181,7 +183,7 @@ function LocalUnitBulkUploadModal(props: Props) {
             onClose={onClose}
             headerDescriptionContainerClassName={styles.headerDescriptionContent}
             childrenContainerClassName={styles.bulkUploadContent}
-            headerDescription={importSummaryResponse?.status === BULK_UPLOAD_PENDING
+            headerDescription={!pending
                 ? strings.modalDescription
                 : strings.modalImportPendingDescription}
             contentViewType="vertical"
@@ -213,6 +215,10 @@ function LocalUnitBulkUploadModal(props: Props) {
                     error={permissionError}
                 />
             )}
+            <NonFieldError
+                className={styles.nonFieldError}
+                error={importSummaryResponse?.error_message}
+            />
             {isNotDefined(importSummaryResponse) && (
                 <Container
                     className={styles.uploadSummary}
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitStatus/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitStatus/index.tsx
@@ -2,11 +2,13 @@ import {
     CheckboxCircleLineIcon,
     CloseCircleLineIcon,
     EditCircleLineIcon,
+    LockLineIcon,
 } from '@ifrc-go/icons';
 import { Tooltip } from '@ifrc-go/ui';
 import { _cs } from '@togglecorp/fujs';
 
 import {
+    EXTERNALLY_MANAGED,
     PENDING_VALIDATION,
     UNVALIDATED,
     VALIDATED,
@@ -37,6 +39,7 @@ function LocalUnitStatus(props: LocalUnitStatusProps) {
                 value === VALIDATED && styles.validated,
                 value === UNVALIDATED && styles.unvalidated,
                 value === PENDING_VALIDATION && styles.pendingValidation,
+                value === EXTERNALLY_MANAGED && styles.externallyManaged,
                 className,
             )}
         >
@@ -55,6 +58,11 @@ function LocalUnitStatus(props: LocalUnitStatusProps) {
                     className={styles.icon}
                 />
             )}
+            {value === EXTERNALLY_MANAGED && (
+                <LockLineIcon
+                    className={styles.icon}
+                />
+            )}
             {!compact && valueDisplay}
             {compact && valueDisplay && (
                 <Tooltip
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitStatus/styles.module.css b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitStatus/styles.module.css
@@ -17,4 +17,8 @@
     &.pending-validation {
         color: var(--go-ui-color-blue);
     }
+
+    &.externally-managed {
+        color: var(--go-ui-color-gray-60);
+    }
 }
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/i18n.json b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/i18n.json
@@ -68,14 +68,14 @@
         "localUnitViewLocalUnitDeleteButtonLabel": "Delete",
         "localUnitViewDoneButtonLabel": "Done",
         "localUnitViewRevertButtonLabel": "Revert",
-        "localUnitViewReasonLabel": "Reason",
         "localUnitViewRevertChangesModalHeading": "Revert the Changes",
         "localUnitViewRevertChangesContentQuestion": "Are you sure you want to have these changes revert in this project?",
         "localUnitViewConfirmChangesModalHeading": "Confirm the Changes",
         "localUnitViewConfirmChangesContentQuestion": "Are you sure you want to have these changes in this local unit?",
         "localUnitViewNewLocalUnitDescription": "New local unit",
         "localUnitViewLatitude": "Latitude",
         "localUnitViewLongitude": "Longitude",
+        "localUnitViewUpdateReason": "Edit reason",
         "localUnitViewNoChanges": "No changes found"
     }
 }
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/index.tsx
@@ -33,6 +33,7 @@ import {
 } from '../LocalUnitsFormModal/LocalUnitsForm/schema';
 
 import i18n from './i18n.json';
+import styles from './styles.module.css';
 
 type VisibilityOptions = NonNullable<GoApiResponse<'/api/v2/global-enums/'>['api_visibility_choices']>[number]
 type LocalUnitResponse = NonNullable<GoApiResponse<'/api/v2/local-units/{id}/'>>;
@@ -104,6 +105,15 @@ function LocalUnitView(props: Props) {
             emptyMessage={strings.localUnitViewNoChanges}
             contentViewType="grid"
             numPreferredGridContentColumns={3}
+            withFooterBorder
+            footerContent={isDefined(newValue?.update_reason_overview) && (
+                <TextOutput
+                    valueClassName={styles.updateReasonText}
+                    strongLabel
+                    value={newValue?.update_reason_overview}
+                    label={strings.localUnitViewUpdateReason}
+                />
+            )}
         >
             <SelectDiffWrapper
                 showOnlyDiff
@@ -150,6 +160,7 @@ function LocalUnitView(props: Props) {
                     label={strings.localUnitViewLatitude}
                     value={newValue?.location_json?.lat}
                     valueType="number"
+                    maximumFractionDigits={10}
                 />
             </DiffWrapper>
             <DiffWrapper
@@ -163,6 +174,7 @@ function LocalUnitView(props: Props) {
                     label={strings.localUnitViewLongitude}
                     value={newValue?.location_json?.lng}
                     valueType="number"
+                    maximumFractionDigits={10}
                 />
             </DiffWrapper>
             <DiffWrapper
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/styles.module.css b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/styles.module.css
@@ -0,0 +1,3 @@
+.update-reason-text {
+    font-style: italic;
+}
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx
@@ -65,7 +65,9 @@ import {
 import { transformObjectError } from '#utils/restRequest/error';
 
 import {
+    EXTERNALLY_MANAGED,
     type ManageResponse,
+    UNVALIDATED,
     VALIDATED,
 } from '../../common';
 import FormGrid from '../../FormGrid';
@@ -219,8 +221,20 @@ function LocalUnitsForm(props: Props) {
         pathVariables: isDefined(localUnitId) ? { id: localUnitId } : undefined,
     });
 
+    const isLocked = (
+        isDefined(localUnitDetailsResponse?.status)
+        && !(localUnitDetailsResponse.status === VALIDATED)
+    );
+
+    const isNewLocalUnit = localUnitDetailsResponse?.status === UNVALIDATED;
+
+    const isExternallyManaged = (localUnitDetailsResponse?.status === EXTERNALLY_MANAGED
+        || (isDefined(value.type)
+            && isDefined(manageResponse)
+            && !!manageResponse[value.type]?.enabled));
+
     const readOnly = readOnlyFromProps
-        || localUnitDetailsResponse?.is_locked;
+        || isLocked || isExternallyManaged;
 
     const {
         response: localUnitsOptions,
@@ -322,22 +336,16 @@ function LocalUnitsForm(props: Props) {
         },
     });
 
-    const isExternallyManaged = useMemo(() => {
-        if (isDefined(value.type) && isDefined(manageResponse)) {
-            return manageResponse[value.type]?.enabled;
-        }
-        return false;
-    }, [value.type, manageResponse]);
-
     const hasValidatePermission = isAuthenticated
         && !isExternallyManaged
         && (isSuperUser
             || isLocalUnitGlobalValidatorByType(value.type)
             || isLocalUnitCountryValidatorByType(countryResponse?.id, value.type)
             || isLocalUnitRegionValidatorByType(countryResponse?.region, value.type));
 
-    const hasUpdatePermission = isCountryAdmin(countryResponse?.id)
-        || hasValidatePermission;
+    const hasUpdatePermission = (isCountryAdmin(countryResponse?.id)
+        || hasValidatePermission)
+        && !isExternallyManaged;
 
     const handleFormSubmit = useCallback(
         () => {
@@ -392,13 +400,15 @@ function LocalUnitsForm(props: Props) {
         localUnitPreviousResponse?.previous_data_details as unknown as LocalUnitResponse | undefined
     );
 
-    const showChanges = !localUnitDetailsResponse?.is_new_local_unit
-        && !!localUnitDetailsResponse?.is_locked
-        && isNotDefined(localUnitDetailsResponse.bulk_upload);
+    const showChanges = !isNewLocalUnit
+        && isLocked
+        && showValueChanges
+        && !isExternallyManaged;
 
-    const showViewChanges = !localUnitDetailsResponse?.is_new_local_unit
+    const showViewChanges = !isNewLocalUnit
         && isDefined(localUnitId)
-        && !(localUnitDetailsResponse?.status === VALIDATED);
+        && isLocked
+        && !isExternallyManaged;
 
     const permissionError = useMemo(() => {
         if (isExternallyManaged) {
@@ -446,9 +456,9 @@ function LocalUnitsForm(props: Props) {
 
     return (
         <div className={styles.localUnitsForm}>
-            {isDefined(actionsContainerRef.current) && (
+            {isDefined(actionsContainerRef.current) && environment !== 'production' && (
                 <Portal container={actionsContainerRef.current}>
-                    {isDefined(localUnitDetailsResponse) && environment !== 'production' && (
+                    {isDefined(localUnitDetailsResponse) && (
                         <>
                             {hasUpdatePermission && (
                                 <Button
@@ -467,7 +477,7 @@ function LocalUnitsForm(props: Props) {
                                 />
                             )}
                             {readOnlyFromProps
-                                && !localUnitDetailsResponse.is_locked
+                                && !isLocked
                                 && hasUpdatePermission && (
                                 <Button
                                     name={undefined}
@@ -541,7 +551,7 @@ function LocalUnitsForm(props: Props) {
                                 onChange={setFieldValue}
                                 keySelector={numericIdSelector}
                                 labelSelector={stringNameSelector}
-                                readOnly={readOnly}
+                                readOnly={readOnlyFromProps || isLocked}
                                 error={error?.type}
                                 nonClearable
                             />
@@ -1833,7 +1843,6 @@ function LocalUnitsForm(props: Props) {
                         value={updateReason}
                         onChange={setUpdateReason}
                     />
-
                 </LocalUnitViewModal>
             )}
             {showValidateLocalUnitModal
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
@@ -71,6 +71,7 @@ import {
 import type { FilterValue } from '../Filters';
 import LocalUnitsFormModal from '../LocalUnitsFormModal';
 import { TYPE_HEALTH_CARE } from '../LocalUnitsFormModal/LocalUnitsForm/schema';
+import LocalUnitStatus from '../LocalUnitStatus';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -467,6 +468,7 @@ function LocalUnitsMap(props: Props) {
                             popupClassName={styles.mapPopup}
                             coordinates={clickedPointProperties.center}
                             onCloseButtonClick={handlePointClose}
+                            headingContainerClassName={styles.headingDescription}
                             heading={(
                                 <Button
                                     name=""
@@ -477,6 +479,12 @@ function LocalUnitsMap(props: Props) {
                                     {localUnitName}
                                 </Button>
                             )}
+                            headingDescription={(
+                                <LocalUnitStatus
+                                    value={localUnitDetail?.status}
+                                    valueDisplay={localUnitDetail?.status_details}
+                                />
+                            )}
                             contentViewType="vertical"
                             pending={localUnitDetailPending}
                             errored={isDefined(localUnitDetailError)}
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/styles.module.css b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/styles.module.css
@@ -38,6 +38,10 @@
     }
 }
 
+.heading-description {
+    flex-direction: column;
+}
+
 .map-popup {
     height: 16rem;
 }
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx
@@ -1,6 +1,5 @@
 import {
     useCallback,
-    useMemo,
     useState,
 } from 'react';
 import { TableActions } from '@ifrc-go/ui';
@@ -11,11 +10,16 @@ import {
 import { isDefined } from '@togglecorp/fujs';
 
 import DropdownMenuItem from '#components/DropdownMenuItem';
+import { environment } from '#config';
 import useAuth from '#hooks/domain/useAuth';
 import useCountry from '#hooks/domain/useCountry';
 import usePermissions from '#hooks/domain/usePermissions';
 
-import { type ManageResponse } from '../../common';
+import {
+    EXTERNALLY_MANAGED,
+    type ManageResponse,
+    VALIDATED,
+} from '../../common';
 import LocalUnitDeleteModal from '../../LocalUnitDeleteModal';
 import LocalUnitsFormModal from '../../LocalUnitsFormModal';
 import LocalUnitValidateButton from '../../LocalUnitValidateButton';
@@ -33,7 +37,6 @@ export interface Props {
     onDeleteActionSuccess: () => void;
     onValidationActionSuccess: () => void;
     manageResponse: ManageResponse;
-    isLocked: boolean;
 }
 
 function LocalUnitsTableActions(props: Props) {
@@ -46,7 +49,6 @@ function LocalUnitsTableActions(props: Props) {
         isBulkUploadLocalUnit,
         onValidationActionSuccess,
         onDeleteActionSuccess,
-        isLocked,
         manageResponse,
     } = props;
 
@@ -64,12 +66,12 @@ function LocalUnitsTableActions(props: Props) {
         isGuestUser,
     } = usePermissions();
 
-    const isExternallyManaged = useMemo(() => {
-        if (isDefined(localUnitType) && isDefined(manageResponse)) {
-            return manageResponse[localUnitType]?.enabled;
-        }
-        return false;
-    }, [localUnitType, manageResponse]);
+    const isLocked = status !== VALIDATED;
+
+    const isExternallyManaged = status === EXTERNALLY_MANAGED
+        || (isDefined(localUnitType)
+            && isDefined(manageResponse)
+            && !!manageResponse[localUnitType]?.enabled);
 
     const hasPermission = isAuthenticated
         && !isExternallyManaged
@@ -153,7 +155,7 @@ function LocalUnitsTableActions(props: Props) {
         <>
             <TableActions
                 persistent
-                extraActions={(
+                extraActions={environment !== 'production' && (
                     <>
                         <DropdownMenuItem
                             type="button"
@@ -184,7 +186,7 @@ function LocalUnitsTableActions(props: Props) {
                     </>
                 )}
             >
-                {hasValidatePermission && (
+                {hasValidatePermission && (environment !== 'production') && (
                     <LocalUnitValidateButton
                         onClick={handleValidateLocalUnitClick}
                         status={status}
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/i18n.json b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/i18n.json
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/index.tsx
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/common.ts b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/common.ts
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/index.tsx
diff --git a/translationMigrations/000050-1758013961153.json b/translationMigrations/000050-1758013961153.json

Original file line number	Diff line number	Diff line change
`@@ -17,4 +17,8 @@`
`17`	`17`	`&.pending-validation {`
`18`	`18`	`color: var(--go-ui-color-blue);`
`19`	`19`	`}`
	`20`	`+`
	`21`	`+ &.externally-managed {`
	`22`	`+ color: var(--go-ui-color-gray-60);`
	`23`	`+ }`
`20`	`24`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.update-reason-text {`
	`2`	`+ font-style: italic;`
	`3`	`+}`