Show latest form values changes for local unit validation

app/src/components/domain/BaseMapPointInput/index.tsx

@@ -56,6 +56,10 @@ interface Props<NAME> extends BaseMapProps {
     readOnly?: boolean;
     required?: boolean;
     error?: ObjectError<Value>;
+    baseMapFormFieldsChanges: {
+        lat: boolean | undefined;
+        lng: boolean | undefined;
+    } | undefined;
 }
 
 function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
@@ -74,6 +78,7 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
         country,
         required,
         error,
+        baseMapFormFieldsChanges,
         ...otherProps
     } = props;
 
@@ -183,6 +188,10 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
         <div className={_cs(styles.baseMapPointInput, className)}>
             <div className={styles.locationInputs}>
                 <NumberInput
+                    inputSectionClassName={_cs(
+                        baseMapFormFieldsChanges?.lat
+                            && styles.changes,
+                    )}
                     className={styles.input}
                     name="lat"
                     label={strings.latitude}
@@ -193,6 +202,10 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
                     required={required}
                 />
                 <NumberInput
+                    inputSectionClassName={_cs(
+                        baseMapFormFieldsChanges?.lng
+                            && styles.changes,
+                    )}
                     className={styles.input}
                     name="lng"
                     label={strings.longitude}

app/src/components/domain/BaseMapPointInput/styles.module.css

@@ -3,6 +3,10 @@
     flex-direction: column;
     gap: var(--go-ui-spacing-md);
 
+    .changes {
+        background-color: var(--go-ui-color-semantic-yellow) !important;
+    }
+
     .location-inputs {
         display: flex;
         gap: var(--go-ui-spacing-sm);

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/styles.module.css

@@ -3,6 +3,11 @@
         background-color: var(--go-ui-color-background);
         height: 32rem;
     }
+
+}
+
+.changes {
+    background-color: var(--go-ui-color-semantic-yellow) !important;
 }
 
 /* NOTE: this element is portaled */

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx

@@ -6,17 +6,22 @@ import { Modal } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { isDefined } from '@togglecorp/fujs';
 
+import { GoApiResponse } from '#utils/restRequest';
+
 import LocalUnitsForm from './LocalUnitsForm';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
+type LocalUnitResponse = GoApiResponse<'/api/v2/local-units/{id}/'>;
+
 interface Props {
     localUnitId?: number;
     readOnly?: boolean;
     setReadOnly?: React.Dispatch<React.SetStateAction<boolean>>;
     onClose: (requestDone?: boolean) => void;
     onDeleteActionSuccess?: () => void;
+    previousData?: LocalUnitResponse;
 }
 
 function LocalUnitsFormModal(props: Props) {
@@ -26,6 +31,7 @@ function LocalUnitsFormModal(props: Props) {
         readOnly,
         setReadOnly,
         onDeleteActionSuccess,
+        previousData,
     } = props;
 
     const strings = useTranslation(i18n);
@@ -77,6 +83,7 @@ function LocalUnitsFormModal(props: Props) {
                 headingDescriptionRef={headingDescriptionRef}
                 headerDescriptionRef={headerDescriptionRef}
                 onDeleteActionSuccess={onDeleteActionSuccess}
+                previousData={previousData}
             />
         </Modal>
     );

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx

@@ -57,8 +57,10 @@ import {
 import { localUnitMapStyle } from '#utils/map';
 import { type CountryOutletContext } from '#utils/outletContext';
 import {
-    GoApiResponse,
-    GoApiUrlQuery,
+    type GoApiBody,
+    type GoApiResponse,
+    type GoApiUrlQuery,
+    useLazyRequest,
     useRequest,
 } from '#utils/restRequest';
 
@@ -74,6 +76,9 @@ import { TYPE_HEALTH_CARE } from '../LocalUnitsFormModal/LocalUnitsForm/schema';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
+type LocalUnitResponse = GoApiResponse<'/api/v2/local-units/{id}/'>;
+type LocalUnitLatestChangesBody = GoApiBody<'/api/v2/local-units/{id}/latest-change-request/', 'POST'>
+
 const LOCAL_UNIT_ICON_KEY = 'local-units';
 const HEALTHCARE_ICON_KEY = 'healthcare';
 
@@ -253,6 +258,18 @@ function LocalUnitsMap(props: Props) {
         }) : undefined,
     });
 
+    const {
+        response: previousData,
+        trigger: latestChanges,
+    } = useLazyRequest({
+        url: '/api/v2/local-units/{id}/latest-change-request/',
+        method: 'POST',
+        pathVariables: isDefined(clickedPointProperties) ? ({
+            id: clickedPointProperties.localUnitId,
+        }) : undefined,
+        body: (ctx: LocalUnitLatestChangesBody) => ctx,
+    });
+
     const localUnitDetail = requestType !== AUTHENTICATED
         ? publicLocalUnitDetailResponse
         : superLocalUnitDetailResponse;
@@ -318,10 +335,11 @@ function LocalUnitsMap(props: Props) {
 
     const handleLocalUnitHeadingClick = useCallback(
         () => {
+            latestChanges(clickedPointProperties?.localUnitId as never);
             setReadOnlyLocalUnitModal(true);
             setShowLocalUnitViewModalTrue();
         },
-        [setShowLocalUnitViewModalTrue],
+        [setShowLocalUnitViewModalTrue, latestChanges, clickedPointProperties?.localUnitId],
     );
 
     const handleLocalUnitsFormModalClose = useCallback(
@@ -585,6 +603,9 @@ function LocalUnitsMap(props: Props) {
                     readOnly={readOnlyLocalUnitModal}
                     setReadOnly={setReadOnlyLocalUnitModal}
                     onDeleteActionSuccess={refetchLocalUnits}
+                    previousData={
+                        previousData?.previous_data_details as unknown as LocalUnitResponse
+                    }
                 />
             ))}
         </Container>

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx

@@ -16,13 +16,21 @@ import { environment } from '#config';
 import useAuth from '#hooks/domain/useAuth';
 import useCountry from '#hooks/domain/useCountry';
 import usePermissions from '#hooks/domain/usePermissions';
+import {
+    type GoApiBody,
+    type GoApiResponse,
+    useLazyRequest,
+} from '#utils/restRequest';
 
 import LocalUnitDeleteModal from '../../LocalUnitDeleteModal';
 import LocalUnitsFormModal from '../../LocalUnitsFormModal';
 import LocalUnitValidateButton from '../../LocalUnitValidateButton';
 
 import i18n from './i18n.json';
 
+type LocalUnitLatestChangesBody = GoApiBody<'/api/v2/local-units/{id}/latest-change-request/', 'POST'>
+type LocalUnitResponse = GoApiResponse<'/api/v2/local-units/{id}/'>;
+
 export interface Props {
     countryId: number;
     localUnitName: string;
@@ -63,6 +71,16 @@ function LocalUnitsTableActions(props: Props) {
 
     const hasDeletePermission = isAuthenticated && !isGuestUser;
 
+    const {
+        response: previousData,
+        trigger: latestChanges,
+    } = useLazyRequest({
+        url: '/api/v2/local-units/{id}/latest-change-request/',
+        method: 'POST',
+        pathVariables: { id: localUnitId },
+        body: (ctx: LocalUnitLatestChangesBody) => ctx,
+    });
+
     const [readOnlyLocalUnitModal, setReadOnlyLocalUnitModal] = useState(false);
 
     const [
@@ -91,21 +109,22 @@ function LocalUnitsTableActions(props: Props) {
         },
         [setShowLocalUnitModalFalse, onDeleteActionSuccess],
     );
-
     const handleViewLocalUnitClick = useCallback(
         () => {
+            latestChanges(localUnitId as never);
             setReadOnlyLocalUnitModal(true);
             setShowLocalUnitModalTrue();
         },
-        [setShowLocalUnitModalTrue],
+        [setShowLocalUnitModalTrue, latestChanges, localUnitId],
     );
 
     const handleEditLocalUnitClick = useCallback(
         () => {
+            latestChanges(localUnitId as never);
             setReadOnlyLocalUnitModal(false);
             setShowLocalUnitModalTrue();
         },
-        [setShowLocalUnitModalTrue],
+        [setShowLocalUnitModalTrue, latestChanges, localUnitId],
     );
 
     return (
@@ -170,6 +189,9 @@ function LocalUnitsTableActions(props: Props) {
                     readOnly={readOnlyLocalUnitModal}
                     setReadOnly={setReadOnlyLocalUnitModal}
                     onDeleteActionSuccess={onDeleteActionSuccess}
+                    previousData={
+                        previousData?.previous_data_details as unknown as LocalUnitResponse
+                    }
                 />
             )}
             {showDeleteLocalUnitModal && (

packages/ui/src/index.css

@@ -128,6 +128,7 @@
     --go-ui-color-blue: #3FA2F7;
     --go-ui-color-red: #F75C65;
     --go-ui-color-yellow: #d9b100;
+    --go-ui-color-semantic-yellow: #FFB443;
     --go-ui-color-black: #000000;
     --go-ui-color-white: #ffffff;