From 290ab71b1160ac0d761816fb71108c680ff84912 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Tue, 28 Jan 2025 00:56:04 -0500
Subject: [PATCH 01/38] 4206 - Data History - Authorizer
 canViewHistoryLastApproved (#4275)

* 4206 - Add Authorizer canViewHistoryLastApproved

* 4206 - Add missing nullish check
---
 src/client/store/user/hooks/index.ts |  9 ++++++++
 src/meta/user/authorizer/index.ts    | 32 ++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/src/client/store/user/hooks/index.ts b/src/client/store/user/hooks/index.ts
index d330e279ce..8b5d068b1f 100644
--- a/src/client/store/user/hooks/index.ts
+++ b/src/client/store/user/hooks/index.ts
@@ -111,6 +111,15 @@ export const useCanViewHistory = (): boolean => {
   return Authorizer.canViewHistory({ country, cycle, section, user })
 }
 
+export const useCanViewHistoryLastApproved = (): boolean => {
+  const user = useUser()
+  const section = useSection()
+  const country = useAssessmentCountry()
+  const cycle = useCycle()
+
+  return Authorizer.canViewHistoryLastApproved({ country, cycle, section, user })
+}
+
 export const useCanViewGeo = (): boolean => {
   const cycle = useCycle()
   const { countryIso } = useCountryRouteParams()
diff --git a/src/meta/user/authorizer/index.ts b/src/meta/user/authorizer/index.ts
index 6dd649fc9f..bc99a4dbc8 100644
--- a/src/meta/user/authorizer/index.ts
+++ b/src/meta/user/authorizer/index.ts
@@ -215,6 +215,37 @@ const canViewHistory = (props: {
   return Users.isReviewer(user, country.countryIso, cycle) && canEditCycleData(props)
 }
 
+/**
+ * canViewHistoryLastApproved
+ * Viewer or non loggedin user: never
+ * Administrator: if status >=review
+ * NationalCorrespondant and AlternateNationalCorrespondant: never
+ * Collaborator: never
+ * Reviewer: if country status = review
+ * @param props
+ * @param props.country
+ * @param props.cycle
+ * @param props.section
+ * @param props.user
+ * @returns boolean
+ */
+const canViewHistoryLastApproved = (props: {
+  country: Country
+  cycle: Cycle
+  section: Section | SubSection
+  user: User
+}): boolean => {
+  const { country, cycle, user } = props
+  const { status } = country?.props ?? {}
+
+  if (Users.isReviewer(user, country?.countryIso, cycle) && status === AssessmentStatus.review) return true
+
+  return (
+    Users.isAdministrator(user) &&
+    [AssessmentStatus.review, AssessmentStatus.approval, AssessmentStatus.accepted].includes(status)
+  )
+}
+
 export const canViewGeo = (props: { cycle: Cycle; countryIso: AreaCode; user: User }): boolean =>
   Users.hasRoleInCountry(props)
 
@@ -226,6 +257,7 @@ export const Authorizer = {
   canView,
   canViewGeo,
   canViewHistory,
+  canViewHistoryLastApproved,
   canViewRepositoryItem,
   canViewReview,
   // user

From 37ab7e4749c0aeaa5825949324793dd648a05034 Mon Sep 17 00:00:00 2001
From: Mino Togna <minotogna@users.noreply.github.com>
Date: Tue, 28 Jan 2025 08:29:14 +0100
Subject: [PATCH 02/38] 4248: Data History: Toolbar -> History Button (#4276)

---
 .../Toolbar/ButtonHistory/ButtonHistory.scss  | 17 +++++++
 .../Toolbar/ButtonHistory/ButtonHistory.tsx   | 46 +++++++++++++++++
 .../PageLayout/Toolbar/ButtonHistory/index.ts |  1 +
 .../Toolbar/EditorOptions/EditorOptions.scss  |  9 +---
 .../Toolbar/EditorOptions/EditorOptions.tsx   | 15 ++++--
 .../PageLayout/Toolbar/Lock/Lock.tsx          | 19 ++++---
 .../TablePaginated/hooks/useFetchData.tsx     | 50 +++++++++----------
 .../hooks/useHistoryLastApprovedIsActive.ts   |  6 +++
 src/client/store/data/index.ts                |  1 +
 .../reducers/toggleHistoryLastApproved.ts     | 13 +++++
 src/client/store/data/selectors/index.ts      |  8 +++
 src/client/store/data/slice.ts                |  7 ++-
 src/client/store/data/state.ts                |  1 +
 src/client/store/user/hooks/index.ts          |  3 +-
 src/meta/user/authorizer/index.ts             | 17 ++-----
 15 files changed, 156 insertions(+), 57 deletions(-)
 create mode 100644 src/client/components/PageLayout/Toolbar/ButtonHistory/ButtonHistory.scss
 create mode 100644 src/client/components/PageLayout/Toolbar/ButtonHistory/ButtonHistory.tsx
 create mode 100644 src/client/components/PageLayout/Toolbar/ButtonHistory/index.ts
 create mode 100644 src/client/store/data/hooks/useHistoryLastApprovedIsActive.ts
 create mode 100644 src/client/store/data/reducers/toggleHistoryLastApproved.ts

diff --git a/src/client/components/PageLayout/Toolbar/ButtonHistory/ButtonHistory.scss b/src/client/components/PageLayout/Toolbar/ButtonHistory/ButtonHistory.scss
new file mode 100644
index 0000000000..1461292bf2
--- /dev/null
+++ b/src/client/components/PageLayout/Toolbar/ButtonHistory/ButtonHistory.scss
@@ -0,0 +1,17 @@
+@import 'src/client/style/partials';
+
+button.btn-history-last-approved {
+  height: $spacing-m;
+  padding: unset;
+  width: $spacing-l;
+  justify-content: center;
+
+  svg {
+    height: 18px;
+    width: 18px;
+  }
+
+  &.inverse {
+    background-color: transparent;
+  }
+}
diff --git a/src/client/components/PageLayout/Toolbar/ButtonHistory/ButtonHistory.tsx b/src/client/components/PageLayout/Toolbar/ButtonHistory/ButtonHistory.tsx
new file mode 100644
index 0000000000..b8edac1559
--- /dev/null
+++ b/src/client/components/PageLayout/Toolbar/ButtonHistory/ButtonHistory.tsx
@@ -0,0 +1,46 @@
+import './ButtonHistory.scss'
+import React, { useCallback } from 'react'
+import MediaQuery from 'react-responsive'
+
+import { useAppDispatch } from 'client/store'
+import { DataActions, useHistoryLastApprovedIsActive } from 'client/store/data'
+import { DataLockActions, useIsDataLocked } from 'client/store/ui/dataLock'
+import { useOnUpdate } from 'client/hooks'
+import { useCountryRouteParams } from 'client/hooks/useRouteParams'
+import Button, { ButtonSize, ButtonType } from 'client/components/Buttons/Button'
+import { Breakpoints } from 'client/utils'
+
+const ButtonHistory: React.FC = () => {
+  const { countryIso } = useCountryRouteParams()
+  const dispatch = useAppDispatch()
+  const locked = useIsDataLocked()
+  const historyActive = useHistoryLastApprovedIsActive()
+
+  const toggleHistory = useCallback(() => {
+    // if activating historyLastApproved and data edit is unlocked -> lock data edit
+    if (!historyActive && !locked) {
+      dispatch(DataLockActions.toggleDataLock())
+    }
+    dispatch(DataActions.toggleHistoryLastApproved())
+  }, [dispatch, historyActive, locked])
+
+  // if navigating to a different country, close history lastApproved
+  useOnUpdate(() => {
+    dispatch(DataActions.toggleHistoryLastApproved(false))
+  }, [countryIso])
+
+  return (
+    <MediaQuery minWidth={Breakpoints.laptop}>
+      <Button
+        className="btn-history-last-approved"
+        iconName="history"
+        inverse={!historyActive}
+        onClick={() => toggleHistory()}
+        size={ButtonSize.m}
+        type={ButtonType.black}
+      />
+    </MediaQuery>
+  )
+}
+
+export default ButtonHistory
diff --git a/src/client/components/PageLayout/Toolbar/ButtonHistory/index.ts b/src/client/components/PageLayout/Toolbar/ButtonHistory/index.ts
new file mode 100644
index 0000000000..95114d227a
--- /dev/null
+++ b/src/client/components/PageLayout/Toolbar/ButtonHistory/index.ts
@@ -0,0 +1 @@
+export { default } from './ButtonHistory'
diff --git a/src/client/components/PageLayout/Toolbar/EditorOptions/EditorOptions.scss b/src/client/components/PageLayout/Toolbar/EditorOptions/EditorOptions.scss
index ec6c8e66cd..dbcc1bcbc5 100644
--- a/src/client/components/PageLayout/Toolbar/EditorOptions/EditorOptions.scss
+++ b/src/client/components/PageLayout/Toolbar/EditorOptions/EditorOptions.scss
@@ -3,15 +3,10 @@
 .toolbar-editor {
   align-items: center;
   border: 1px dashed lighten($ui-edit-border-color, 15%);
-  display: grid;
-  grid-column-gap: $spacing-xs;
-  grid-template-columns: repeat(3, auto);
+  display: flex;
+  column-gap: $spacing-xs;
   height: calc(100% + 2px);
   padding: 0 $spacing-xs;
-
-  &.reviewer {
-    grid-template-columns: repeat(5, auto);
-  }
 }
 
 .toolbar-editor__github {
diff --git a/src/client/components/PageLayout/Toolbar/EditorOptions/EditorOptions.tsx b/src/client/components/PageLayout/Toolbar/EditorOptions/EditorOptions.tsx
index f861ac604e..9ccbe20c33 100644
--- a/src/client/components/PageLayout/Toolbar/EditorOptions/EditorOptions.tsx
+++ b/src/client/components/PageLayout/Toolbar/EditorOptions/EditorOptions.tsx
@@ -2,13 +2,13 @@ import './EditorOptions.scss'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import classNames from 'classnames'
-
 import { Users } from 'meta/user'
 
 import { useCycle } from 'client/store/assessment'
 import { useUser } from 'client/store/user'
+import { useCanViewHistoryLastApproved } from 'client/store/user/hooks'
 import Icon from 'client/components/Icon'
+import ButtonHistory from 'client/components/PageLayout/Toolbar/ButtonHistory'
 import Lock from 'client/components/PageLayout/Toolbar/Lock'
 import Status from 'client/components/PageLayout/Toolbar/Status'
 
@@ -16,14 +16,23 @@ const EditorOptions: React.FC = () => {
   const { t } = useTranslation()
   const cycle = useCycle()
   const user = useUser()
+  const canViewHistory = useCanViewHistoryLastApproved()
+
   const reviewer = Users.isAReviewer(user, cycle) || Users.isAdministrator(user)
 
   return (
-    <div className={classNames('toolbar-editor', { reviewer })}>
+    <div className="toolbar-editor">
       <Lock />
       <div className="toolbar__separator" />
       <Status />
 
+      {canViewHistory && (
+        <>
+          <div className="toolbar__separator" />
+          <ButtonHistory />
+        </>
+      )}
+
       {reviewer && (
         <>
           <div className="toolbar__separator" />
diff --git a/src/client/components/PageLayout/Toolbar/Lock/Lock.tsx b/src/client/components/PageLayout/Toolbar/Lock/Lock.tsx
index 9ff73e0da8..a2763d1859 100644
--- a/src/client/components/PageLayout/Toolbar/Lock/Lock.tsx
+++ b/src/client/components/PageLayout/Toolbar/Lock/Lock.tsx
@@ -5,7 +5,7 @@ import MediaQuery from 'react-responsive'
 import classNames from 'classnames'
 
 import { useAppDispatch } from 'client/store'
-import { useHistoryActivitiesIsActive } from 'client/store/data'
+import { DataActions, useHistoryActivitiesIsActive, useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useShowOriginalDatapoints } from 'client/store/ui/assessmentSection'
 import { DataLockActions, useIsDataLocked } from 'client/store/ui/dataLock'
 import { useCanEditCycleData } from 'client/store/user'
@@ -18,24 +18,31 @@ const Lock: React.FC = () => {
   const canEditCycleData = useCanEditCycleData()
   const locked = useIsDataLocked()
   const showOdps = useShowOriginalDatapoints()
-  const historyActive = useHistoryActivitiesIsActive()
+  const historyActivitiesActive = useHistoryActivitiesIsActive()
+  const historyLastApprovedActive = useHistoryLastApprovedIsActive()
 
   const [disabled, setDisabled] = useState<boolean>(false)
   const [over, setOver] = useState<boolean>(false)
   const lockRef = useRef<boolean>(showOdps)
 
-  const toggleLock = useCallback(() => dispatch(DataLockActions.toggleDataLock()), [dispatch])
+  const toggleLock = useCallback(() => {
+    // if unlocking for editing and historyLastApproved is Active -> close history
+    if (locked && historyLastApprovedActive) {
+      dispatch(DataActions.toggleHistoryLastApproved())
+    }
+    dispatch(DataLockActions.toggleDataLock())
+  }, [dispatch, historyLastApprovedActive, locked])
 
   useEffect(() => {
     if (canEditCycleData) {
-      if (historyActive || !showOdps) {
+      if (historyActivitiesActive || !showOdps) {
         setDisabled(true)
         if (!locked) {
           lockRef.current = locked
           toggleLock()
         }
       }
-      if (!historyActive && showOdps) {
+      if (!historyActivitiesActive && showOdps) {
         setDisabled(false)
         if (!lockRef.current) {
           lockRef.current = true
@@ -43,7 +50,7 @@ const Lock: React.FC = () => {
         }
       }
     }
-  }, [canEditCycleData, historyActive, locked, showOdps, toggleLock])
+  }, [canEditCycleData, historyActivitiesActive, locked, showOdps, toggleLock])
 
   return (
     <MediaQuery minWidth={Breakpoints.laptop}>
diff --git a/src/client/components/TablePaginated/hooks/useFetchData.tsx b/src/client/components/TablePaginated/hooks/useFetchData.tsx
index 8c76c0fcf7..1b0a2b8f81 100644
--- a/src/client/components/TablePaginated/hooks/useFetchData.tsx
+++ b/src/client/components/TablePaginated/hooks/useFetchData.tsx
@@ -32,7 +32,7 @@ export const useFetchData = (props: Props): void => {
           dispatch(TablePaginatedActions.getCount(params))
         },
         500,
-        { trailing: true }
+        { leading: true, trailing: true }
       ),
     [dispatch]
   )
@@ -44,38 +44,38 @@ export const useFetchData = (props: Props): void => {
           dispatch(TablePaginatedActions.getData(params))
         },
         500,
-        { trailing: true }
+        { leading: true, trailing: true }
       ),
     [dispatch]
   )
 
   useEffect(() => {
-    if (!isInitialized || !counter.show) return
-    throttledGetCount({
-      assessmentName,
-      countryIso,
-      cycleName,
-      filters,
-      path,
-      sectionName,
-    })
-  }, [assessmentName, counter, countryIso, cycleName, filters, isInitialized, path, sectionName, throttledGetCount])
+    if (isInitialized && counter?.show) {
+      const _props = { assessmentName, countryIso, cycleName, filters, path, sectionName }
+      throttledGetCount(_props)
+    }
+  }, [
+    assessmentName,
+    counter?.show,
+    countryIso,
+    cycleName,
+    filters,
+    isInitialized,
+    path,
+    sectionName,
+    throttledGetCount,
+  ])
 
   useEffect(() => {
-    if (!isInitialized) return
-    const params = {
-      assessmentName,
-      countryIso,
-      cycleName,
-      filters,
-      limit,
-      orderBy,
-      page,
-      path,
-      sectionName,
+    if (isInitialized) {
+      const _props = { assessmentName, countryIso, cycleName, filters, limit, orderBy, page, path, sectionName }
+      throttledGetData(_props)
+
+      return () => {
+        dispatch(TablePaginatedActions.resetData({ path }))
+      }
     }
-    dispatch(TablePaginatedActions.resetData({ path }))
-    throttledGetData(params)
+    return undefined
   }, [
     assessmentName,
     countryIso,
diff --git a/src/client/store/data/hooks/useHistoryLastApprovedIsActive.ts b/src/client/store/data/hooks/useHistoryLastApprovedIsActive.ts
new file mode 100644
index 0000000000..887f77702a
--- /dev/null
+++ b/src/client/store/data/hooks/useHistoryLastApprovedIsActive.ts
@@ -0,0 +1,6 @@
+import { DataSelector } from 'client/store/data/selectors'
+import { useAppSelector } from 'client/store/store'
+
+export const useHistoryLastApprovedIsActive = (): boolean => {
+  return useAppSelector(DataSelector.History.isHistoryLastApprovedActive)
+}
diff --git a/src/client/store/data/index.ts b/src/client/store/data/index.ts
index a46151c81e..f3029f4b0e 100644
--- a/src/client/store/data/index.ts
+++ b/src/client/store/data/index.ts
@@ -6,6 +6,7 @@ export { useHasOriginalDataPointData } from './hooks/useHasOriginalDataPointData
 export { useHistoryActivities } from './hooks/useHistoryActivities'
 export { useHistoryActivitiesCompareItem } from './hooks/useHistoryActivitiesCompareItem'
 export { useHistoryActivitiesIsActive } from './hooks/useHistoryActivitiesIsActive'
+export { useHistoryLastApprovedIsActive } from './hooks/useHistoryLastApprovedIsActive'
 export { useIsOdpTableDataFetched } from './hooks/useIsOdpTableDataFetched'
 export { useIsSectionDataEmpty } from './hooks/useIsSectionDataEmpty'
 export { useIsSomeTableDataFetching } from './hooks/useIsSomeTableDataFetching'
diff --git a/src/client/store/data/reducers/toggleHistoryLastApproved.ts b/src/client/store/data/reducers/toggleHistoryLastApproved.ts
new file mode 100644
index 0000000000..133f773eb7
--- /dev/null
+++ b/src/client/store/data/reducers/toggleHistoryLastApproved.ts
@@ -0,0 +1,13 @@
+import { Draft, PayloadAction } from '@reduxjs/toolkit'
+import { Objects } from 'utils/objects'
+
+import { DataState } from 'client/store/data/state'
+
+export const toggleHistoryLastApproved = (state: Draft<DataState>, action: PayloadAction<boolean | undefined>) => {
+  const active = action.payload ?? !state.history?.lastApproved?.active
+  const path = ['history', 'lastApproved', 'active']
+
+  Objects.setInPath({ obj: state, path, value: active })
+
+  return state
+}
diff --git a/src/client/store/data/selectors/index.ts b/src/client/store/data/selectors/index.ts
index 40aa323043..7bfa817ebb 100644
--- a/src/client/store/data/selectors/index.ts
+++ b/src/client/store/data/selectors/index.ts
@@ -9,6 +9,7 @@ const getHistory = createSelector(
   (history) => history
 )
 
+// history activities
 const getHistoryActivities = createSelector(getHistory, (history) => history.activities ?? {})
 
 const getHistoryCompareItem = createSelector(
@@ -18,11 +19,18 @@ const getHistoryCompareItem = createSelector(
 
 const getHistoryItems = createSelector(getHistoryActivities, (history) => history?.items)
 
+// history last approved
+const getHistoryLastApproved = createSelector(getHistory, (history) => history.lastApproved ?? {})
+const isHistoryLastApprovedActive = createSelector(getHistoryLastApproved, (history) => Boolean(history?.active))
+
 export const DataSelector = {
   History: {
     getHistory,
+    // activities
     getHistoryActivities,
     getHistoryCompareItem,
     getHistoryItems,
+    // lastApproved
+    isHistoryLastApprovedActive,
   },
 }
diff --git a/src/client/store/data/slice.ts b/src/client/store/data/slice.ts
index 231d1bf3eb..f705ddbbab 100644
--- a/src/client/store/data/slice.ts
+++ b/src/client/store/data/slice.ts
@@ -5,7 +5,6 @@ import { CommentableDescriptionName } from 'meta/assessment'
 import { ContactNode } from 'meta/cycleData'
 import { RecordAssessmentDatas } from 'meta/data'
 
-import { resetHistoryActivities } from 'client/store/data/reducers/resetHistoryActivities'
 import { DataState, TableDataStatus } from 'client/store/data/state'
 
 import { createContact } from './actions/createContact'
@@ -23,10 +22,12 @@ import { updateDescription } from './actions/updateDescription'
 import { updateNodeValues } from './actions/updateNodeValues'
 import { setNodeValuesReducer } from './extraReducers/setNodeValues'
 import { deleteOriginalDataPoint } from './reducers/deleteOriginalDataPoint'
+import { resetHistoryActivities } from './reducers/resetHistoryActivities'
 import { setNodeValueValidations } from './reducers/setNodeValueValidations'
 import { setValue } from './reducers/setValue'
 import { toggleHistoryActivities } from './reducers/toggleHistoryActivities'
 import { toggleHistoryActivitiesCompareItem } from './reducers/toggleHistoryActivitiesCompareItem'
+import { toggleHistoryLastApproved } from './reducers/toggleHistoryLastApproved'
 
 const initialState: DataState = {
   contacts: {},
@@ -46,10 +47,12 @@ export const DataSlice = createSlice({
     deleteOriginalDataPoint,
     setNodeValueValidations,
     setValue,
-    // -- history
+    // -- history activities
     toggleHistoryActivitiesCompareItem,
     resetHistoryActivities,
     toggleHistoryActivities,
+    // -- history last approved
+    toggleHistoryLastApproved,
   },
 
   extraReducers: (builder) => {
diff --git a/src/client/store/data/state.ts b/src/client/store/data/state.ts
index fe951b6d9e..9decac1e05 100644
--- a/src/client/store/data/state.ts
+++ b/src/client/store/data/state.ts
@@ -60,6 +60,7 @@ export type HistoryActivitiesState = {
 }
 
 export type HistoryLastApprovedState = {
+  active?: boolean
   descriptions?: DescriptionsState
   tableData?: RecordAssessmentData
 }
diff --git a/src/client/store/user/hooks/index.ts b/src/client/store/user/hooks/index.ts
index 8b5d068b1f..34fc37aa89 100644
--- a/src/client/store/user/hooks/index.ts
+++ b/src/client/store/user/hooks/index.ts
@@ -113,11 +113,10 @@ export const useCanViewHistory = (): boolean => {
 
 export const useCanViewHistoryLastApproved = (): boolean => {
   const user = useUser()
-  const section = useSection()
   const country = useAssessmentCountry()
   const cycle = useCycle()
 
-  return Authorizer.canViewHistoryLastApproved({ country, cycle, section, user })
+  return Authorizer.canViewHistoryLastApproved({ country, cycle, user })
 }
 
 export const useCanViewGeo = (): boolean => {
diff --git a/src/meta/user/authorizer/index.ts b/src/meta/user/authorizer/index.ts
index bc99a4dbc8..02fba8c802 100644
--- a/src/meta/user/authorizer/index.ts
+++ b/src/meta/user/authorizer/index.ts
@@ -216,25 +216,18 @@ const canViewHistory = (props: {
 }
 
 /**
- * canViewHistoryLastApproved
- * Viewer or non loggedin user: never
- * Administrator: if status >=review
- * NationalCorrespondant and AlternateNationalCorrespondant: never
- * Collaborator: never
+ * canViewHistoryLastApproved:
+ *
  * Reviewer: if country status = review
+ * Administrator: if status >=review
+ *
  * @param props
  * @param props.country
  * @param props.cycle
- * @param props.section
  * @param props.user
  * @returns boolean
  */
-const canViewHistoryLastApproved = (props: {
-  country: Country
-  cycle: Cycle
-  section: Section | SubSection
-  user: User
-}): boolean => {
+const canViewHistoryLastApproved = (props: { country: Country; cycle: Cycle; user: User }): boolean => {
   const { country, cycle, user } = props
   const { status } = country?.props ?? {}
 

From 6df8b13772287a14d7a8e31f33f5d53ac70a72b1 Mon Sep 17 00:00:00 2001
From: Mino Togna <minotogna@users.noreply.github.com>
Date: Thu, 30 Jan 2025 07:22:33 +0100
Subject: [PATCH 03/38] 4278: History Controller (#4290)

---
 .../NavAssessment/History/Items/Item/props.ts |  2 +-
 .../History/Items/hooks/useColumns.tsx        |  2 +-
 .../History/Items/utils/getStatePath.ts       |  2 +-
 .../History/Items/utils/getTargetValue.ts     |  2 +-
 .../hooks/useHistoryActivitiesCompareItem.ts  |  2 +-
 .../toggleHistoryActivitiesCompareItem.ts     |  2 +-
 src/client/store/data/selectors/index.ts      |  2 +-
 src/client/store/data/state.ts                |  3 ++-
 src/meta/cycleData/history/index.ts           |  1 -
 .../_historyTarget.ts}                        |  0
 src/meta/cycleData/historyActivities/index.ts |  1 +
 .../cycleData/historyLastApproved/_info.ts    |  6 +++++
 .../cycleData/historyLastApproved/index.ts    |  1 +
 src/meta/cycleData/index.ts                   |  1 -
 .../api/cycleData/history/getHistory.ts       |  2 +-
 .../api/cycleData/history/getHistoryCount.ts  |  2 +-
 .../history/{ => activities}/getCount.ts      |  0
 .../{ => activities}/getHistoryActivities.ts  |  0
 .../cycleData/history/activities/index.ts     |  7 +++++
 .../history/{ => activities}/messages.ts      |  0
 .../controller/cycleData/history/index.ts     |  8 +++---
 .../cycleData/history/lastApproved/index.ts   | 26 +++++++++++++++++++
 22 files changed, 56 insertions(+), 16 deletions(-)
 delete mode 100644 src/meta/cycleData/history/index.ts
 rename src/meta/cycleData/{history/history.ts => historyActivities/_historyTarget.ts} (100%)
 create mode 100644 src/meta/cycleData/historyActivities/index.ts
 create mode 100644 src/meta/cycleData/historyLastApproved/_info.ts
 create mode 100644 src/meta/cycleData/historyLastApproved/index.ts
 rename src/server/controller/cycleData/history/{ => activities}/getCount.ts (100%)
 rename src/server/controller/cycleData/history/{ => activities}/getHistoryActivities.ts (100%)
 create mode 100644 src/server/controller/cycleData/history/activities/index.ts
 rename src/server/controller/cycleData/history/{ => activities}/messages.ts (100%)
 create mode 100644 src/server/controller/cycleData/history/lastApproved/index.ts

diff --git a/src/client/components/Navigation/NavAssessment/History/Items/Item/props.ts b/src/client/components/Navigation/NavAssessment/History/Items/Item/props.ts
index 9ce43ec817..70bc42e1b1 100644
--- a/src/client/components/Navigation/NavAssessment/History/Items/Item/props.ts
+++ b/src/client/components/Navigation/NavAssessment/History/Items/Item/props.ts
@@ -1,5 +1,5 @@
 import { ActivityLog } from 'meta/assessment'
-import { HistoryTarget } from 'meta/cycleData'
+import { HistoryTarget } from 'meta/cycleData/historyActivities'
 
 export type Props = {
   datum: ActivityLog<never>
diff --git a/src/client/components/Navigation/NavAssessment/History/Items/hooks/useColumns.tsx b/src/client/components/Navigation/NavAssessment/History/Items/hooks/useColumns.tsx
index 055fe501e3..5a60c9e661 100644
--- a/src/client/components/Navigation/NavAssessment/History/Items/hooks/useColumns.tsx
+++ b/src/client/components/Navigation/NavAssessment/History/Items/hooks/useColumns.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 
 import { ActivityLog } from 'meta/assessment'
-import { HistoryTarget } from 'meta/cycleData'
+import { HistoryTarget } from 'meta/cycleData/historyActivities'
 
 import Item from 'client/components/Navigation/NavAssessment/History/Items/Item'
 import { Column } from 'client/components/TablePaginated'
diff --git a/src/client/components/Navigation/NavAssessment/History/Items/utils/getStatePath.ts b/src/client/components/Navigation/NavAssessment/History/Items/utils/getStatePath.ts
index 996ad2491d..b7fedc1e93 100644
--- a/src/client/components/Navigation/NavAssessment/History/Items/utils/getStatePath.ts
+++ b/src/client/components/Navigation/NavAssessment/History/Items/utils/getStatePath.ts
@@ -1,4 +1,4 @@
-import { HistoryTarget } from 'meta/cycleData'
+import { HistoryTarget } from 'meta/cycleData/historyActivities'
 
 // Utility functions to get the path to the state that needs to be updated
 
diff --git a/src/client/components/Navigation/NavAssessment/History/Items/utils/getTargetValue.ts b/src/client/components/Navigation/NavAssessment/History/Items/utils/getTargetValue.ts
index 8d03746e7e..0b52632359 100644
--- a/src/client/components/Navigation/NavAssessment/History/Items/utils/getTargetValue.ts
+++ b/src/client/components/Navigation/NavAssessment/History/Items/utils/getTargetValue.ts
@@ -1,5 +1,5 @@
 import { ActivityLogDescription, CommentableDescriptionValue } from 'meta/assessment'
-import { HistoryTarget } from 'meta/cycleData'
+import { HistoryTarget } from 'meta/cycleData/historyActivities'
 
 export const getTargetValue: Record<
   HistoryTarget,
diff --git a/src/client/store/data/hooks/useHistoryActivitiesCompareItem.ts b/src/client/store/data/hooks/useHistoryActivitiesCompareItem.ts
index 0e23db4c97..b63be93f8f 100644
--- a/src/client/store/data/hooks/useHistoryActivitiesCompareItem.ts
+++ b/src/client/store/data/hooks/useHistoryActivitiesCompareItem.ts
@@ -1,5 +1,5 @@
 import { ActivityLog } from 'meta/assessment'
-import { HistoryTarget } from 'meta/cycleData'
+import { HistoryTarget } from 'meta/cycleData/historyActivities'
 
 import { DataSelector } from 'client/store/data/selectors'
 import { useAppSelector } from 'client/store/store'
diff --git a/src/client/store/data/reducers/toggleHistoryActivitiesCompareItem.ts b/src/client/store/data/reducers/toggleHistoryActivitiesCompareItem.ts
index b0f4e68c68..2e82c37aa5 100644
--- a/src/client/store/data/reducers/toggleHistoryActivitiesCompareItem.ts
+++ b/src/client/store/data/reducers/toggleHistoryActivitiesCompareItem.ts
@@ -2,7 +2,7 @@ import { Draft, PayloadAction } from '@reduxjs/toolkit'
 import { Objects } from 'utils/objects'
 
 import { ActivityLog } from 'meta/assessment'
-import { HistoryTarget } from 'meta/cycleData'
+import { HistoryTarget } from 'meta/cycleData/historyActivities'
 
 import { DataState } from 'client/store/data/state'
 
diff --git a/src/client/store/data/selectors/index.ts b/src/client/store/data/selectors/index.ts
index 7bfa817ebb..ef6f65c185 100644
--- a/src/client/store/data/selectors/index.ts
+++ b/src/client/store/data/selectors/index.ts
@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit'
 
-import { HistoryTarget } from 'meta/cycleData'
+import { HistoryTarget } from 'meta/cycleData/historyActivities'
 
 import { RootState } from 'client/store/RootState'
 
diff --git a/src/client/store/data/state.ts b/src/client/store/data/state.ts
index 9decac1e05..592ab695bb 100644
--- a/src/client/store/data/state.ts
+++ b/src/client/store/data/state.ts
@@ -12,7 +12,8 @@ import {
   TableName,
   VariableName,
 } from 'meta/assessment'
-import { Contact, HistoryTarget } from 'meta/cycleData'
+import { Contact } from 'meta/cycleData'
+import { HistoryTarget } from 'meta/cycleData/historyActivities'
 import { RecordAssessmentData } from 'meta/data'
 
 export interface DataBaseState {
diff --git a/src/meta/cycleData/history/index.ts b/src/meta/cycleData/history/index.ts
deleted file mode 100644
index db9540054a..0000000000
--- a/src/meta/cycleData/history/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type { HistoryTarget } from './history'
diff --git a/src/meta/cycleData/history/history.ts b/src/meta/cycleData/historyActivities/_historyTarget.ts
similarity index 100%
rename from src/meta/cycleData/history/history.ts
rename to src/meta/cycleData/historyActivities/_historyTarget.ts
diff --git a/src/meta/cycleData/historyActivities/index.ts b/src/meta/cycleData/historyActivities/index.ts
new file mode 100644
index 0000000000..561dc23af4
--- /dev/null
+++ b/src/meta/cycleData/historyActivities/index.ts
@@ -0,0 +1 @@
+export type { HistoryTarget } from './_historyTarget'
diff --git a/src/meta/cycleData/historyLastApproved/_info.ts b/src/meta/cycleData/historyLastApproved/_info.ts
new file mode 100644
index 0000000000..ff441597cf
--- /dev/null
+++ b/src/meta/cycleData/historyLastApproved/_info.ts
@@ -0,0 +1,6 @@
+import { Cycle } from 'meta/assessment'
+
+export type HistoryLastApprovedInfo = {
+  lastAccepted?: Date
+  prevCycle?: Cycle
+}
diff --git a/src/meta/cycleData/historyLastApproved/index.ts b/src/meta/cycleData/historyLastApproved/index.ts
new file mode 100644
index 0000000000..936bdd1cf8
--- /dev/null
+++ b/src/meta/cycleData/historyLastApproved/index.ts
@@ -0,0 +1 @@
+export type { HistoryLastApprovedInfo } from './_info'
diff --git a/src/meta/cycleData/index.ts b/src/meta/cycleData/index.ts
index d62e93bcf1..a34fd42df1 100644
--- a/src/meta/cycleData/index.ts
+++ b/src/meta/cycleData/index.ts
@@ -1,7 +1,6 @@
 export type { Contact, ContactNode, ContactNodeProps, ContactProps } from './contact'
 export { ContactField, Contacts } from './contact'
 export { contactFields } from './contact/contact'
-export type { HistoryTarget } from './history'
 export type { Link, LinkLocation, LinkProps, LinkToVisit, LinkVisit, VisitedLink } from './links'
 export { LinkValidationStatusCode } from './links'
 export type { RepositoryItem, RepositoryItemProps } from './repository'
diff --git a/src/server/api/cycleData/history/getHistory.ts b/src/server/api/cycleData/history/getHistory.ts
index 89fde86e90..8264fa9d08 100644
--- a/src/server/api/cycleData/history/getHistory.ts
+++ b/src/server/api/cycleData/history/getHistory.ts
@@ -13,7 +13,7 @@ export const getHistory = async (req: TablePaginatedDataRequest, res: Response)
     const { assessment, cycle } = await AssessmentController.getOneWithCycle({ assessmentName, cycleName })
 
     const props = { assessment, cycle, countryIso, sectionName, target, limit, offset }
-    const history = await CycleDataController.History.getHistoryActivities(props)
+    const history = await CycleDataController.History.Activities.getHistoryActivities(props)
 
     Requests.send(res, history)
   } catch (e) {
diff --git a/src/server/api/cycleData/history/getHistoryCount.ts b/src/server/api/cycleData/history/getHistoryCount.ts
index 357e1a5bee..f9677e914d 100644
--- a/src/server/api/cycleData/history/getHistoryCount.ts
+++ b/src/server/api/cycleData/history/getHistoryCount.ts
@@ -13,7 +13,7 @@ export const getHistoryCount = async (req: TablePaginatedDataRequest, res: Respo
     const { assessment, cycle } = await AssessmentController.getOneWithCycle({ assessmentName, cycleName })
 
     const props = { assessment, cycle, countryIso, sectionName, target }
-    const count = await CycleDataController.History.getCount(props)
+    const count = await CycleDataController.History.Activities.getCount(props)
 
     Requests.send(res, count)
   } catch (e) {
diff --git a/src/server/controller/cycleData/history/getCount.ts b/src/server/controller/cycleData/history/activities/getCount.ts
similarity index 100%
rename from src/server/controller/cycleData/history/getCount.ts
rename to src/server/controller/cycleData/history/activities/getCount.ts
diff --git a/src/server/controller/cycleData/history/getHistoryActivities.ts b/src/server/controller/cycleData/history/activities/getHistoryActivities.ts
similarity index 100%
rename from src/server/controller/cycleData/history/getHistoryActivities.ts
rename to src/server/controller/cycleData/history/activities/getHistoryActivities.ts
diff --git a/src/server/controller/cycleData/history/activities/index.ts b/src/server/controller/cycleData/history/activities/index.ts
new file mode 100644
index 0000000000..fa5be6dbe5
--- /dev/null
+++ b/src/server/controller/cycleData/history/activities/index.ts
@@ -0,0 +1,7 @@
+import { getCount } from './getCount'
+import { getHistoryActivities } from './getHistoryActivities'
+
+export const Activities = {
+  getCount,
+  getHistoryActivities,
+}
diff --git a/src/server/controller/cycleData/history/messages.ts b/src/server/controller/cycleData/history/activities/messages.ts
similarity index 100%
rename from src/server/controller/cycleData/history/messages.ts
rename to src/server/controller/cycleData/history/activities/messages.ts
diff --git a/src/server/controller/cycleData/history/index.ts b/src/server/controller/cycleData/history/index.ts
index e06894fa27..7e7ddd17ca 100644
--- a/src/server/controller/cycleData/history/index.ts
+++ b/src/server/controller/cycleData/history/index.ts
@@ -1,7 +1,7 @@
-import { getCount } from './getCount'
-import { getHistoryActivities } from './getHistoryActivities'
+import { Activities } from './activities'
+import { LastApproved } from './lastApproved'
 
 export const History = {
-  getCount,
-  getHistoryActivities,
+  Activities,
+  LastApproved,
 }
diff --git a/src/server/controller/cycleData/history/lastApproved/index.ts b/src/server/controller/cycleData/history/lastApproved/index.ts
new file mode 100644
index 0000000000..f304240873
--- /dev/null
+++ b/src/server/controller/cycleData/history/lastApproved/index.ts
@@ -0,0 +1,26 @@
+import { CountryIso } from 'meta/area'
+import { Assessment, Cycle } from 'meta/assessment'
+import { HistoryLastApprovedInfo } from 'meta/cycleData/historyLastApproved'
+
+import { BaseProtocol, DB } from 'server/db'
+import { CountrySummaryRepository } from 'server/repository/assessmentCycle/countrySummary'
+
+type Props = {
+  assessment: Assessment
+  countryIso: CountryIso
+  cycle: Cycle
+}
+
+export const getInfo = async (props: Props, client: BaseProtocol = DB): Promise<HistoryLastApprovedInfo> => {
+  const { assessment, cycle } = props
+
+  const countrySummary = await CountrySummaryRepository.getOneOrNone(props, client)
+  const lastAccepted = countrySummary.lastAccepted as unknown as Date // server side is a Date object
+  const prevCycle = cycle.cycleUuidSource ? assessment.cycles.find((c) => c.uuid === cycle.cycleUuidSource) : undefined
+
+  return { lastAccepted, prevCycle }
+}
+
+export const LastApproved = {
+  getInfo,
+}

From 40fb005d145f2da72b9bfb2acda8e6f32a4c0e5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Sorja?= <ping@mirosorja.com>
Date: Thu, 30 Jan 2025 14:42:05 +0200
Subject: [PATCH 04/38] 4249 - Data History: Descriptions text comparison
 (Empty dataset) (#4280)

* 4249 - Descriptions history: Dummy API

* 4249 - Descriptions history: Fetch and update store

* 4249 - Descriptions history: useLastApprovedHistoryDescriptions hook and getLastApprovedDescriptions selector

* 4249 - Descriptions history: common component DiffText

* 4249 - Descriptions history: DescriptionDiffView component

* 4249 - 'react/require-default-props': 'off'

* 4249 - DiffText: Remove default prop declaration

* 4249 - useGetDescriptionValues: separate fetching history values

* 4249 - history selectors: use getHistoryLastApproved

* 4249 - Add reminder for data sources
---
 .eslintrc.js                                  |  4 +++
 src/client/components/DiffText/DiffText.scss  | 17 +++++++++
 src/client/components/DiffText/DiffText.tsx   | 35 ++++++++++++++++++
 src/client/components/DiffText/index.ts       |  1 +
 .../CommentableDescription.tsx                | 20 +++++++----
 .../DescriptionDiffView.tsx                   | 26 ++++++++++++++
 .../DescriptionDiffView/index.ts              |  1 +
 .../hooks/useChanges.ts                       | 36 +++++++++++++++++++
 src/client/pages/Section/Section.tsx          |  8 ++---
 .../hooks/useGetDescriptionHistoryValues.ts   | 26 ++++++++++++++
 .../data/actions/getDescriptionsHistory.ts    | 19 ++++++++++
 src/client/store/data/actions/index.ts        |  2 ++
 .../extraReducers/getDescriptionsHistory.ts   | 15 ++++++++
 .../useLastApprovedHistoryDescriptions.ts     | 22 ++++++++++++
 src/client/store/data/index.ts                |  1 +
 src/client/store/data/selectors/index.ts      | 21 +++++++++++
 src/client/store/data/slice.ts                |  7 ++--
 src/meta/api/endpoint/ApiEndPoint.ts          |  1 +
 .../descriptions/getDescriptionsHistory.ts    | 36 +++++++++++++++++++
 src/server/api/cycleData/index.ts             |  2 ++
 20 files changed, 286 insertions(+), 14 deletions(-)
 create mode 100644 src/client/components/DiffText/DiffText.scss
 create mode 100644 src/client/components/DiffText/DiffText.tsx
 create mode 100644 src/client/components/DiffText/index.ts
 create mode 100644 src/client/pages/Section/Descriptions/CommentableDescription/DescriptionDiffView/DescriptionDiffView.tsx
 create mode 100644 src/client/pages/Section/Descriptions/CommentableDescription/DescriptionDiffView/index.ts
 create mode 100644 src/client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges.ts
 create mode 100644 src/client/pages/Section/hooks/useGetDescriptionHistoryValues.ts
 create mode 100644 src/client/store/data/actions/getDescriptionsHistory.ts
 create mode 100644 src/client/store/data/extraReducers/getDescriptionsHistory.ts
 create mode 100644 src/client/store/data/hooks/useLastApprovedHistoryDescriptions.ts
 create mode 100644 src/server/api/cycleData/descriptions/getDescriptionsHistory.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index a0c2c1d953..65c7f95065 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -57,6 +57,10 @@ module.exports = {
     'react/function-component-definition': 'off',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'error',
+
+    // Not possible to enforce destructureInSignature: 'never' - only 'ignore' is possible
+    'react/require-default-props': 'off',
+
     // simple-import-sort rules
 
     'simple-import-sort/exports': 'error',
diff --git a/src/client/components/DiffText/DiffText.scss b/src/client/components/DiffText/DiffText.scss
new file mode 100644
index 0000000000..7fd47e28d8
--- /dev/null
+++ b/src/client/components/DiffText/DiffText.scss
@@ -0,0 +1,17 @@
+@import 'src/client/style/partials';
+
+.diff-text {
+  .added,
+  .removed {
+    font-weight: 600;
+  }
+
+  .added {
+    color: darken($ui-status-accepted, 10%);
+  }
+
+  .removed {
+    color: $ui-destructive;
+    text-decoration: line-through;
+  }
+}
diff --git a/src/client/components/DiffText/DiffText.tsx b/src/client/components/DiffText/DiffText.tsx
new file mode 100644
index 0000000000..e65826c44b
--- /dev/null
+++ b/src/client/components/DiffText/DiffText.tsx
@@ -0,0 +1,35 @@
+import './DiffText.scss'
+import React from 'react'
+
+import classNames from 'classnames'
+import { Change } from 'diff'
+
+interface Props {
+  changes: Array<Change>
+  className?: string
+}
+
+const DiffText: React.FC<Props> = (props) => {
+  const { changes, className = '' } = props
+
+  return (
+    <div className={classNames('diff-text', className)}>
+      {changes?.map((change, i) => {
+        const { added, removed, value } = change
+        const key = `${value}_${String(i)}`
+
+        return (
+          <React.Fragment key={key}>
+            {value.split('\n\r').map((text, j) => (
+              <React.Fragment key={`${key}_${String(j)}`}>
+                <span className={classNames({ added, removed })}>{text}</span>
+              </React.Fragment>
+            ))}
+          </React.Fragment>
+        )
+      })}
+    </div>
+  )
+}
+
+export default DiffText
diff --git a/src/client/components/DiffText/index.ts b/src/client/components/DiffText/index.ts
new file mode 100644
index 0000000000..3be4101408
--- /dev/null
+++ b/src/client/components/DiffText/index.ts
@@ -0,0 +1 @@
+export { default } from './DiffText'
diff --git a/src/client/pages/Section/Descriptions/CommentableDescription/CommentableDescription.tsx b/src/client/pages/Section/Descriptions/CommentableDescription/CommentableDescription.tsx
index d388ccd553..9629b83c13 100644
--- a/src/client/pages/Section/Descriptions/CommentableDescription/CommentableDescription.tsx
+++ b/src/client/pages/Section/Descriptions/CommentableDescription/CommentableDescription.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 
 import { CommentableDescriptionName, CommentableDescriptionValue } from 'meta/assessment'
 
-import { useCommentableDescriptionValue } from 'client/store/data'
+import { useCommentableDescriptionValue, useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useCanEditDescription, useIsDescriptionEditable } from 'client/store/user/hooks'
 import { DataCell, DataGrid, DataRow } from 'client/components/DataGrid'
 import EditorWYSIWYG from 'client/components/EditorWYSIWYG'
@@ -12,6 +12,7 @@ import Title from 'client/pages/Section/Descriptions/CommentableDescription/Titl
 
 import { useDescriptionErrorState } from './hooks/useDescriptionErrorState'
 import { useOnChange } from './hooks/useOnChange'
+import DescriptionDiffView from './DescriptionDiffView'
 
 type Props = {
   name: CommentableDescriptionName
@@ -27,6 +28,7 @@ const CommentableDescription: React.FC<Props> = (props) => {
   const { sectionName } = useSectionContext()
   const value = useCommentableDescriptionValue({ name, sectionName, template })
   const { empty } = useDescriptionErrorState({ name, sectionName })
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
 
   const canEdit = useCanEditDescription({ sectionName })
   const editable = useIsDescriptionEditable({ sectionName, name })
@@ -45,12 +47,16 @@ const CommentableDescription: React.FC<Props> = (props) => {
           lastRow
           noBorder={!editable}
         >
-          <EditorWYSIWYG
-            disabled={!editable}
-            onChange={(content) => onChange({ ...value, text: content })}
-            repository={repository}
-            value={!editable && empty && showDashEmptyContent ? '-' : value.text}
-          />
+          {historyLastApprovedIsActive ? (
+            <DescriptionDiffView name={name} />
+          ) : (
+            <EditorWYSIWYG
+              disabled={!editable}
+              onChange={(content) => onChange({ ...value, text: content })}
+              repository={repository}
+              value={!editable && empty && showDashEmptyContent ? '-' : value.text}
+            />
+          )}
         </DataCell>
       </DataRow>
     </DataGrid>
diff --git a/src/client/pages/Section/Descriptions/CommentableDescription/DescriptionDiffView/DescriptionDiffView.tsx b/src/client/pages/Section/Descriptions/CommentableDescription/DescriptionDiffView/DescriptionDiffView.tsx
new file mode 100644
index 0000000000..5d746beda3
--- /dev/null
+++ b/src/client/pages/Section/Descriptions/CommentableDescription/DescriptionDiffView/DescriptionDiffView.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { CommentableDescriptionName } from 'meta/assessment'
+
+import { useCommentableDescriptionValue, useLastApprovedHistoryDescriptions } from 'client/store/data'
+import DiffText from 'client/components/DiffText'
+import { useSectionContext } from 'client/pages/Section/context'
+import useChanges from 'client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges'
+
+type Props = { name: CommentableDescriptionName }
+
+const DescriptionDiffView: React.FC<Props> = (props) => {
+  const { name } = props
+  const { sectionName } = useSectionContext()
+
+  const descriptions = useLastApprovedHistoryDescriptions()
+  // TODO: Support data sources after 2020
+  const descriptionA = descriptions?.[name]?.text || ''
+  const descriptionB = useCommentableDescriptionValue({ name, sectionName })?.text || ''
+
+  const changes = useChanges({ descriptionA, descriptionB })
+
+  return <DiffText changes={changes} />
+}
+
+export default DescriptionDiffView
diff --git a/src/client/pages/Section/Descriptions/CommentableDescription/DescriptionDiffView/index.ts b/src/client/pages/Section/Descriptions/CommentableDescription/DescriptionDiffView/index.ts
new file mode 100644
index 0000000000..ce3097d860
--- /dev/null
+++ b/src/client/pages/Section/Descriptions/CommentableDescription/DescriptionDiffView/index.ts
@@ -0,0 +1 @@
+export { default } from './DescriptionDiffView'
diff --git a/src/client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges.ts b/src/client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges.ts
new file mode 100644
index 0000000000..a1fa63f3d0
--- /dev/null
+++ b/src/client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges.ts
@@ -0,0 +1,36 @@
+import { useMemo } from 'react'
+
+import * as Diff from 'diff'
+import { Change } from 'diff'
+
+interface Props {
+  descriptionA: string
+  descriptionB: string
+}
+
+type Returned = Array<Change>
+
+// TODO: Rename to useChangesHTML
+// TODO: Add support for JSON/DataSource type
+const useChanges = (props: Props): Returned => {
+  const { descriptionA, descriptionB } = props
+
+  return useMemo<Returned>(() => {
+    const getTextContent = (html: string): string => {
+      const parser = new DOMParser()
+      const doc = parser.parseFromString(html, 'text/html')
+      return doc.body.textContent || ''
+    }
+
+    const textA = getTextContent(descriptionA)
+    const textB = getTextContent(descriptionB)
+
+    const changes = Diff.diffWords(textA, textB, {
+      ignoreCase: false,
+    })
+
+    return changes
+  }, [descriptionA, descriptionB])
+}
+
+export default useChanges
diff --git a/src/client/pages/Section/Section.tsx b/src/client/pages/Section/Section.tsx
index 5fc4c9c3e2..ccd5d97062 100644
--- a/src/client/pages/Section/Section.tsx
+++ b/src/client/pages/Section/Section.tsx
@@ -15,6 +15,7 @@ import { useSectionRouteParams } from 'client/hooks/useRouteParams'
 import { SectionContext, SectionContextValue } from 'client/pages/Section/context'
 import Introduction from 'client/pages/Section/Introduction'
 
+import { useGetDescriptionHistoryValues } from './hooks/useGetDescriptionHistoryValues'
 import { useGetDescriptionValues } from './hooks/useGetDescriptionValues'
 import { useGetTableData } from './hooks/useGetTableData'
 import { useListenNodeUpdates } from './hooks/useListenNodeUpdates'
@@ -28,7 +29,7 @@ type Props = {
 }
 
 const Section: React.FC<Props> = (props: Props) => {
-  const { section: sectionProp } = props
+  const { section: sectionProp = undefined } = props
 
   const { t } = useTranslation()
   const { assessmentName, cycleName, countryIso } = useSectionRouteParams()
@@ -37,6 +38,7 @@ const Section: React.FC<Props> = (props: Props) => {
   const tableSections = useTableSections({ sectionName: subSection?.props.name })
   useGetTableData({ sectionName: subSection?.props.name })
   useGetDescriptionValues({ sectionName: subSection?.props.name })
+  useGetDescriptionHistoryValues({ sectionName: subSection?.props.name })
   const canEditTableData = useIsEditTableDataEnabled(sectionProp)
   const { print, onlyTables } = useIsPrintRoute()
   useListenNodeUpdates({ countryIso, assessmentName, cycleName: cycle.name })
@@ -108,8 +110,4 @@ const Section: React.FC<Props> = (props: Props) => {
   )
 }
 
-Section.defaultProps = {
-  section: undefined,
-}
-
 export default Section
diff --git a/src/client/pages/Section/hooks/useGetDescriptionHistoryValues.ts b/src/client/pages/Section/hooks/useGetDescriptionHistoryValues.ts
new file mode 100644
index 0000000000..975bdef27c
--- /dev/null
+++ b/src/client/pages/Section/hooks/useGetDescriptionHistoryValues.ts
@@ -0,0 +1,26 @@
+import { useEffect } from 'react'
+
+import { CountryIso } from 'meta/area'
+
+import { useAppDispatch } from 'client/store'
+import { DataActions, useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useIsPrintRoute } from 'client/hooks/useIsRoute'
+import { useCountryRouteParams } from 'client/hooks/useRouteParams'
+
+type Props = { sectionName: string }
+
+export const useGetDescriptionHistoryValues = (props: Props): void => {
+  const { sectionName } = props
+
+  const dispatch = useAppDispatch()
+  const { print } = useIsPrintRoute()
+  const { assessmentName, cycleName, countryIso: _countryIso } = useCountryRouteParams()
+  const countryIso = _countryIso as CountryIso
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  useEffect(() => {
+    if (!print && historyLastApprovedIsActive) {
+      dispatch(DataActions.getDescriptionsHistory({ countryIso, assessmentName, cycleName, sectionName }))
+    }
+  }, [assessmentName, countryIso, cycleName, dispatch, historyLastApprovedIsActive, print, sectionName])
+}
diff --git a/src/client/store/data/actions/getDescriptionsHistory.ts b/src/client/store/data/actions/getDescriptionsHistory.ts
new file mode 100644
index 0000000000..3a4145e3c2
--- /dev/null
+++ b/src/client/store/data/actions/getDescriptionsHistory.ts
@@ -0,0 +1,19 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import axios from 'axios'
+
+import { ApiEndPoint } from 'meta/api/endpoint'
+import { CycleParams } from 'meta/api/request'
+import { DescriptionCountryValues, SectionName } from 'meta/assessment'
+
+type Props = CycleParams & { sectionName?: SectionName; name?: string }
+
+type Returned = DescriptionCountryValues
+
+export const getDescriptionsHistory = createAsyncThunk<Returned, Props>(
+  'data/descriptions/history/get',
+  async (params) => {
+    const config = { params }
+    const { data } = await axios.get<DescriptionCountryValues>(ApiEndPoint.CycleData.Descriptions.history(), config)
+    return data
+  }
+)
diff --git a/src/client/store/data/actions/index.ts b/src/client/store/data/actions/index.ts
index b4ad043e67..d5f727b7e0 100644
--- a/src/client/store/data/actions/index.ts
+++ b/src/client/store/data/actions/index.ts
@@ -7,6 +7,7 @@ import { deleteContact } from './deleteContact'
 import { deleteDataSource } from './deleteDataSource'
 import { getContacts } from './getContacts'
 import { getDescription } from './getDescription'
+import { getDescriptionsHistory } from './getDescriptionsHistory'
 import { getLinkedDataSources } from './getLinkedDataSources'
 import { getNodeValuesEstimations } from './getNodeValuesEstimations'
 import { getODPLastUpdatedTimestamp } from './getODPLastUpdatedTimestamp'
@@ -38,6 +39,7 @@ export const DataActions = {
   copyPreviousDatasources,
   deleteDataSource,
   getLinkedDataSources,
+  getDescriptionsHistory,
 
   // Contacts
   createContact,
diff --git a/src/client/store/data/extraReducers/getDescriptionsHistory.ts b/src/client/store/data/extraReducers/getDescriptionsHistory.ts
new file mode 100644
index 0000000000..96880ba403
--- /dev/null
+++ b/src/client/store/data/extraReducers/getDescriptionsHistory.ts
@@ -0,0 +1,15 @@
+import { ActionReducerMapBuilder } from '@reduxjs/toolkit'
+import { Objects } from 'utils/objects'
+
+import { getDescriptionsHistory } from 'client/store/data/actions/getDescriptionsHistory'
+import { DataState } from 'client/store/data/state'
+
+export const getDescriptionsHistoryReducer = (builder: ActionReducerMapBuilder<DataState>) =>
+  builder.addCase(getDescriptionsHistory.fulfilled, (state, { payload, meta }) => {
+    const { assessmentName, cycleName, countryIso } = meta.arg
+
+    const value = payload[countryIso]
+    const path = ['history', 'lastApproved', 'descriptions', assessmentName, cycleName, countryIso]
+
+    Objects.setInPath({ obj: state, path, value })
+  })
diff --git a/src/client/store/data/hooks/useLastApprovedHistoryDescriptions.ts b/src/client/store/data/hooks/useLastApprovedHistoryDescriptions.ts
new file mode 100644
index 0000000000..0b05acf27c
--- /dev/null
+++ b/src/client/store/data/hooks/useLastApprovedHistoryDescriptions.ts
@@ -0,0 +1,22 @@
+import { CountryIso } from 'meta/area'
+import { CommentableDescriptionName, CommentableDescriptionValue } from 'meta/assessment'
+
+import { useAppSelector } from 'client/store'
+import { DataSelector } from 'client/store/data/selectors'
+import { useSectionRouteParams } from 'client/hooks/useRouteParams'
+
+export const useLastApprovedHistoryDescriptions = (): Record<
+  CommentableDescriptionName,
+  CommentableDescriptionValue
+> => {
+  const { assessmentName, cycleName, countryIso, sectionName } = useSectionRouteParams<CountryIso>()
+
+  return useAppSelector((state) =>
+    DataSelector.History.getLastApprovedDescriptions(state, {
+      assessmentName,
+      cycleName,
+      countryIso,
+      sectionName,
+    })
+  )
+}
diff --git a/src/client/store/data/index.ts b/src/client/store/data/index.ts
index f3029f4b0e..9e48d4134b 100644
--- a/src/client/store/data/index.ts
+++ b/src/client/store/data/index.ts
@@ -10,6 +10,7 @@ export { useHistoryLastApprovedIsActive } from './hooks/useHistoryLastApprovedIs
 export { useIsOdpTableDataFetched } from './hooks/useIsOdpTableDataFetched'
 export { useIsSectionDataEmpty } from './hooks/useIsSectionDataEmpty'
 export { useIsSomeTableDataFetching } from './hooks/useIsSomeTableDataFetching'
+export { useLastApprovedHistoryDescriptions } from './hooks/useLastApprovedHistoryDescriptions'
 export { useNodeValuesEstimation } from './hooks/useNodeValuesEstimation'
 export { useNodeValueValidation, useTableHasErrors } from './hooks/useNodeValueValidations'
 export { useOdpLastUpdatedTimestamp } from './hooks/useOdpLastUpdatedTimestamp'
diff --git a/src/client/store/data/selectors/index.ts b/src/client/store/data/selectors/index.ts
index ef6f65c185..09e669211d 100644
--- a/src/client/store/data/selectors/index.ts
+++ b/src/client/store/data/selectors/index.ts
@@ -1,5 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit'
 
+import { CountryIso } from 'meta/area'
+import { AssessmentName, CycleName, SectionName } from 'meta/assessment'
 import { HistoryTarget } from 'meta/cycleData/historyActivities'
 
 import { RootState } from 'client/store/RootState'
@@ -23,6 +25,23 @@ const getHistoryItems = createSelector(getHistoryActivities, (history) => histor
 const getHistoryLastApproved = createSelector(getHistory, (history) => history.lastApproved ?? {})
 const isHistoryLastApprovedActive = createSelector(getHistoryLastApproved, (history) => Boolean(history?.active))
 
+const getLastApprovedDescriptions = createSelector(
+  [
+    getHistoryLastApproved,
+    (
+      _,
+      params: {
+        assessmentName: AssessmentName
+        cycleName: CycleName
+        countryIso: CountryIso
+        sectionName: SectionName
+      }
+    ) => params,
+  ],
+  (lastApproved, { assessmentName, cycleName, countryIso, sectionName }) =>
+    lastApproved?.descriptions?.[assessmentName]?.[cycleName]?.[countryIso]?.[sectionName]
+)
+
 export const DataSelector = {
   History: {
     getHistory,
@@ -32,5 +51,7 @@ export const DataSelector = {
     getHistoryItems,
     // lastApproved
     isHistoryLastApprovedActive,
+    // descriptions
+    getLastApprovedDescriptions,
   },
 }
diff --git a/src/client/store/data/slice.ts b/src/client/store/data/slice.ts
index f705ddbbab..8bce572a5c 100644
--- a/src/client/store/data/slice.ts
+++ b/src/client/store/data/slice.ts
@@ -1,4 +1,4 @@
-import { createSlice, Reducer } from '@reduxjs/toolkit'
+import { ActionReducerMapBuilder, createSlice, Reducer } from '@reduxjs/toolkit'
 import { Objects } from 'utils/objects'
 
 import { CommentableDescriptionName } from 'meta/assessment'
@@ -20,6 +20,7 @@ import { postEstimate } from './actions/postEstimate'
 import { updateContact } from './actions/updateContact'
 import { updateDescription } from './actions/updateDescription'
 import { updateNodeValues } from './actions/updateNodeValues'
+import { getDescriptionsHistoryReducer } from './extraReducers/getDescriptionsHistory'
 import { setNodeValuesReducer } from './extraReducers/setNodeValues'
 import { deleteOriginalDataPoint } from './reducers/deleteOriginalDataPoint'
 import { resetHistoryActivities } from './reducers/resetHistoryActivities'
@@ -55,7 +56,7 @@ export const DataSlice = createSlice({
     toggleHistoryLastApproved,
   },
 
-  extraReducers: (builder) => {
+  extraReducers: (builder: ActionReducerMapBuilder<DataState>) => {
     setNodeValuesReducer(builder)
 
     // Table data
@@ -214,6 +215,8 @@ export const DataSlice = createSlice({
       const contacts = state.contacts[assessmentName][cycleName][countryIso]
       contacts.push(contactAction)
     })
+
+    getDescriptionsHistoryReducer(builder)
   },
 })
 
diff --git a/src/meta/api/endpoint/ApiEndPoint.ts b/src/meta/api/endpoint/ApiEndPoint.ts
index dd77772109..fb470ee52e 100644
--- a/src/meta/api/endpoint/ApiEndPoint.ts
+++ b/src/meta/api/endpoint/ApiEndPoint.ts
@@ -41,6 +41,7 @@ export const ApiEndPoint = {
 
     Descriptions: {
       many: () => apiPath('cycle-data', 'descriptions'),
+      history: () => apiPath('cycle-data', 'descriptions', 'history'),
 
       DataSources: {
         many: () => apiPath('cycle-data', 'descriptions', 'data-sources'),
diff --git a/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts b/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
new file mode 100644
index 0000000000..1e341e18d9
--- /dev/null
+++ b/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
@@ -0,0 +1,36 @@
+import { Response } from 'express'
+
+import { CycleDataRequest } from 'meta/api/request'
+import { CountryIso } from 'meta/area'
+import { CommentableDescriptionName, DescriptionSectionValues } from 'meta/assessment'
+
+import Requests from 'server/utils/requests'
+
+type Request = CycleDataRequest<{ name?: CommentableDescriptionName }>
+
+export const getDescriptionsHistory = async (req: Request, res: Response) => {
+  try {
+    const { sectionName, countryIso } = req.query
+    const values: { [key in CountryIso]?: DescriptionSectionValues } = {
+      [countryIso]: {
+        [sectionName]: {
+          // Example of expected output:
+          // dataSources: {
+          //   text: '',
+          //   dataSources: {},
+          // },
+          // generalComments: '',
+          // nationalClassificationAndDefinitions: '',
+          // originalData: '',
+          // reclassification: '',
+          // estimationAndForecasting: '',
+          // introductoryText: '',
+        },
+      },
+    }
+
+    Requests.send(res, values)
+  } catch (e) {
+    Requests.sendErr(res, e)
+  }
+}
diff --git a/src/server/api/cycleData/index.ts b/src/server/api/cycleData/index.ts
index e62c9c3ff7..d0350ec7cb 100644
--- a/src/server/api/cycleData/index.ts
+++ b/src/server/api/cycleData/index.ts
@@ -17,6 +17,7 @@ import { removeContact } from './contacts/remove'
 import { updateContact } from './contacts/update'
 import { getDataSources } from './descriptions/getDataSources'
 import { getDescription } from './descriptions/getDescription'
+import { getDescriptionsHistory } from './descriptions/getDescriptionsHistory'
 import { removeDataSource } from './descriptions/removeDataSource'
 import { upsertDescription } from './descriptions/upsertDescription'
 import { getLinksCount } from './links/getLinksCount'
@@ -72,6 +73,7 @@ export const CycleDataApi = {
 
     // Descriptions
     express.get(ApiEndPoint.CycleData.Descriptions.many(), AuthMiddleware.requireView, getDescription)
+    express.get(ApiEndPoint.CycleData.Descriptions.history(), AuthMiddleware.requireViewHistory, getDescriptionsHistory)
     express.put(ApiEndPoint.CycleData.Descriptions.many(), AuthMiddleware.requireEditDescriptions, upsertDescription)
     express.get(ApiEndPoint.CycleData.Descriptions.DataSources.many(), AuthMiddleware.requireView, getDataSources)
     express.delete(

From 486b6677f71b31702a23b1ab098bb4052ed4b8b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Fri, 31 Jan 2025 02:20:51 -0500
Subject: [PATCH 05/38] 4250 - Data History: Descriptions data sources
 comparison (Empty dataset) (#4301)

* 4250 - Data sources history: History buttons behavior

* 4250 - Data sources history: Rename useDataSourcesHistoryActivities hook

* 4250 - Data sources history: Add types file

* 4250 - Data sources history: show (empty) last approved diffs

* 4250 - Data sources history: increment diff indexes

---------

Co-authored-by: Mino Togna <minotogna@users.noreply.github.com>
---
 .../Toolbar/ButtonHistory/ButtonHistory.tsx   |  1 +
 .../Title/ButtonHistory/ButtonHistory.tsx     | 11 +++--
 .../DataSources/DataSources.tsx               | 11 +++--
 .../HistoryCompare/HistoryCompare.tsx         |  2 +-
 .../HistoryCompare/hooks/useChanges.ts        |  2 +-
 ....ts => useDataSourcesHistoryActivities.ts} |  7 +--
 .../useDataSourcesHistoryLastApproved.ts      | 45 +++++++++++++++++++
 .../DataSources/types.ts                      |  6 +++
 .../descriptions/getDescriptionsHistory.ts    |  2 +-
 9 files changed, 72 insertions(+), 15 deletions(-)
 rename src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/{useDataSourcesHistory.ts => useDataSourcesHistoryActivities.ts} (89%)
 create mode 100644 src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/useDataSourcesHistoryLastApproved.ts
 create mode 100644 src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/types.ts

diff --git a/src/client/components/PageLayout/Toolbar/ButtonHistory/ButtonHistory.tsx b/src/client/components/PageLayout/Toolbar/ButtonHistory/ButtonHistory.tsx
index b8edac1559..9d5f602154 100644
--- a/src/client/components/PageLayout/Toolbar/ButtonHistory/ButtonHistory.tsx
+++ b/src/client/components/PageLayout/Toolbar/ButtonHistory/ButtonHistory.tsx
@@ -21,6 +21,7 @@ const ButtonHistory: React.FC = () => {
     if (!historyActive && !locked) {
       dispatch(DataLockActions.toggleDataLock())
     }
+    dispatch(DataActions.resetHistoryActivities())
     dispatch(DataActions.toggleHistoryLastApproved())
   }, [dispatch, historyActive, locked])
 
diff --git a/src/client/pages/Section/Descriptions/CommentableDescription/Title/ButtonHistory/ButtonHistory.tsx b/src/client/pages/Section/Descriptions/CommentableDescription/Title/ButtonHistory/ButtonHistory.tsx
index 823f220434..04dabfb37d 100644
--- a/src/client/pages/Section/Descriptions/CommentableDescription/Title/ButtonHistory/ButtonHistory.tsx
+++ b/src/client/pages/Section/Descriptions/CommentableDescription/Title/ButtonHistory/ButtonHistory.tsx
@@ -5,7 +5,7 @@ import { Objects } from 'utils/objects'
 
 import { CommentableDescriptionName } from 'meta/assessment'
 
-import { useHistoryActivities, useHistoryActivitiesIsActive } from 'client/store/data'
+import { useHistoryActivities, useHistoryActivitiesIsActive, useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useCanViewHistory, useIsDescriptionEditable } from 'client/store/user/hooks'
 import Button, { ButtonSize, ButtonType } from 'client/components/Buttons/Button'
 import { useSectionContext } from 'client/pages/Section/context'
@@ -24,9 +24,12 @@ const ButtonHistory: React.FC<Props> = (props) => {
   const { sectionName } = useSectionContext()
   const editable = useIsDescriptionEditable({ sectionName, name: target })
   const loading = false // TODO: useLoading..()
-  const disabled = loading || editable
 
-  const historyActive = useHistoryActivitiesIsActive()
+  const historyLastApprovedActive = useHistoryLastApprovedIsActive()
+  const historyActivitiesActive = useHistoryActivitiesIsActive()
+
+  const disabled = loading || editable || historyLastApprovedActive
+
   const onClick = useToggleHistory({ target })
 
   const isDataSources = target === CommentableDescriptionName.dataSources
@@ -41,7 +44,7 @@ const ButtonHistory: React.FC<Props> = (props) => {
     <Button
       disabled={disabled}
       iconName="history"
-      inverse={!historyActive}
+      inverse={!historyActivitiesActive}
       label={t('history.history')}
       onClick={onClick}
       size={ButtonSize.xs}
diff --git a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/DataSources.tsx b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/DataSources.tsx
index 27ad64a320..7175f391a7 100644
--- a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/DataSources.tsx
+++ b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/DataSources.tsx
@@ -19,7 +19,8 @@ import DataSourceRow from 'client/pages/Section/Descriptions/NationalDataDescrip
 import HistoryCompare from 'client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare'
 
 import { useDataSourcesData } from './hooks/useDataSourcesData'
-import { useDataSourcesHistory } from './hooks/useDataSourcesHistory'
+import { useDataSourcesHistoryActivities } from './hooks/useDataSourcesHistoryActivities'
+import { useDataSourcesHistoryLastApproved } from './hooks/useDataSourcesHistoryLastApproved'
 import { useGetDataSourcesLinked } from './hooks/useGetDataSourcesLinked'
 
 type Props = {
@@ -36,7 +37,11 @@ export const DataSources: React.FC<Props> = (props: Props) => {
   const { sectionName } = useSectionContext()
   const { dataSources, text } = useDataSourcesData({ sectionName })
   const { dataSourcesLinked } = useGetDataSourcesLinked({ nationalData, sectionName })
-  const historyCompares = useDataSourcesHistory({ dataSources })
+
+  const historyLastApprovedCompares = useDataSourcesHistoryLastApproved({ dataSources })
+  const historyActivityCompares = useDataSourcesHistoryActivities({ dataSources })
+  const historyCompares = historyLastApprovedCompares ?? historyActivityCompares
+
   const canEdit = useCanEditDescription({ sectionName })
   const editable = useIsDescriptionEditable({ sectionName, name })
   const { empty } = useDescriptionErrorState({ name, sectionName })
@@ -83,7 +88,7 @@ export const DataSources: React.FC<Props> = (props: Props) => {
             {historyCompares &&
               historyCompares.map((historyCompare, i) => (
                 <HistoryCompare
-                  key={historyCompare.dataItem?.uuid ?? historyCompare.historyItem?.uuid}
+                  key={`${String(i)}-${historyCompare.dataItem?.uuid ?? historyCompare.historyItem?.uuid}`}
                   historyCompare={historyCompare}
                   lastRow={i === historyCompares.length - 1}
                   meta={nationalData.dataSources}
diff --git a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/HistoryCompare.tsx b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/HistoryCompare.tsx
index 278dcf5295..39295e6144 100644
--- a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/HistoryCompare.tsx
+++ b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/HistoryCompare.tsx
@@ -4,8 +4,8 @@ import { DataSourceDescription } from 'meta/assessment'
 
 import { DataRow } from 'client/components/DataGrid'
 import CellDiff from 'client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/CellDiff'
+import { DataSourceHistoryCompare } from 'client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/types'
 
-import { DataSourceHistoryCompare } from '../hooks/useDataSourcesHistory'
 import { useChanges } from './hooks/useChanges'
 
 type Props = {
diff --git a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/hooks/useChanges.ts b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/hooks/useChanges.ts
index 092610701e..08567a24ab 100644
--- a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/hooks/useChanges.ts
+++ b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/hooks/useChanges.ts
@@ -6,7 +6,7 @@ import { Change } from 'diff'
 
 import { DataSource, DataSourceDescription, DataSources } from 'meta/assessment'
 
-import { DataSourceHistoryCompare } from '../../hooks/useDataSourcesHistory'
+import { DataSourceHistoryCompare } from 'client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/types'
 
 type Props = {
   historyCompare: DataSourceHistoryCompare
diff --git a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/useDataSourcesHistory.ts b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/useDataSourcesHistoryActivities.ts
similarity index 89%
rename from src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/useDataSourcesHistory.ts
rename to src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/useDataSourcesHistoryActivities.ts
index 557058d3ee..628186df93 100644
--- a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/useDataSourcesHistory.ts
+++ b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/useDataSourcesHistoryActivities.ts
@@ -3,11 +3,8 @@ import { useMemo } from 'react'
 import { CommentableDescription, CommentableDescriptionName, DataSource } from 'meta/assessment'
 
 import { useHistoryActivitiesCompareItem } from 'client/store/data'
+import { DataSourceHistoryCompare } from 'client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/types'
 
-export type DataSourceHistoryCompare = {
-  dataItem?: DataSource
-  historyItem?: DataSource
-}
 type ActivityLogTarget = { description: CommentableDescription }
 
 type Props = {
@@ -15,7 +12,7 @@ type Props = {
 }
 type Returned = Array<DataSourceHistoryCompare> | undefined
 
-export const useDataSourcesHistory = (props: Props): Returned => {
+export const useDataSourcesHistoryActivities = (props: Props): Returned => {
   const { dataSources } = props
 
   const compareItem = useHistoryActivitiesCompareItem<ActivityLogTarget>(CommentableDescriptionName.dataSources)
diff --git a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/useDataSourcesHistoryLastApproved.ts b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/useDataSourcesHistoryLastApproved.ts
new file mode 100644
index 0000000000..0a146ba731
--- /dev/null
+++ b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/useDataSourcesHistoryLastApproved.ts
@@ -0,0 +1,45 @@
+import { useMemo } from 'react'
+
+import { CommentableDescriptionName, DataSource } from 'meta/assessment'
+
+import { useHistoryLastApprovedIsActive, useLastApprovedHistoryDescriptions } from 'client/store/data'
+import { DataSourceHistoryCompare } from 'client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/types'
+
+type Props = {
+  dataSources: Array<DataSource>
+}
+
+type Returned = Array<DataSourceHistoryCompare> | undefined
+
+export const useDataSourcesHistoryLastApproved = (props: Props): Returned => {
+  const { dataSources } = props
+
+  const lastApprovedHistoryDescriptions = useLastApprovedHistoryDescriptions()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  return useMemo<Returned>(() => {
+    if (!historyLastApprovedIsActive) return undefined
+
+    const dataSourcesHistory =
+      lastApprovedHistoryDescriptions?.[CommentableDescriptionName.dataSources]?.dataSources ?? []
+
+    const items: Returned = []
+
+    const dataLength = dataSources.length
+    const historyLength = dataSourcesHistory.length
+
+    let dataIndex = 0
+    let historyIndex = 0
+    for (let i = 0; i < Math.max(dataLength, historyLength); i += 1) {
+      const dataItem = dataSources[dataIndex]
+      // TODO: Handle non-empty history items by matching dataSources
+      const historyItem = dataSourcesHistory[historyIndex]
+
+      dataIndex += 1
+      historyIndex += 1
+      items.push({ dataItem, historyItem })
+    }
+
+    return items
+  }, [dataSources, historyLastApprovedIsActive, lastApprovedHistoryDescriptions])
+}
diff --git a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/types.ts b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/types.ts
new file mode 100644
index 0000000000..6db9ba346a
--- /dev/null
+++ b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/types.ts
@@ -0,0 +1,6 @@
+import { DataSource } from 'meta/assessment'
+
+export type DataSourceHistoryCompare = {
+  dataItem?: DataSource
+  historyItem?: DataSource
+}
diff --git a/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts b/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
index 1e341e18d9..490d461486 100644
--- a/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
+++ b/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
@@ -17,7 +17,7 @@ export const getDescriptionsHistory = async (req: Request, res: Response) => {
           // Example of expected output:
           // dataSources: {
           //   text: '',
-          //   dataSources: {},
+          //   dataSources: [],
           // },
           // generalComments: '',
           // nationalClassificationAndDefinitions: '',

From 3d3188ef698d437a019d269f2904c31b87f58714 Mon Sep 17 00:00:00 2001
From: Mino Togna <minotogna@users.noreply.github.com>
Date: Fri, 31 Jan 2025 16:06:22 +0100
Subject: [PATCH 06/38] 4313 - Data History auth: if (user is admin or
 reviewer) and status !== notStarted (#4314)

* 4313:Data History auth:if (user is admin or reviewer) and status !== notStarted

* 4313 - use Areas.getStatus
---
 src/meta/user/authorizer/index.ts | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/meta/user/authorizer/index.ts b/src/meta/user/authorizer/index.ts
index 02fba8c802..775afefce1 100644
--- a/src/meta/user/authorizer/index.ts
+++ b/src/meta/user/authorizer/index.ts
@@ -217,25 +217,16 @@ const canViewHistory = (props: {
 
 /**
  * canViewHistoryLastApproved:
- *
- * Reviewer: if country status = review
- * Administrator: if status >=review
- *
- * @param props
- * @param props.country
- * @param props.cycle
- * @param props.user
- * @returns boolean
+ * returns true if (user is admin or reviewer) and status !== notStarted
  */
 const canViewHistoryLastApproved = (props: { country: Country; cycle: Cycle; user: User }): boolean => {
   const { country, cycle, user } = props
-  const { status } = country?.props ?? {}
 
-  if (Users.isReviewer(user, country?.countryIso, cycle) && status === AssessmentStatus.review) return true
+  const status = Areas.getStatus(country)
 
   return (
-    Users.isAdministrator(user) &&
-    [AssessmentStatus.review, AssessmentStatus.approval, AssessmentStatus.accepted].includes(status)
+    (Users.isAdministrator(user) || Users.isReviewer(user, country?.countryIso, cycle)) &&
+    status !== AssessmentStatus.notStarted
   )
 }
 

From b6466b3af8acfda9b213e71e9dda628bcf327861 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Sorja?= <ping@mirosorja.com>
Date: Fri, 31 Jan 2025 18:59:45 +0200
Subject: [PATCH 07/38] 4251 - Data History: Data table (no ODP) comparison
 (Empty dataset)  (#4297)

* 4251 - Data history table UI

* 4251 - Data history table API

* 4251 - Data history table API (sample data)

* 4251 - Fetch data and populate store

* 4251 - Validation is hidden when history is active

* 4251 - useLastApprovedHistoryTableData: return RecordAssessmentData

* 4251 - use utils to get NodeValue

* 4251 - API empty

* 4251 - API empty

* 4251 - Merge data

* 4251 - Simplify

* 4251 - dont check print

* 4251 - use RecordAssessmentDatas mergeData

---------

Co-authored-by: Mino Togna <minotogna@users.noreply.github.com>
---
 .../DataTable/Table/RowData/Cell/Cell.tsx     |  6 ++-
 .../Table/RowData/Cell/History/History.tsx    | 49 +++++++++++++++++++
 .../Table/RowData/Cell/History/index.ts       |  1 +
 .../Table/RowData/Cell/hooks/useClassName.ts  | 10 +++-
 .../RowData/Cell/hooks/useErrorMessages.tsx   |  5 +-
 src/client/pages/Section/Section.tsx          |  2 +
 .../Section/hooks/useGetTableDataHistory.ts   | 30 ++++++++++++
 .../store/data/actions/getTableDataHistory.ts | 27 ++++++++++
 src/client/store/data/actions/index.ts        |  2 +
 .../data/extraReducers/getTableDataHistory.ts | 20 ++++++++
 .../hooks/useLastApprovedHistoryTableData.ts  |  8 +++
 src/client/store/data/selectors/index.ts      | 23 +++++----
 src/client/store/data/slice.ts                |  3 ++
 src/meta/api/endpoint/ApiEndPoint.ts          |  1 +
 src/server/api/cycleData/index.ts             |  2 +
 .../cycleData/table/getTableDataHistory.ts    | 19 +++++++
 16 files changed, 191 insertions(+), 17 deletions(-)
 create mode 100644 src/client/pages/Section/DataTable/Table/RowData/Cell/History/History.tsx
 create mode 100644 src/client/pages/Section/DataTable/Table/RowData/Cell/History/index.ts
 create mode 100644 src/client/pages/Section/hooks/useGetTableDataHistory.ts
 create mode 100644 src/client/store/data/actions/getTableDataHistory.ts
 create mode 100644 src/client/store/data/extraReducers/getTableDataHistory.ts
 create mode 100644 src/client/store/data/hooks/useLastApprovedHistoryTableData.ts
 create mode 100644 src/server/api/cycleData/table/getTableDataHistory.ts

diff --git a/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx b/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
index 8603e9569d..e1c69440e3 100644
--- a/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
+++ b/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
@@ -6,7 +6,7 @@ import { RecordAssessmentData } from 'meta/data'
 import { TooltipId } from 'meta/tooltip'
 
 import { useCycle } from 'client/store/assessment'
-import { useNodeValueValidation } from 'client/store/data'
+import { useHistoryLastApprovedIsActive, useNodeValueValidation } from 'client/store/data'
 import { DataCell } from 'client/components/DataGrid'
 
 import { useClassName } from './hooks/useClassName'
@@ -15,6 +15,7 @@ import { useNodeValue } from './hooks/useNodeValue'
 import useOnChange from './hooks/useOnChange'
 import Calculated from './Calculated'
 import Flags from './Flags'
+import History from './History'
 import Number from './Number'
 import Placeholder from './Placeholder'
 import { PropsCell } from './props'
@@ -77,8 +78,9 @@ const Cell: React.FC<Props> = (props) => {
   const errorMessages = useErrorMessages({ validation })
   const className = useClassName({ col, cycle, row, validation })
 
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
   const disabled = disabledProps || !!nodeValue?.odpId || Cols.hasLinkedNodes({ col, cycle })
-  const Component = Components[col.props.colType]
+  const Component = historyLastApprovedIsActive ? History : Components[col.props.colType]
   const { gridColumn, gridRow, ...style } = Cols.getStyle({ col, cycle })
   const isInput = ![ColType.calculated, ColType.placeholder].includes(col.props.colType)
 
diff --git a/src/client/pages/Section/DataTable/Table/RowData/Cell/History/History.tsx b/src/client/pages/Section/DataTable/Table/RowData/Cell/History/History.tsx
new file mode 100644
index 0000000000..9ac3e660e0
--- /dev/null
+++ b/src/client/pages/Section/DataTable/Table/RowData/Cell/History/History.tsx
@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react'
+
+import * as Diff from 'diff'
+import { Change } from 'diff'
+
+import { CountryIso } from 'meta/area'
+import { NodeValue } from 'meta/assessment'
+import { RecordAssessmentDatas } from 'meta/data'
+
+import { useLastApprovedHistoryTableData } from 'client/store/data/hooks/useLastApprovedHistoryTableData'
+import { useCountryRouteParams } from 'client/hooks/useRouteParams'
+import DiffText from 'client/components/DiffText'
+
+import { PropsCell } from '../props'
+
+type Returned = Array<Change>
+
+const useChanges = (props: { nodeValueA: NodeValue; nodeValueB: NodeValue }): Returned => {
+  const { nodeValueA, nodeValueB } = props
+
+  return useMemo<Returned>(() => {
+    const textA = nodeValueA?.raw ?? ''
+    const textB = nodeValueB?.raw ?? ''
+
+    const changes = Diff.diffWords(textA, textB, {
+      ignoreCase: false,
+    })
+
+    return changes
+  }, [nodeValueA.raw, nodeValueB.raw])
+}
+
+const History: React.FC<PropsCell> = (props) => {
+  const { nodeValue, table, col, row } = props
+  const { assessmentName, cycleName, countryIso } = useCountryRouteParams<CountryIso>()
+  const tableName = table.props.name
+  const { colName } = col.props
+  const { variableName } = row.props
+  const data = useLastApprovedHistoryTableData()
+  const nodeValueProps = { assessmentName, cycleName, countryIso, tableName, colName, variableName, data }
+  const nodeValueA = RecordAssessmentDatas.getNodeValue(nodeValueProps) ?? ({} as NodeValue)
+  const nodeValueB = nodeValue ?? ({} as NodeValue)
+
+  const changes = useChanges({ nodeValueA, nodeValueB })
+
+  return <DiffText changes={changes} />
+}
+
+export default History
diff --git a/src/client/pages/Section/DataTable/Table/RowData/Cell/History/index.ts b/src/client/pages/Section/DataTable/Table/RowData/Cell/History/index.ts
new file mode 100644
index 0000000000..b636a5c8e7
--- /dev/null
+++ b/src/client/pages/Section/DataTable/Table/RowData/Cell/History/index.ts
@@ -0,0 +1 @@
+export { default } from './History'
diff --git a/src/client/pages/Section/DataTable/Table/RowData/Cell/hooks/useClassName.ts b/src/client/pages/Section/DataTable/Table/RowData/Cell/hooks/useClassName.ts
index 8641d3224b..1d56acda02 100644
--- a/src/client/pages/Section/DataTable/Table/RowData/Cell/hooks/useClassName.ts
+++ b/src/client/pages/Section/DataTable/Table/RowData/Cell/hooks/useClassName.ts
@@ -4,6 +4,8 @@ import classNames from 'classnames'
 
 import { Col, Cols, ColType, Cycle, NodeValueValidation, Row } from 'meta/assessment'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
+
 type Props = {
   col: Col
   cycle: Cycle
@@ -13,6 +15,7 @@ type Props = {
 
 export const useClassName = (props: Props): string => {
   const { cycle, col, row, validation } = props
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
 
   return useMemo<string>(() => {
     const { colType } = col.props
@@ -23,9 +26,12 @@ export const useClassName = (props: Props): string => {
     const isCalculatedInput = isCalculated && colType !== ColType.calculated
     const isReadOnly = Cols.isReadOnly({ cycle, col, row }) && !isCalculatedInput
 
+    // Validation is hidden when history is active
+    const validationError = !historyLastApprovedIsActive && !validation.valid
+
     return classNames(
       'table-grid__data-cell',
-      { 'validation-error': !validation.valid },
+      { 'validation-error': validationError },
       {
         'calculated-input': isCalculatedInput && !isTextInput,
         'category header left': isPlaceholder,
@@ -33,5 +39,5 @@ export const useClassName = (props: Props): string => {
         readonly: isReadOnly,
       }
     )
-  }, [col, cycle, row, validation])
+  }, [col, cycle, row, validation, historyLastApprovedIsActive])
 }
diff --git a/src/client/pages/Section/DataTable/Table/RowData/Cell/hooks/useErrorMessages.tsx b/src/client/pages/Section/DataTable/Table/RowData/Cell/hooks/useErrorMessages.tsx
index 449a5dcea0..90eacf3b24 100644
--- a/src/client/pages/Section/DataTable/Table/RowData/Cell/hooks/useErrorMessages.tsx
+++ b/src/client/pages/Section/DataTable/Table/RowData/Cell/hooks/useErrorMessages.tsx
@@ -4,6 +4,8 @@ import { TFunction, useTranslation } from 'react-i18next'
 
 import { NodeValueValidation, NodeValueValidationMessageParam } from 'meta/assessment'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
+
 type Props = {
   validation: NodeValueValidation
 }
@@ -19,10 +21,11 @@ export default (props: Props): string | undefined => {
   const { validation } = props
 
   const { t } = useTranslation()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
 
   const { valid, messages = [] } = validation
 
-  if (valid || messages.length === 0) {
+  if (historyLastApprovedIsActive || valid || messages.length === 0) {
     return undefined
   }
 
diff --git a/src/client/pages/Section/Section.tsx b/src/client/pages/Section/Section.tsx
index ccd5d97062..eaf403cd40 100644
--- a/src/client/pages/Section/Section.tsx
+++ b/src/client/pages/Section/Section.tsx
@@ -18,6 +18,7 @@ import Introduction from 'client/pages/Section/Introduction'
 import { useGetDescriptionHistoryValues } from './hooks/useGetDescriptionHistoryValues'
 import { useGetDescriptionValues } from './hooks/useGetDescriptionValues'
 import { useGetTableData } from './hooks/useGetTableData'
+import { useGetTableDataHistory } from './hooks/useGetTableDataHistory'
 import { useListenNodeUpdates } from './hooks/useListenNodeUpdates'
 import DataTable from './DataTable'
 import Descriptions, { GeneralComments } from './Descriptions'
@@ -37,6 +38,7 @@ const Section: React.FC<Props> = (props: Props) => {
   const subSection = useSection(sectionProp)
   const tableSections = useTableSections({ sectionName: subSection?.props.name })
   useGetTableData({ sectionName: subSection?.props.name })
+  useGetTableDataHistory({ sectionName: subSection?.props.name })
   useGetDescriptionValues({ sectionName: subSection?.props.name })
   useGetDescriptionHistoryValues({ sectionName: subSection?.props.name })
   const canEditTableData = useIsEditTableDataEnabled(sectionProp)
diff --git a/src/client/pages/Section/hooks/useGetTableDataHistory.ts b/src/client/pages/Section/hooks/useGetTableDataHistory.ts
new file mode 100644
index 0000000000..94fb9751dc
--- /dev/null
+++ b/src/client/pages/Section/hooks/useGetTableDataHistory.ts
@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+
+import { CountryIso } from 'meta/area'
+import { SectionName } from 'meta/assessment'
+
+import { useAppDispatch } from 'client/store'
+import { DataActions, useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useTableSections } from 'client/store/metadata'
+import { useCountryRouteParams } from 'client/hooks/useRouteParams'
+
+type Props = { sectionName: SectionName }
+
+export const useGetTableDataHistory = (props: Props): void => {
+  const { sectionName } = props
+
+  const dispatch = useAppDispatch()
+  const { assessmentName, cycleName, countryIso: _countryIso } = useCountryRouteParams()
+  const countryIso = _countryIso as CountryIso
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  const tableSections = useTableSections({ sectionName })
+  const tableNames = tableSections.flatMap((tableSection) => tableSection.tables.flatMap((table) => table.props.name))
+
+  useEffect(() => {
+    if (historyLastApprovedIsActive) {
+      const getParams = { countryIso, assessmentName, cycleName, sectionName, tableNames }
+      dispatch(DataActions.getTableDataHistory(getParams))
+    }
+  }, [assessmentName, countryIso, cycleName, dispatch, historyLastApprovedIsActive, sectionName, tableNames])
+}
diff --git a/src/client/store/data/actions/getTableDataHistory.ts b/src/client/store/data/actions/getTableDataHistory.ts
new file mode 100644
index 0000000000..e7f322f45b
--- /dev/null
+++ b/src/client/store/data/actions/getTableDataHistory.ts
@@ -0,0 +1,27 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import axios from 'axios'
+
+import { ApiEndPoint } from 'meta/api/endpoint'
+import { SectionName } from 'meta/assessment'
+import { RecordAssessmentData } from 'meta/data'
+
+import { Props } from 'client/store/data/actions/getTableDataProps'
+
+export const getTableDataHistory = createAsyncThunk<RecordAssessmentData, Props & { sectionName: SectionName }>(
+  'data/tableData/history/get',
+  async (props) => {
+    const { assessmentName, countryISOs, countryIso, cycleName, tableNames, sectionName } = props
+
+    const params = {
+      assessmentName,
+      countryIso,
+      cycleName,
+      tableNames,
+      countryISOs: countryISOs ?? [countryIso],
+      sectionName,
+    }
+    const { data } = await axios.get(ApiEndPoint.CycleData.Table.tableDataHistory(), { params })
+
+    return data
+  }
+)
diff --git a/src/client/store/data/actions/index.ts b/src/client/store/data/actions/index.ts
index d5f727b7e0..9a99d1e9a7 100644
--- a/src/client/store/data/actions/index.ts
+++ b/src/client/store/data/actions/index.ts
@@ -12,6 +12,7 @@ import { getLinkedDataSources } from './getLinkedDataSources'
 import { getNodeValuesEstimations } from './getNodeValuesEstimations'
 import { getODPLastUpdatedTimestamp } from './getODPLastUpdatedTimestamp'
 import { getTableData } from './getTableData'
+import { getTableDataHistory } from './getTableDataHistory'
 import { postEstimate } from './postEstimate'
 import { setNodeValues } from './setNodeValues'
 import { updateContact } from './updateContact'
@@ -24,6 +25,7 @@ export const DataActions = {
   setNodeValues,
   clearTableData,
   getTableData,
+  getTableDataHistory,
   updateNodeValues,
   getNodeValuesEstimations,
 
diff --git a/src/client/store/data/extraReducers/getTableDataHistory.ts b/src/client/store/data/extraReducers/getTableDataHistory.ts
new file mode 100644
index 0000000000..2f1d44b795
--- /dev/null
+++ b/src/client/store/data/extraReducers/getTableDataHistory.ts
@@ -0,0 +1,20 @@
+import { ActionReducerMapBuilder, createSelector } from '@reduxjs/toolkit'
+import { Objects } from 'utils/objects'
+
+import { RecordAssessmentDatas } from 'meta/data'
+
+import { getTableDataHistory } from 'client/store/data/actions/getTableDataHistory'
+import { DataState } from 'client/store/data/state'
+
+const _getTableData = createSelector(
+  (state: DataState) => state.history,
+  (history) => history.lastApproved.tableData
+)
+
+export const getTableDataHistoryReducer = (builder: ActionReducerMapBuilder<DataState>) =>
+  builder.addCase(getTableDataHistory.fulfilled, (state, { payload }) => {
+    const path = ['history', 'lastApproved', 'tableData']
+    const tableData = _getTableData(state) ?? {}
+    const value = RecordAssessmentDatas.mergeData({ tableData, newTableData: payload })
+    Objects.setInPath({ obj: state, path, value })
+  })
diff --git a/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts b/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts
new file mode 100644
index 0000000000..a7d6f7f7a2
--- /dev/null
+++ b/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts
@@ -0,0 +1,8 @@
+import { RecordAssessmentData } from 'meta/data'
+
+import { useAppSelector } from 'client/store'
+import { DataSelector } from 'client/store/data/selectors'
+
+export const useLastApprovedHistoryTableData = (): RecordAssessmentData => {
+  return useAppSelector((state) => DataSelector.History.getLastApprovedTableData(state))
+}
diff --git a/src/client/store/data/selectors/index.ts b/src/client/store/data/selectors/index.ts
index 09e669211d..e083c0e0b9 100644
--- a/src/client/store/data/selectors/index.ts
+++ b/src/client/store/data/selectors/index.ts
@@ -25,23 +25,20 @@ const getHistoryItems = createSelector(getHistoryActivities, (history) => histor
 const getHistoryLastApproved = createSelector(getHistory, (history) => history.lastApproved ?? {})
 const isHistoryLastApprovedActive = createSelector(getHistoryLastApproved, (history) => Boolean(history?.active))
 
+type Params = {
+  assessmentName: AssessmentName
+  cycleName: CycleName
+  countryIso: CountryIso
+}
+
 const getLastApprovedDescriptions = createSelector(
-  [
-    getHistoryLastApproved,
-    (
-      _,
-      params: {
-        assessmentName: AssessmentName
-        cycleName: CycleName
-        countryIso: CountryIso
-        sectionName: SectionName
-      }
-    ) => params,
-  ],
+  [getHistoryLastApproved, (_, params: Params & { sectionName: SectionName }) => params],
   (lastApproved, { assessmentName, cycleName, countryIso, sectionName }) =>
     lastApproved?.descriptions?.[assessmentName]?.[cycleName]?.[countryIso]?.[sectionName]
 )
 
+const getLastApprovedTableData = createSelector(getHistoryLastApproved, (lastApproved) => lastApproved?.tableData)
+
 export const DataSelector = {
   History: {
     getHistory,
@@ -53,5 +50,7 @@ export const DataSelector = {
     isHistoryLastApprovedActive,
     // descriptions
     getLastApprovedDescriptions,
+    // tabledata
+    getLastApprovedTableData,
   },
 }
diff --git a/src/client/store/data/slice.ts b/src/client/store/data/slice.ts
index 8bce572a5c..cecf88be9b 100644
--- a/src/client/store/data/slice.ts
+++ b/src/client/store/data/slice.ts
@@ -5,6 +5,7 @@ import { CommentableDescriptionName } from 'meta/assessment'
 import { ContactNode } from 'meta/cycleData'
 import { RecordAssessmentDatas } from 'meta/data'
 
+import { getTableDataHistoryReducer } from 'client/store/data/extraReducers/getTableDataHistory'
 import { DataState, TableDataStatus } from 'client/store/data/state'
 
 import { createContact } from './actions/createContact'
@@ -216,7 +217,9 @@ export const DataSlice = createSlice({
       contacts.push(contactAction)
     })
 
+    // == History reducers
     getDescriptionsHistoryReducer(builder)
+    getTableDataHistoryReducer(builder)
   },
 })
 
diff --git a/src/meta/api/endpoint/ApiEndPoint.ts b/src/meta/api/endpoint/ApiEndPoint.ts
index fb470ee52e..47357403a6 100644
--- a/src/meta/api/endpoint/ApiEndPoint.ts
+++ b/src/meta/api/endpoint/ApiEndPoint.ts
@@ -118,6 +118,7 @@ export const ApiEndPoint = {
       estimate: () => apiPath('cycle-data', 'table', 'estimate'),
       nodes: () => apiPath('cycle-data', 'table', 'nodes'),
       tableData: () => apiPath('cycle-data', 'table', 'table-data'),
+      tableDataHistory: () => apiPath('cycle-data', 'table', 'table-data', 'history'),
       tableClear: () => apiPath('cycle-data', 'table', 'clear'),
       nodeValuesEstimations: () => apiPath('cycle-data', 'table', 'node-values-estimations'),
     },
diff --git a/src/server/api/cycleData/index.ts b/src/server/api/cycleData/index.ts
index d0350ec7cb..d00f4c504d 100644
--- a/src/server/api/cycleData/index.ts
+++ b/src/server/api/cycleData/index.ts
@@ -51,12 +51,14 @@ import { clearTable } from './table/clearTable'
 import { estimateValues } from './table/estimateValues'
 import { getNodeValuesEstimations } from './table/getNodeValuesEstimations'
 import { getTableData } from './table/getTableData'
+import { getTableDataHistory } from './table/getTableDataHistory'
 import { persistNodeValues } from './table/persistNodeValues'
 
 export const CycleDataApi = {
   init: (express: Express): void => {
     // Table
     express.get(ApiEndPoint.CycleData.Table.tableData(), AuthMiddleware.requireView, getTableData)
+    express.get(ApiEndPoint.CycleData.Table.tableDataHistory(), AuthMiddleware.requireViewHistory, getTableDataHistory)
     express.get(
       ApiEndPoint.CycleData.Table.nodeValuesEstimations(),
       AuthMiddleware.requireEditTableData,
diff --git a/src/server/api/cycleData/table/getTableDataHistory.ts b/src/server/api/cycleData/table/getTableDataHistory.ts
new file mode 100644
index 0000000000..27353f4587
--- /dev/null
+++ b/src/server/api/cycleData/table/getTableDataHistory.ts
@@ -0,0 +1,19 @@
+import { Response } from 'express'
+
+import { CycleDataRequest } from 'meta/api/request'
+import { CountryIso } from 'meta/area'
+
+import Requests from 'server/utils/requests'
+
+type GetTableDataRequest = CycleDataRequest<{
+  tableNames: Array<string>
+  countryISOs: Array<CountryIso>
+}>
+
+export const getTableDataHistory = async (_req: GetTableDataRequest, res: Response) => {
+  try {
+    Requests.send(res, {})
+  } catch (e) {
+    Requests.sendErr(res, e)
+  }
+}

From 466b9c060649abfd3e57c521202f0ff0b519e5c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Sorja?= <ping@mirosorja.com>
Date: Wed, 5 Feb 2025 12:20:37 +0200
Subject: [PATCH 08/38] 4304 - Data History: Data table (no ODP) comparison
 (Prev cycle) (#4321)

* 4304 - hide validations when history active

* 4304 - fix padding for calculated cells

* 4304 - Cycles: introduce getPreviousCycle

* 4304 - API/table/history: return previous cycleData

* 4304 - fix application crash on null value

* 4304 - history/table: formatting

* 4304 - clean code

* 4304 - deepscan

* 4304 - Cols: isNumeric

* 4304 - History: clean up and handle select options translation

* 4304 - PropsGetTableData

* 4304 - history/lastApproved: HistoryLastApprovedInfo | undefined

* 4304 - API/getTableDataLastApproved

* 4304 - use classNames

* 4304 - remove comment

* 4304 - use getPreviousCycle

* 4321 - fix history cell style

---------

Co-authored-by: Mino Togna <mino.togna@gmail.com>
---
 .../Table/DataValidations/DataValidations.tsx |  8 +--
 .../Table/RowData/Cell/History/History.tsx    | 52 ++++++---------
 .../RowData/Cell/History/hooks/useChanges.tsx | 66 +++++++++++++++++++
 .../HistoryCompare/hooks/useChanges.ts        |  6 +-
 .../hooks/useLastApprovedHistoryTableData.ts  | 24 ++++++-
 src/meta/assessment/cols.ts                   |  5 ++
 src/meta/assessment/cycles.ts                 |  7 ++
 .../cycleData/table/getTableDataHistory.ts    | 19 ++++--
 .../controller/cycleData/getTableData.ts      |  8 ++-
 .../cycleData/history/lastApproved/index.ts   | 17 +++--
 .../tableData/getAggregatedTableData.ts       |  4 +-
 .../tableData/getTableDataLastApproved.ts     | 51 ++++++++++++++
 .../cycleData/tableData/getTablesCondition.ts |  4 +-
 .../controller/cycleData/tableData/index.ts   |  2 +
 .../controller/cycleData/tableData/props.ts   |  2 +-
 15 files changed, 222 insertions(+), 53 deletions(-)
 create mode 100644 src/client/pages/Section/DataTable/Table/RowData/Cell/History/hooks/useChanges.tsx
 create mode 100644 src/server/controller/cycleData/tableData/getTableDataLastApproved.ts

diff --git a/src/client/pages/Section/DataTable/Table/DataValidations/DataValidations.tsx b/src/client/pages/Section/DataTable/Table/DataValidations/DataValidations.tsx
index 6f7a509e5e..0bda26bfe4 100644
--- a/src/client/pages/Section/DataTable/Table/DataValidations/DataValidations.tsx
+++ b/src/client/pages/Section/DataTable/Table/DataValidations/DataValidations.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { Table } from 'meta/assessment'
 
 import { useCycle } from 'client/store/assessment'
-import { useTableHasErrors } from 'client/store/data'
+import { useHistoryLastApprovedIsActive, useTableHasErrors } from 'client/store/data'
 import Icon from 'client/components/Icon'
 
 type Props = {
@@ -18,10 +18,10 @@ const DataValidations: React.FC<Props> = (props) => {
   const { t } = useTranslation()
   const cycle = useCycle()
   const hasErrors = useTableHasErrors({ table })
+  const historyActive = useHistoryLastApprovedIsActive()
 
   const disableErrorMessage = table.props.disableErrorMessage?.[cycle.uuid] === true
-
-  if (!hasErrors) {
+  if (!hasErrors || historyActive) {
     return null
   }
 
@@ -30,7 +30,7 @@ const DataValidations: React.FC<Props> = (props) => {
 
   return (
     <div className="data-validations">
-      <Icon name="alert" className="icon-middle" />
+      <Icon className="icon-middle" name="alert" />
 
       {message}
     </div>
diff --git a/src/client/pages/Section/DataTable/Table/RowData/Cell/History/History.tsx b/src/client/pages/Section/DataTable/Table/RowData/Cell/History/History.tsx
index 9ac3e660e0..d6a9c84554 100644
--- a/src/client/pages/Section/DataTable/Table/RowData/Cell/History/History.tsx
+++ b/src/client/pages/Section/DataTable/Table/RowData/Cell/History/History.tsx
@@ -1,49 +1,39 @@
 import React, { useMemo } from 'react'
 
-import * as Diff from 'diff'
-import { Change } from 'diff'
+import classNames from 'classnames'
 
 import { CountryIso } from 'meta/area'
-import { NodeValue } from 'meta/assessment'
-import { RecordAssessmentDatas } from 'meta/data'
+import { Cols } from 'meta/assessment'
 
-import { useLastApprovedHistoryTableData } from 'client/store/data/hooks/useLastApprovedHistoryTableData'
+import { useLastApprovedHistoryNodeValue } from 'client/store/data/hooks/useLastApprovedHistoryTableData'
 import { useCountryRouteParams } from 'client/hooks/useRouteParams'
 import DiffText from 'client/components/DiffText'
 
 import { PropsCell } from '../props'
-
-type Returned = Array<Change>
-
-const useChanges = (props: { nodeValueA: NodeValue; nodeValueB: NodeValue }): Returned => {
-  const { nodeValueA, nodeValueB } = props
-
-  return useMemo<Returned>(() => {
-    const textA = nodeValueA?.raw ?? ''
-    const textB = nodeValueB?.raw ?? ''
-
-    const changes = Diff.diffWords(textA, textB, {
-      ignoreCase: false,
-    })
-
-    return changes
-  }, [nodeValueA.raw, nodeValueB.raw])
-}
+import { useChanges } from './hooks/useChanges'
 
 const History: React.FC<PropsCell> = (props) => {
-  const { nodeValue, table, col, row } = props
-  const { assessmentName, cycleName, countryIso } = useCountryRouteParams<CountryIso>()
-  const tableName = table.props.name
+  const { nodeValue = { raw: '' }, table, col, row } = props
+  const { name: tableName } = table.props
   const { colName } = col.props
   const { variableName } = row.props
-  const data = useLastApprovedHistoryTableData()
-  const nodeValueProps = { assessmentName, cycleName, countryIso, tableName, colName, variableName, data }
-  const nodeValueA = RecordAssessmentDatas.getNodeValue(nodeValueProps) ?? ({} as NodeValue)
-  const nodeValueB = nodeValue ?? ({} as NodeValue)
 
-  const changes = useChanges({ nodeValueA, nodeValueB })
+  const { assessmentName, cycleName, countryIso } = useCountryRouteParams<CountryIso>()
+  const _props = { assessmentName, cycleName, countryIso, tableName, colName, variableName }
+  const nodeValueA = useLastApprovedHistoryNodeValue(_props)
+  const changes = useChanges({ nodeValueA, nodeValueB: nodeValue, row, col })
+
+  const className = useMemo<string>(() => {
+    const numeric = Cols.isNumeric(col)
+    const calculated = Cols.isCalculated({ col, row })
+    return classNames('disabled', {
+      'input-text': !calculated,
+      'table-grid__data-cell-input-text': !numeric,
+      'table-grid__data-cell-input-number': numeric,
+    })
+  }, [col, row])
 
-  return <DiffText changes={changes} />
+  return <DiffText changes={changes} className={className} />
 }
 
 export default History
diff --git a/src/client/pages/Section/DataTable/Table/RowData/Cell/History/hooks/useChanges.tsx b/src/client/pages/Section/DataTable/Table/RowData/Cell/History/hooks/useChanges.tsx
new file mode 100644
index 0000000000..9cd8108404
--- /dev/null
+++ b/src/client/pages/Section/DataTable/Table/RowData/Cell/History/hooks/useChanges.tsx
@@ -0,0 +1,66 @@
+import { useMemo } from 'react'
+import { TFunction, useTranslation } from 'react-i18next'
+
+import * as Diff from 'diff'
+import { Change } from 'diff'
+import { Numbers } from 'utils/numbers'
+import { Objects } from 'utils/objects'
+
+import { Col, Cols, ColType, Cycle, NodeValue, Row } from 'meta/assessment'
+
+import { useCycle } from 'client/store/assessment'
+
+type Returned = Array<Change>
+
+interface FormatValueProps {
+  nodeValue: NodeValue
+  isNumeric: boolean
+  row: Row
+  col: Col
+  cycle: Cycle
+  t: TFunction
+}
+
+const _formatSelectValue = (nodeValue: NodeValue, col: Col, cycle: Cycle, t: TFunction): string => {
+  const { labelKeyPrefix } = Cols.getSelectProps({ cycle, col })
+  const { raw } = nodeValue
+  if (Array.isArray(raw)) {
+    return raw.map((value) => t(`${labelKeyPrefix}.${value}`)).join(', ')
+  }
+  return t(`${labelKeyPrefix}.${raw}`)
+}
+
+const _formatValue = (props: FormatValueProps): string => {
+  const { nodeValue, isNumeric, row, col, cycle, t } = props
+  if (Objects.isEmpty(nodeValue?.raw)) return ''
+  if (isNumeric) {
+    const bigNumber = Numbers.toBigNumber(nodeValue.raw)
+    return Numbers.format(bigNumber, row.props?.format?.integer ? 0 : 2).toString()
+  }
+  if (col.props.colType === ColType.select) {
+    return _formatSelectValue(nodeValue, col, cycle, t)
+  }
+  return nodeValue?.raw ?? ''
+}
+
+interface Props {
+  nodeValueA: NodeValue
+  nodeValueB: NodeValue
+  row: Row
+  col: Col
+}
+
+export const useChanges = (props: Props): Returned => {
+  const { nodeValueA, nodeValueB, row, col } = props
+  const { t } = useTranslation()
+  const cycle = useCycle()
+
+  const isNumeric = useMemo(() => Cols.isNumeric(col), [col])
+
+  return useMemo<Returned>(() => {
+    const textA = _formatValue({ nodeValue: nodeValueA, isNumeric, row, col, cycle, t })
+    const textB = _formatValue({ nodeValue: nodeValueB, isNumeric, row, col, cycle, t })
+
+    return Diff.diffLines(textA, textB, { ignoreCase: false })
+  }, [nodeValueA, nodeValueB, isNumeric, row, t, cycle, col])
+}
diff --git a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/hooks/useChanges.ts b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/hooks/useChanges.ts
index 08567a24ab..2eb8a83439 100644
--- a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/hooks/useChanges.ts
+++ b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/hooks/useChanges.ts
@@ -56,12 +56,14 @@ export const useChanges = (props: Props): Returned => {
     // reference
     const referenceData = _getHtmlTextContent(dataItem?.reference)
     const referenceHistory = _getHtmlTextContent(historyItem?.reference)
-    const reference = Diff.diffChars(referenceHistory, referenceData)
+    const reference = Diff.diffChars(referenceHistory ?? '', referenceData ?? '')
 
     // type
     const typeData = _getType(dataItem)
     const typeHistory = _getType(historyItem)
-    const type = typeOfDataSourceText ? Diff.diffChars(typeHistory, typeData) : Diff.diffLines(typeHistory, typeData)
+    const type = typeOfDataSourceText
+      ? Diff.diffChars(typeHistory ?? '', typeData ?? '')
+      : Diff.diffLines(typeHistory ?? '', typeData ?? '')
 
     // variables
     const variablesData = variablesSelect ? _getVariablesText(dataItem?.variables) : dataItem?.variables?.at(0)
diff --git a/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts b/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts
index a7d6f7f7a2..a214cbe72b 100644
--- a/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts
+++ b/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts
@@ -1,8 +1,30 @@
-import { RecordAssessmentData } from 'meta/data'
+import { useMemo } from 'react'
+
+import { CountryIso } from 'meta/area'
+import { AssessmentName, ColName, CycleName, NodeValue, TableName, VariableName } from 'meta/assessment'
+import { RecordAssessmentData, RecordAssessmentDatas } from 'meta/data'
 
 import { useAppSelector } from 'client/store'
 import { DataSelector } from 'client/store/data/selectors'
 
+type PropsNodeValue = {
+  assessmentName: AssessmentName
+  cycleName: CycleName
+  countryIso: CountryIso
+  tableName: TableName
+  colName: ColName
+  variableName: VariableName
+}
 export const useLastApprovedHistoryTableData = (): RecordAssessmentData => {
   return useAppSelector((state) => DataSelector.History.getLastApprovedTableData(state))
 }
+
+export const useLastApprovedHistoryNodeValue = (props: PropsNodeValue): NodeValue => {
+  const { assessmentName, cycleName, countryIso, tableName, colName, variableName } = props
+  const data = useLastApprovedHistoryTableData()
+
+  return useMemo<NodeValue>(() => {
+    const nodeValueProps = { assessmentName, cycleName, countryIso, tableName, colName, variableName, data }
+    return RecordAssessmentDatas.getNodeValue(nodeValueProps) ?? ({} as NodeValue)
+  }, [assessmentName, colName, countryIso, cycleName, data, tableName, variableName])
+}
diff --git a/src/meta/assessment/cols.ts b/src/meta/assessment/cols.ts
index 768589f064..1902a84942 100644
--- a/src/meta/assessment/cols.ts
+++ b/src/meta/assessment/cols.ts
@@ -122,6 +122,10 @@ const getSelectOptions = (props: { cycle: Cycle; col: Col }): Array<ColSelectOpt
   throw new Error(`Unable to get col options. col: ${JSON.stringify(props.col)}`)
 }
 
+const isNumeric = (col: Col): boolean => {
+  return [ColType.integer, ColType.decimal, ColType.calculated].includes(col.props.colType)
+}
+
 export const Cols = {
   cloneProps,
   getCalculateFn,
@@ -133,5 +137,6 @@ export const Cols = {
   getStyle,
   hasLinkedNodes,
   isCalculated,
+  isNumeric,
   isReadOnly,
 }
diff --git a/src/meta/assessment/cycles.ts b/src/meta/assessment/cycles.ts
index e74fbf48f2..c99ff18e29 100644
--- a/src/meta/assessment/cycles.ts
+++ b/src/meta/assessment/cycles.ts
@@ -1,9 +1,16 @@
+import { Assessment } from './assessment'
 import { Cycle, CycleStatus } from './cycle'
 
 const isPublished = (cycle: Cycle): boolean => {
   return cycle.props.status === CycleStatus.published
 }
 
+const getPreviousCycle = (props: { assessment: Assessment; cycle: Cycle }): Cycle | undefined => {
+  const { assessment, cycle } = props
+  return assessment.cycles.find((c) => c.uuid === cycle.cycleUuidSource)
+}
+
 export const Cycles = {
   isPublished,
+  getPreviousCycle,
 }
diff --git a/src/server/api/cycleData/table/getTableDataHistory.ts b/src/server/api/cycleData/table/getTableDataHistory.ts
index 27353f4587..d08fb8458b 100644
--- a/src/server/api/cycleData/table/getTableDataHistory.ts
+++ b/src/server/api/cycleData/table/getTableDataHistory.ts
@@ -1,18 +1,29 @@
 import { Response } from 'express'
+import { Objects } from 'utils/objects'
 
 import { CycleDataRequest } from 'meta/api/request'
-import { CountryIso } from 'meta/area'
 
+import { AssessmentController } from 'server/controller/assessment'
+import { CycleDataController } from 'server/controller/cycleData'
 import Requests from 'server/utils/requests'
 
 type GetTableDataRequest = CycleDataRequest<{
   tableNames: Array<string>
-  countryISOs: Array<CountryIso>
 }>
 
-export const getTableDataHistory = async (_req: GetTableDataRequest, res: Response) => {
+export const getTableDataHistory = async (req: GetTableDataRequest, res: Response) => {
   try {
-    Requests.send(res, {})
+    const { countryIso, assessmentName, cycleName, tableNames } = req.query
+    const { assessment, cycle } = await AssessmentController.getOneWithCycle({ assessmentName, cycleName })
+    const info = await CycleDataController.History.LastApproved.getInfo({ assessment, cycle, countryIso })
+
+    let tableData = {}
+    if (!Objects.isNil(info)) {
+      const props = { assessment, cycle, info, countryISOs: [countryIso], tableNames }
+      tableData = await CycleDataController.TableData.getTableDataLastApproved(props)
+    }
+
+    Requests.send(res, tableData)
   } catch (e) {
     Requests.sendErr(res, e)
   }
diff --git a/src/server/controller/cycleData/getTableData.ts b/src/server/controller/cycleData/getTableData.ts
index 56a8453453..79ef6b6c08 100644
--- a/src/server/controller/cycleData/getTableData.ts
+++ b/src/server/controller/cycleData/getTableData.ts
@@ -5,11 +5,12 @@ import { TableName, TableNames } from 'meta/assessment'
 import { RecordAssessmentData, RecordCountryData } from 'meta/data'
 
 import { getTablesCondition } from 'server/controller/cycleData/tableData/getTablesCondition'
-import { Props } from 'server/controller/cycleData/tableData/props'
 import { BaseProtocol, DB } from 'server/db'
 import { CountryRepository } from 'server/repository/assessmentCycle/country'
 import { DataRedisRepository } from 'server/repository/redis/data'
 
+import { PropsGetTableData } from './tableData/props'
+
 const _mergeODPTable = (props: {
   countryIso: CountryIso
   tableData: RecordCountryData
@@ -24,7 +25,10 @@ const _mergeODPTable = (props: {
   }
 }
 
-export const getTableData = async (props: Props, client: BaseProtocol = DB): Promise<RecordAssessmentData> => {
+export const getTableData = async (
+  props: PropsGetTableData,
+  client: BaseProtocol = DB
+): Promise<RecordAssessmentData> => {
   const { assessment, columns, countryISOs, cycle, mergeOdp, tableNames, variables } = props
 
   const tables = getTablesCondition({ tableNames, columns, variables, mergeOdp })
diff --git a/src/server/controller/cycleData/history/lastApproved/index.ts b/src/server/controller/cycleData/history/lastApproved/index.ts
index f304240873..ca4b837d44 100644
--- a/src/server/controller/cycleData/history/lastApproved/index.ts
+++ b/src/server/controller/cycleData/history/lastApproved/index.ts
@@ -1,5 +1,7 @@
+import { Objects } from 'utils/objects'
+
 import { CountryIso } from 'meta/area'
-import { Assessment, Cycle } from 'meta/assessment'
+import { Assessment, Cycle, Cycles } from 'meta/assessment'
 import { HistoryLastApprovedInfo } from 'meta/cycleData/historyLastApproved'
 
 import { BaseProtocol, DB } from 'server/db'
@@ -11,14 +13,21 @@ type Props = {
   cycle: Cycle
 }
 
-export const getInfo = async (props: Props, client: BaseProtocol = DB): Promise<HistoryLastApprovedInfo> => {
+export const getInfo = async (
+  props: Props,
+  client: BaseProtocol = DB
+): Promise<HistoryLastApprovedInfo | undefined> => {
   const { assessment, cycle } = props
 
   const countrySummary = await CountrySummaryRepository.getOneOrNone(props, client)
   const lastAccepted = countrySummary.lastAccepted as unknown as Date // server side is a Date object
-  const prevCycle = cycle.cycleUuidSource ? assessment.cycles.find((c) => c.uuid === cycle.cycleUuidSource) : undefined
+  const prevCycle = cycle.cycleUuidSource ? Cycles.getPreviousCycle({ assessment, cycle }) : undefined
+
+  if (!Objects.isEmpty(lastAccepted) || !Objects.isEmpty(prevCycle)) {
+    return { lastAccepted, prevCycle }
+  }
 
-  return { lastAccepted, prevCycle }
+  return undefined
 }
 
 export const LastApproved = {
diff --git a/src/server/controller/cycleData/tableData/getAggregatedTableData.ts b/src/server/controller/cycleData/tableData/getAggregatedTableData.ts
index afe8534cbf..f50ef89dc8 100644
--- a/src/server/controller/cycleData/tableData/getAggregatedTableData.ts
+++ b/src/server/controller/cycleData/tableData/getAggregatedTableData.ts
@@ -6,10 +6,10 @@ import { BaseProtocol, DB } from 'server/db'
 import { CountryRepository } from 'server/repository/assessmentCycle/country'
 import { DataRepository } from 'server/repository/assessmentCycle/data'
 
-import { Props } from './props'
+import { PropsGetTableData } from './props'
 
 export const getAggregatedTableData = async (
-  props: Props & { regionCode: RegionCode },
+  props: PropsGetTableData & { regionCode: RegionCode },
   client: BaseProtocol = DB
 ): Promise<RecordAssessmentData> => {
   const {
diff --git a/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts b/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts
new file mode 100644
index 0000000000..e89933a5cf
--- /dev/null
+++ b/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts
@@ -0,0 +1,51 @@
+import { Objects } from 'utils/objects'
+
+import { HistoryLastApprovedInfo } from 'meta/cycleData/historyLastApproved'
+import { RecordAssessmentData, RecordAssessmentDatas } from 'meta/data'
+
+import { getTableData } from 'server/controller/cycleData/getTableData'
+import { BaseProtocol, DB } from 'server/db'
+import { TableRedisRepository } from 'server/repository/redis/table'
+
+import { PropsGetTableData } from './props'
+
+type Props = PropsGetTableData & { info: HistoryLastApprovedInfo }
+
+export const getTableDataLastApproved = async (
+  props: Props,
+  client: BaseProtocol = DB
+): Promise<RecordAssessmentData> => {
+  const { assessment, countryISOs, cycle, info, mergeOdp = true, tableNames: _tableNames } = props
+  const { prevCycle } = info
+  const prevCycleName = prevCycle?.name
+
+  let data = {}
+  if (!Objects.isNil(prevCycle)) {
+    const tableNames = (
+      await Promise.all(
+        _tableNames?.map((tableName) => TableRedisRepository.getOne({ assessment, cycle: prevCycle, tableName })) ?? []
+      )
+    )
+      .filter(Boolean)
+      ?.map((table) => table.props.name)
+
+    if (!Objects.isEmpty(tableNames)) {
+      data = await getTableData({ ...props, tableNames, mergeOdp, cycle: prevCycle }, client)
+    }
+  }
+
+  if (!Objects.isEmpty(data)) {
+    const { name: assessmentName } = assessment.props
+    const cycleName = prevCycleName
+    return {
+      [assessmentName]: {
+        [cycle.name]: countryISOs.reduce((acc, countryIso) => {
+          const countryData = RecordAssessmentDatas.getCountryData({ assessmentName, cycleName, countryIso, data })
+          return { ...acc, [countryIso]: countryData }
+        }, {}),
+      },
+    }
+  }
+
+  return {}
+}
diff --git a/src/server/controller/cycleData/tableData/getTablesCondition.ts b/src/server/controller/cycleData/tableData/getTablesCondition.ts
index 9e16464c45..aecdd26fa3 100644
--- a/src/server/controller/cycleData/tableData/getTablesCondition.ts
+++ b/src/server/controller/cycleData/tableData/getTablesCondition.ts
@@ -1,10 +1,10 @@
 import { TableNames } from 'meta/assessment'
 import { TablesCondition } from 'meta/data'
 
-import { Props } from 'server/controller/cycleData/tableData/props'
+import { PropsGetTableData } from './props'
 
 export const getTablesCondition = (
-  props: Pick<Props, 'tableNames' | 'columns' | 'variables' | 'mergeOdp'>
+  props: Pick<PropsGetTableData, 'tableNames' | 'columns' | 'variables' | 'mergeOdp'>
 ): TablesCondition => {
   const { tableNames, columns, variables, mergeOdp } = props
 
diff --git a/src/server/controller/cycleData/tableData/index.ts b/src/server/controller/cycleData/tableData/index.ts
index 59605dde25..894695eb05 100644
--- a/src/server/controller/cycleData/tableData/index.ts
+++ b/src/server/controller/cycleData/tableData/index.ts
@@ -1,7 +1,9 @@
 import { getAggregatedTableData } from './getAggregatedTableData'
+import { getTableDataLastApproved } from './getTableDataLastApproved'
 import { refreshViews } from './refreshViews'
 
 export const TableData = {
   getAggregatedTableData,
+  getTableDataLastApproved,
   refreshViews,
 }
diff --git a/src/server/controller/cycleData/tableData/props.ts b/src/server/controller/cycleData/tableData/props.ts
index 9813d66f9a..8c4244c170 100644
--- a/src/server/controller/cycleData/tableData/props.ts
+++ b/src/server/controller/cycleData/tableData/props.ts
@@ -1,7 +1,7 @@
 import { CountryIso } from 'meta/area'
 import { Assessment, Cycle, VariableCache } from 'meta/assessment'
 
-export type Props = {
+export type PropsGetTableData = {
   assessment: Assessment
   cycle: Cycle
   countryISOs: Array<CountryIso>

From e522b908c0bfc56416f6c2e576d774ece41a048a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Wed, 5 Feb 2025 11:52:43 -0500
Subject: [PATCH 09/38] 4253 - Data History: ODP comparison (empty dataset) -
 Grid table diffs (#4317) (#4331)

* 4253 - ODP history: Dummy API

* 4253 - ODP history: Fetch and update store

* 4253 - ODP history: data sources diffs

* 4253 - ODP history: NationalClass diffs

* 4253 - ODP history: update new reducer imports

* 4253 - ODP history: move odp history store definitions under store->data

* 4253 - ODP history: fix diff text and conditional renders

* 4253 - ODP history: Rename DiffView to ODPDiffText and add paddings

* 4253 - ODP history: Remove unnecessary type cast

* 4253 - ODP history: make history store var plural

* 4253 - ODP history: odp history return empty obj

* 4253 - ODP history: add DOMs getHtmlTextContent utility
---
 src/client/components/DiffText/DiffText.tsx   |  1 +
 .../OriginalDataPoint/OriginalDataPoint.tsx   |  2 +
 .../AdditionalComments/AdditionalComments.tsx | 18 +++++--
 .../DataSources/MethodsUsed/MethodsUsed.tsx   | 21 +++++---
 .../DataSources/References/References.tsx     | 19 ++++---
 .../components/NationalClass.tsx              | 38 +++++++++-----
 .../components/ODPDiffText/ODPDiffText.scss   |  5 ++
 .../components/ODPDiffText/ODPDiffText.tsx    | 22 +++++++++
 .../hooks/useFieldChanges.ts                  | 49 +++++++++++++++++++
 .../hooks/useGetOriginalDataPointHistory.ts   | 31 ++++++++++++
 .../actions/getOriginalDataPointHistory.ts    | 27 ++++++++++
 src/client/store/data/actions/index.ts        |  2 +
 .../getOriginalDataPointHistory.ts            | 16 ++++++
 .../hooks/useLastApprovedOriginalDataPoint.ts | 18 +++++++
 src/client/store/data/selectors/index.ts      |  8 +++
 src/client/store/data/slice.ts                |  2 +
 src/client/store/data/state.ts                |  2 +
 .../store/ui/originalDataPoint/slice.ts       | 10 ++--
 .../store/ui/originalDataPoint/stateType.ts   |  2 +-
 src/client/utils/dom.ts                       |  9 +++-
 src/meta/api/endpoint/ApiEndPoint.ts          |  1 +
 .../RecordAssessmentOriginalDataPoint.ts      |  7 +++
 .../assessment/originalDataPoint/index.ts     |  6 +++
 src/server/api/cycleData/index.ts             |  6 +++
 .../getOriginalDataPointHistory.ts            | 26 ++++++++++
 src/utils/objects/getInPath.ts                |  2 +-
 26 files changed, 311 insertions(+), 39 deletions(-)
 create mode 100644 src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.scss
 create mode 100644 src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.tsx
 create mode 100644 src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
 create mode 100644 src/client/pages/OriginalDataPoint/hooks/useGetOriginalDataPointHistory.ts
 create mode 100644 src/client/store/data/actions/getOriginalDataPointHistory.ts
 create mode 100644 src/client/store/data/extraReducers/getOriginalDataPointHistory.ts
 create mode 100644 src/client/store/data/hooks/useLastApprovedOriginalDataPoint.ts
 create mode 100644 src/meta/assessment/originalDataPoint/RecordAssessmentOriginalDataPoint.ts
 create mode 100644 src/server/api/cycleData/originalDataPoint/getOriginalDataPointHistory.ts

diff --git a/src/client/components/DiffText/DiffText.tsx b/src/client/components/DiffText/DiffText.tsx
index e65826c44b..a87f7ad8bd 100644
--- a/src/client/components/DiffText/DiffText.tsx
+++ b/src/client/components/DiffText/DiffText.tsx
@@ -23,6 +23,7 @@ const DiffText: React.FC<Props> = (props) => {
             {value.split('\n\r').map((text, j) => (
               <React.Fragment key={`${key}_${String(j)}`}>
                 <span className={classNames({ added, removed })}>{text}</span>
+                <br />
               </React.Fragment>
             ))}
           </React.Fragment>
diff --git a/src/client/pages/OriginalDataPoint/OriginalDataPoint.tsx b/src/client/pages/OriginalDataPoint/OriginalDataPoint.tsx
index f09c22b10b..b9a98de8f1 100644
--- a/src/client/pages/OriginalDataPoint/OriginalDataPoint.tsx
+++ b/src/client/pages/OriginalDataPoint/OriginalDataPoint.tsx
@@ -17,6 +17,7 @@ import NationalClasses from './components/NationalClasses'
 import OriginalData from './components/OriginalData'
 import YearSelection from './components/YearSelection'
 import { useGetOriginalDataPoint } from './hooks/useGetOriginalDataPoint'
+import { useGetOriginalDataPointHistory } from './hooks/useGetOriginalDataPointHistory'
 import { useGetReviewStatus } from './hooks/useGetReviewStatus'
 import { useReservedYears } from './hooks/useReservedYears'
 
@@ -31,6 +32,7 @@ const OriginalDataPoint: React.FC = () => {
 
   useReservedYears()
   useGetOriginalDataPoint()
+  useGetOriginalDataPointHistory()
   useGetReviewStatus()
 
   if (originalDataPoint.countryIso !== countryIso) navigate('/')
diff --git a/src/client/pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx b/src/client/pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx
index b9c33bc4e8..8ae43f3407 100644
--- a/src/client/pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx
+++ b/src/client/pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx
@@ -4,8 +4,10 @@ import { useTranslation } from 'react-i18next'
 import { OriginalDataPoint } from 'meta/assessment'
 import { Topics } from 'meta/messageCenter'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { DataCell, DataRow, DataRowAction, DataRowActionType } from 'client/components/DataGrid'
 import TextArea from 'client/components/Inputs/TextArea'
+import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
 import { useIsDisabled } from '../hooks/useIsDisabled'
@@ -23,6 +25,8 @@ const AdditionalComments: React.FC<Props> = (props: Props) => {
   const disabled = useIsDisabled()
   const updateOriginalDataPoint = useUpdateDataSources()
 
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
   const onChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(
     (event) => {
       const caret = event.target.selectionStart
@@ -58,11 +62,15 @@ const AdditionalComments: React.FC<Props> = (props: Props) => {
         {t('nationalDataPoint.additionalComments')}
       </DataCell>
       <DataCell lastCol lastRow>
-        <TextArea
-          disabled={disabled}
-          onChange={onChange}
-          value={originalDataPoint.dataSourceAdditionalComments ?? ''}
-        />
+        {historyLastApprovedIsActive ? (
+          <ODPDiffText originalDataPoint={originalDataPoint} path={['dataSourceAdditionalComments']} />
+        ) : (
+          <TextArea
+            disabled={disabled}
+            onChange={onChange}
+            value={originalDataPoint.dataSourceAdditionalComments ?? ''}
+          />
+        )}
       </DataCell>
     </DataRow>
   )
diff --git a/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx b/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx
index db8f4601ed..73045bccf0 100644
--- a/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx
+++ b/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx
@@ -4,8 +4,10 @@ import { useTranslation } from 'react-i18next'
 import { ODPDataSourceMethod, OriginalDataPoint } from 'meta/assessment/originalDataPoint'
 import { Topics } from 'meta/messageCenter'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { DataCell, DataRow, DataRowAction, DataRowActionType } from 'client/components/DataGrid'
 import Select, { Option } from 'client/components/Inputs/Select'
+import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
 import { useIsDisabled } from '../hooks/useIsDisabled'
@@ -24,6 +26,7 @@ const MethodsUsed: React.FC<Props> = (props: Props) => {
   const reviewIndicator = useShowReviewIndicator()
   const disabled = useIsDisabled()
   const updateOriginalDataPoint = useUpdateDataSources()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
 
   const options = useMemo<Array<Option>>(
     () =>
@@ -58,13 +61,17 @@ const MethodsUsed: React.FC<Props> = (props: Props) => {
     <DataRow actions={actions}>
       <DataCell header>{t('nationalDataPoint.methodsUsed')}</DataCell>
       <DataCell lastCol>
-        <Select
-          disabled={disabled}
-          isMulti
-          onChange={onChange}
-          options={options}
-          value={originalDataPoint.dataSourceMethods ?? []}
-        />
+        {historyLastApprovedIsActive ? (
+          <ODPDiffText originalDataPoint={originalDataPoint} path={['dataSourceMethods']} />
+        ) : (
+          <Select
+            disabled={disabled}
+            isMulti
+            onChange={onChange}
+            options={options}
+            value={originalDataPoint.dataSourceMethods ?? []}
+          />
+        )}
       </DataCell>
     </DataRow>
   )
diff --git a/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx b/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx
index e39536ee0f..74a0053021 100644
--- a/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx
+++ b/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx
@@ -6,8 +6,10 @@ import { Objects } from 'utils/objects'
 import { OriginalDataPoint } from 'meta/assessment'
 import { Topics } from 'meta/messageCenter'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { DataCell, DataRow, DataRowAction, DataRowActionType } from 'client/components/DataGrid'
 import { EditorWYSIWYGLinks } from 'client/components/EditorWYSIWYG'
+import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
 import { useIsDisabled } from '../hooks/useIsDisabled'
@@ -25,6 +27,7 @@ const References: React.FC<Props> = (props: Props) => {
 
   const reviewIndicator = useShowReviewIndicator()
   const disabled = useIsDisabled()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
 
   const updateOriginalDataPoint = useUpdateDataSources()
 
@@ -53,12 +56,16 @@ const References: React.FC<Props> = (props: Props) => {
     <DataRow actions={actions}>
       <DataCell header>{t('nationalDataPoint.references')}</DataCell>
       <DataCell lastCol>
-        <EditorWYSIWYGLinks
-          disabled={disabled}
-          onChange={onChange}
-          repository
-          value={originalDataPoint.dataSourceReferences ?? ''}
-        />
+        {historyLastApprovedIsActive ? (
+          <ODPDiffText originalDataPoint={originalDataPoint} path={['dataSourceReferences']} />
+        ) : (
+          <EditorWYSIWYGLinks
+            disabled={disabled}
+            onChange={onChange}
+            repository
+            value={originalDataPoint.dataSourceReferences ?? ''}
+          />
+        )}
       </DataCell>
     </DataRow>
   )
diff --git a/src/client/pages/OriginalDataPoint/components/NationalClasses/components/NationalClass.tsx b/src/client/pages/OriginalDataPoint/components/NationalClasses/components/NationalClass.tsx
index 2709abc355..18779013ea 100644
--- a/src/client/pages/OriginalDataPoint/components/NationalClasses/components/NationalClass.tsx
+++ b/src/client/pages/OriginalDataPoint/components/NationalClasses/components/NationalClass.tsx
@@ -3,10 +3,12 @@ import { useTranslation } from 'react-i18next'
 
 import { ODPs, OriginalDataPoint } from 'meta/assessment'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useIsPrintRoute } from 'client/hooks/useIsRoute'
 import { DataCell, DataRow } from 'client/components/DataGrid'
 import InputText from 'client/components/Inputs/InputText'
 import TextArea from 'client/components/Inputs/TextArea'
+import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 // import { useNationalClassNameComments } from 'client/pages/OriginalDataPoint/hooks'
 import { useIsEditODPEnabled } from 'client/pages/OriginalDataPoint/hooks/useIsEditODPEnabled'
 
@@ -31,6 +33,8 @@ const NationalClass: React.FC<Props> = (props) => {
   const actions = useRowActions({ canEdit: canEditData && !placeHolder, index, originalDataPoint })
   const { onChangeDefinition, onChangeName, onPasteDefinition, onPasteName } = useOnChangeNationalClass({ index })
 
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
   const lastRow = canEditData && !print ? placeHolder : index === nationalClasses.length - (print ? 1 : 2)
   // TODO next pr
   // const target = [originalDataPoint.id, 'class', `${uuid}`, 'definition'] as string[]
@@ -46,22 +50,30 @@ const NationalClass: React.FC<Props> = (props) => {
   return (
     <DataRow actions={actions}>
       <DataCell error={error} lastRow={lastRow}>
-        <InputText
-          disabled={!canEditData}
-          onChange={onChangeName}
-          onPaste={onPasteName}
-          placeholder={placeHolder && index === 0 ? t('nationalDataPoint.enterOrCopyPasteNationalClasses') : ''}
-          value={name ?? ''}
-        />
+        {historyLastApprovedIsActive ? (
+          <ODPDiffText originalDataPoint={originalDataPoint} path={['nationalClasses', index, 'name']} />
+        ) : (
+          <InputText
+            disabled={!canEditData}
+            onChange={onChangeName}
+            onPaste={onPasteName}
+            placeholder={placeHolder && index === 0 ? t('nationalDataPoint.enterOrCopyPasteNationalClasses') : ''}
+            value={name ?? ''}
+          />
+        )}
       </DataCell>
 
       <DataCell lastCol lastRow={lastRow}>
-        <TextArea
-          disabled={!canEditData}
-          onChange={onChangeDefinition}
-          onPaste={onPasteDefinition}
-          value={definition ?? ''}
-        />
+        {historyLastApprovedIsActive ? (
+          <ODPDiffText originalDataPoint={originalDataPoint} path={['nationalClasses', index, 'definition']} />
+        ) : (
+          <TextArea
+            disabled={!canEditData}
+            onChange={onChangeDefinition}
+            onPaste={onPasteDefinition}
+            value={definition ?? ''}
+          />
+        )}
       </DataCell>
     </DataRow>
   )
diff --git a/src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.scss b/src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.scss
new file mode 100644
index 0000000000..5daadc9750
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.scss
@@ -0,0 +1,5 @@
+@import 'src/client/style/partials';
+
+.odp-diff-text {
+  padding: $spacing-xxs;
+}
diff --git a/src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.tsx b/src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.tsx
new file mode 100644
index 0000000000..8762274695
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.tsx
@@ -0,0 +1,22 @@
+import './ODPDiffText.scss'
+import React from 'react'
+
+import { OriginalDataPoint } from 'meta/assessment'
+
+import DiffText from 'client/components/DiffText'
+import { useFieldChanges } from 'client/pages/OriginalDataPoint/hooks/useFieldChanges'
+
+type Props = {
+  originalDataPoint: OriginalDataPoint
+  path: Array<string | number>
+}
+
+const ODPDiffText: React.FC<Props> = (props) => {
+  const { originalDataPoint, path } = props
+
+  const changes = useFieldChanges({ originalDataPoint, path })
+
+  return <DiffText changes={changes} className="odp-diff-text" />
+}
+
+export default ODPDiffText
diff --git a/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts b/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
new file mode 100644
index 0000000000..d23f8f5efc
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+import { TFunction, useTranslation } from 'react-i18next'
+
+import * as Diff from 'diff'
+import { Change } from 'diff'
+import { Objects } from 'utils/objects'
+
+import { OriginalDataPoint } from 'meta/assessment'
+
+import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { DOMs } from 'client/utils/dom'
+
+type Props = {
+  originalDataPoint: OriginalDataPoint
+  path: Array<string | number>
+}
+
+type Returned = Array<Change>
+
+const _getSourceMethodText = (values: Array<string> | undefined, t: TFunction): string =>
+  (values ?? [])?.map((value) => t(`nationalDataPoint.dataSourceMethodsOptions.${value}`)).join('\n\r')
+
+export const useFieldChanges = (props: Props): Returned => {
+  const { originalDataPoint, path } = props
+
+  const { t } = useTranslation()
+  const originalDataPointHistory = useLastApprovedOriginalDataPoint()
+
+  return useMemo<Returned>(() => {
+    const valuePrev = Objects.getInPath(originalDataPointHistory, path)
+    const valueCurrent = Objects.getInPath(originalDataPoint, path)
+
+    const isSourceMethods = path.includes('dataSourceMethods')
+    if (isSourceMethods) {
+      const multipleMethods = valueCurrent?.length > 0
+
+      const methodsPrev = _getSourceMethodText(valuePrev, t)
+      const methodsCurrent = _getSourceMethodText(valueCurrent, t)
+
+      return multipleMethods ? Diff.diffLines(methodsPrev, methodsCurrent) : Diff.diffChars(methodsPrev, methodsCurrent)
+    }
+
+    const textPrev = DOMs.getHtmlTextContent(valuePrev ?? '')
+    const textCurrent = DOMs.getHtmlTextContent(valueCurrent ?? '')
+    return Diff.diffChars(textPrev, textCurrent, {
+      ignoreCase: false,
+    })
+  }, [originalDataPoint, originalDataPointHistory, path, t])
+}
diff --git a/src/client/pages/OriginalDataPoint/hooks/useGetOriginalDataPointHistory.ts b/src/client/pages/OriginalDataPoint/hooks/useGetOriginalDataPointHistory.ts
new file mode 100644
index 0000000000..577e8cb3fc
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/hooks/useGetOriginalDataPointHistory.ts
@@ -0,0 +1,31 @@
+import { useEffect } from 'react'
+
+import { useAppDispatch } from 'client/store'
+import { DataActions, useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useSection } from 'client/store/metadata'
+import { useOriginalDataPointRouteParams } from 'client/hooks/useRouteParams'
+
+export const useGetOriginalDataPointHistory = () => {
+  const { assessmentName, countryIso, cycleName, year } = useOriginalDataPointRouteParams()
+
+  const dispatch = useAppDispatch()
+  const section = useSection()
+  const sectionName = section?.props.name
+
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  useEffect(() => {
+    if (year === '-1') return
+    if (!historyLastApprovedIsActive) return
+
+    dispatch(
+      DataActions.getOriginalDataPointHistory({
+        assessmentName,
+        countryIso,
+        cycleName,
+        sectionName,
+        year,
+      })
+    )
+  }, [assessmentName, countryIso, cycleName, dispatch, historyLastApprovedIsActive, sectionName, year])
+}
diff --git a/src/client/store/data/actions/getOriginalDataPointHistory.ts b/src/client/store/data/actions/getOriginalDataPointHistory.ts
new file mode 100644
index 0000000000..d5530ea36f
--- /dev/null
+++ b/src/client/store/data/actions/getOriginalDataPointHistory.ts
@@ -0,0 +1,27 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import axios from 'axios'
+
+import { ApiEndPoint } from 'meta/api/endpoint'
+import { CycleParams } from 'meta/api/request'
+import { OriginalDataPoint, SectionName } from 'meta/assessment'
+
+type Props = CycleParams & { sectionName: SectionName; year: string }
+
+type Returned = OriginalDataPoint
+
+export const getOriginalDataPointHistory = createAsyncThunk<Returned, Props>(
+  'data/originalDataPoint/history/get',
+  async ({ assessmentName, countryIso, cycleName, sectionName, year }) => {
+    const { data } = await axios.get(ApiEndPoint.CycleData.OriginalDataPoint.history(), {
+      params: {
+        assessmentName,
+        countryIso,
+        cycleName,
+        sectionName,
+        year,
+      },
+    })
+
+    return data
+  }
+)
diff --git a/src/client/store/data/actions/index.ts b/src/client/store/data/actions/index.ts
index 9a99d1e9a7..d1ed88c38d 100644
--- a/src/client/store/data/actions/index.ts
+++ b/src/client/store/data/actions/index.ts
@@ -11,6 +11,7 @@ import { getDescriptionsHistory } from './getDescriptionsHistory'
 import { getLinkedDataSources } from './getLinkedDataSources'
 import { getNodeValuesEstimations } from './getNodeValuesEstimations'
 import { getODPLastUpdatedTimestamp } from './getODPLastUpdatedTimestamp'
+import { getOriginalDataPointHistory } from './getOriginalDataPointHistory'
 import { getTableData } from './getTableData'
 import { getTableDataHistory } from './getTableDataHistory'
 import { postEstimate } from './postEstimate'
@@ -31,6 +32,7 @@ export const DataActions = {
 
   // Original Data Point
   getODPLastUpdatedTimestamp,
+  getOriginalDataPointHistory,
 
   // Estimations
   postEstimate,
diff --git a/src/client/store/data/extraReducers/getOriginalDataPointHistory.ts b/src/client/store/data/extraReducers/getOriginalDataPointHistory.ts
new file mode 100644
index 0000000000..9dc36d96ee
--- /dev/null
+++ b/src/client/store/data/extraReducers/getOriginalDataPointHistory.ts
@@ -0,0 +1,16 @@
+import { ActionReducerMapBuilder } from '@reduxjs/toolkit'
+import { Objects } from 'utils/objects'
+
+import { getOriginalDataPointHistory } from 'client/store/data/actions/getOriginalDataPointHistory'
+import { DataState } from 'client/store/data/state'
+
+export const getOriginalDataPointHistoryReducer = (builder: ActionReducerMapBuilder<DataState>) =>
+  builder.addCase(getOriginalDataPointHistory.fulfilled, (state, { meta, payload }) => {
+    const { assessmentName, countryIso, cycleName, year } = meta.arg
+
+    Objects.setInPath({
+      obj: state,
+      path: ['history', 'lastApproved', 'originalDataPoints', assessmentName, cycleName, countryIso, year],
+      value: payload,
+    })
+  })
diff --git a/src/client/store/data/hooks/useLastApprovedOriginalDataPoint.ts b/src/client/store/data/hooks/useLastApprovedOriginalDataPoint.ts
new file mode 100644
index 0000000000..0fc879a98d
--- /dev/null
+++ b/src/client/store/data/hooks/useLastApprovedOriginalDataPoint.ts
@@ -0,0 +1,18 @@
+import { OriginalDataPoint } from 'meta/assessment'
+
+import { useAppSelector } from 'client/store'
+import { DataSelector } from 'client/store/data/selectors'
+import { useOriginalDataPointRouteParams } from 'client/hooks/useRouteParams'
+
+export const useLastApprovedOriginalDataPoint = (): OriginalDataPoint => {
+  const { assessmentName, countryIso, cycleName, year } = useOriginalDataPointRouteParams()
+
+  return useAppSelector((state) =>
+    DataSelector.History.getLastApprovedOriginalDataPoint(state, {
+      assessmentName,
+      countryIso,
+      cycleName,
+      year,
+    })
+  )
+}
diff --git a/src/client/store/data/selectors/index.ts b/src/client/store/data/selectors/index.ts
index e083c0e0b9..4caffc0ce9 100644
--- a/src/client/store/data/selectors/index.ts
+++ b/src/client/store/data/selectors/index.ts
@@ -37,6 +37,12 @@ const getLastApprovedDescriptions = createSelector(
     lastApproved?.descriptions?.[assessmentName]?.[cycleName]?.[countryIso]?.[sectionName]
 )
 
+const getLastApprovedOriginalDataPoint = createSelector(
+  [getHistoryLastApproved, (_, params: Params & { year: string }) => params],
+  (lastApproved, { assessmentName, countryIso, cycleName, year }) =>
+    lastApproved?.originalDataPoints?.[assessmentName]?.[cycleName]?.[countryIso]?.[year]
+)
+
 const getLastApprovedTableData = createSelector(getHistoryLastApproved, (lastApproved) => lastApproved?.tableData)
 
 export const DataSelector = {
@@ -52,5 +58,7 @@ export const DataSelector = {
     getLastApprovedDescriptions,
     // tabledata
     getLastApprovedTableData,
+    // originalDataPoint
+    getLastApprovedOriginalDataPoint,
   },
 }
diff --git a/src/client/store/data/slice.ts b/src/client/store/data/slice.ts
index cecf88be9b..ca5c772fa5 100644
--- a/src/client/store/data/slice.ts
+++ b/src/client/store/data/slice.ts
@@ -22,6 +22,7 @@ import { updateContact } from './actions/updateContact'
 import { updateDescription } from './actions/updateDescription'
 import { updateNodeValues } from './actions/updateNodeValues'
 import { getDescriptionsHistoryReducer } from './extraReducers/getDescriptionsHistory'
+import { getOriginalDataPointHistoryReducer } from './extraReducers/getOriginalDataPointHistory'
 import { setNodeValuesReducer } from './extraReducers/setNodeValues'
 import { deleteOriginalDataPoint } from './reducers/deleteOriginalDataPoint'
 import { resetHistoryActivities } from './reducers/resetHistoryActivities'
@@ -220,6 +221,7 @@ export const DataSlice = createSlice({
     // == History reducers
     getDescriptionsHistoryReducer(builder)
     getTableDataHistoryReducer(builder)
+    getOriginalDataPointHistoryReducer(builder)
   },
 })
 
diff --git a/src/client/store/data/state.ts b/src/client/store/data/state.ts
index 592ab695bb..8fa7e8711a 100644
--- a/src/client/store/data/state.ts
+++ b/src/client/store/data/state.ts
@@ -12,6 +12,7 @@ import {
   TableName,
   VariableName,
 } from 'meta/assessment'
+import { RecordAssessmentOriginalDataPoint } from 'meta/assessment/originalDataPoint'
 import { Contact } from 'meta/cycleData'
 import { HistoryTarget } from 'meta/cycleData/historyActivities'
 import { RecordAssessmentData } from 'meta/data'
@@ -63,6 +64,7 @@ export type HistoryActivitiesState = {
 export type HistoryLastApprovedState = {
   active?: boolean
   descriptions?: DescriptionsState
+  originalDataPoints?: RecordAssessmentOriginalDataPoint
   tableData?: RecordAssessmentData
 }
 
diff --git a/src/client/store/ui/originalDataPoint/slice.ts b/src/client/store/ui/originalDataPoint/slice.ts
index 22a4d2b31e..6a875a75de 100644
--- a/src/client/store/ui/originalDataPoint/slice.ts
+++ b/src/client/store/ui/originalDataPoint/slice.ts
@@ -1,4 +1,4 @@
-import { createSlice, isAnyOf, PayloadAction, Reducer } from '@reduxjs/toolkit'
+import { ActionReducerMapBuilder, createSlice, isAnyOf, PayloadAction, Reducer } from '@reduxjs/toolkit'
 
 import { ODPReservedYear } from 'meta/assessment'
 
@@ -28,7 +28,7 @@ export const originalDataPointSlice = createSlice({
       state.reservedYears = payload
     },
   },
-  extraReducers: (builder) => {
+  extraReducers: (builder: ActionReducerMapBuilder<OriginalDataPointState>) => {
     builder.addCase(
       getOriginalDataPointReservedYears.fulfilled,
       (state, { payload }: PayloadAction<Array<ODPReservedYear>>) => {
@@ -69,17 +69,17 @@ export const originalDataPointSlice = createSlice({
 
 export const OriginalDataPointActions = {
   ...originalDataPointSlice.actions,
-  getOriginalDataPoint,
+  copyNationalClasses,
   createOriginalDataPoint,
   deleteOriginalDataPoint,
   deleteOriginalDataPointNationalClass,
+  getOriginalDataPoint,
+  getOriginalDataPointReservedYears,
   updateOriginalDataPointDataSources,
   updateOriginalDataPointDescription,
   updateOriginalDataPointNationalClasses,
   updateOriginalDataPointOriginalData,
   updateOriginalDataPointYear,
-  copyNationalClasses,
-  getOriginalDataPointReservedYears,
 }
 
 export default originalDataPointSlice.reducer as Reducer<OriginalDataPointState>
diff --git a/src/client/store/ui/originalDataPoint/stateType.ts b/src/client/store/ui/originalDataPoint/stateType.ts
index c19fe027ac..58b3e72c9e 100644
--- a/src/client/store/ui/originalDataPoint/stateType.ts
+++ b/src/client/store/ui/originalDataPoint/stateType.ts
@@ -2,6 +2,6 @@ import { ODPReservedYear, OriginalDataPoint } from 'meta/assessment'
 
 export type OriginalDataPointState = {
   data?: OriginalDataPoint
-  updating?: boolean
   reservedYears: Array<ODPReservedYear>
+  updating?: boolean
 }
diff --git a/src/client/utils/dom.ts b/src/client/utils/dom.ts
index 8636701055..a3093a0eb8 100644
--- a/src/client/utils/dom.ts
+++ b/src/client/utils/dom.ts
@@ -41,9 +41,16 @@ const findElementByName = <Returned extends Element>(element: Element, name: str
   return undefined
 }
 
+const getHtmlTextContent = (html: string): string => {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(html ?? '', 'text/html')
+  return doc.documentElement.textContent || ''
+}
+
 export const DOMs = {
   elementOffset,
   findElementByName,
-  scrollTo,
+  getHtmlTextContent,
   parseDOMValue,
+  scrollTo,
 }
diff --git a/src/meta/api/endpoint/ApiEndPoint.ts b/src/meta/api/endpoint/ApiEndPoint.ts
index 47357403a6..049ae0d17e 100644
--- a/src/meta/api/endpoint/ApiEndPoint.ts
+++ b/src/meta/api/endpoint/ApiEndPoint.ts
@@ -77,6 +77,7 @@ export const ApiEndPoint = {
       one: () => apiPath('cycle-data', 'original-data-points', 'original-data-point'),
       many: () => apiPath('cycle-data', 'original-data-points'),
       lastUpdatedTimestamp: () => apiPath('cycle-data', 'original-data-points', 'last-updated-timestamp'),
+      history: () => apiPath('cycle-data', 'original-data-points', 'original-data-point', 'history'),
 
       dataSources: () => apiPath('cycle-data', 'original-data-points', 'original-data-point', 'data-sources'),
       description: () => apiPath('cycle-data', 'original-data-points', 'original-data-point', 'description'),
diff --git a/src/meta/assessment/originalDataPoint/RecordAssessmentOriginalDataPoint.ts b/src/meta/assessment/originalDataPoint/RecordAssessmentOriginalDataPoint.ts
new file mode 100644
index 0000000000..6470408f1f
--- /dev/null
+++ b/src/meta/assessment/originalDataPoint/RecordAssessmentOriginalDataPoint.ts
@@ -0,0 +1,7 @@
+import { AreaCode } from 'meta/area'
+import { AssessmentName, CycleName, OriginalDataPoint } from 'meta/assessment'
+
+export type RecordYearOriginalDataPoint = Record<string, OriginalDataPoint>
+export type RecordCountryOriginalDataPoint = { [key in AreaCode]?: RecordYearOriginalDataPoint }
+export type RecordCycleOriginalDataPoint = Record<CycleName, RecordCountryOriginalDataPoint>
+export type RecordAssessmentOriginalDataPoint = Record<AssessmentName, RecordCycleOriginalDataPoint>
diff --git a/src/meta/assessment/originalDataPoint/index.ts b/src/meta/assessment/originalDataPoint/index.ts
index b1bf41bc3c..5f5d34d6c2 100644
--- a/src/meta/assessment/originalDataPoint/index.ts
+++ b/src/meta/assessment/originalDataPoint/index.ts
@@ -6,3 +6,9 @@ export type { ODPReservedYear } from './odpReservedYear'
 export { ODPs } from './odps'
 export type { ODPValidation, ODPValidationNationalClass, ODPValidationYear } from './odpValidation'
 export type { OriginalDataPoint } from './originalDataPoint'
+export type {
+  RecordAssessmentOriginalDataPoint,
+  RecordCountryOriginalDataPoint,
+  RecordCycleOriginalDataPoint,
+  RecordYearOriginalDataPoint,
+} from './RecordAssessmentOriginalDataPoint'
diff --git a/src/server/api/cycleData/index.ts b/src/server/api/cycleData/index.ts
index d00f4c504d..172ad7c42d 100644
--- a/src/server/api/cycleData/index.ts
+++ b/src/server/api/cycleData/index.ts
@@ -31,6 +31,7 @@ import { deleteOriginalDataPoint } from './originalDataPoint/deleteOriginalDataP
 import { deleteOriginalDataPointNationalClass } from './originalDataPoint/deleteOriginalDataPointNationalClass'
 import { getLastUpdatedTimestamp } from './originalDataPoint/getLastUpdatedTimestamp'
 import { getOriginalDataPoint } from './originalDataPoint/getOdp'
+import { getOriginalDataPointHistory } from './originalDataPoint/getOriginalDataPointHistory'
 import { getOriginalDataPoints } from './originalDataPoint/getOriginalDataPoints'
 import { getReservedYears } from './originalDataPoint/getReservedYears'
 import { updateOriginalDataPointDataSources } from './originalDataPoint/updateOriginalDataPointDataSources'
@@ -124,6 +125,11 @@ export const CycleDataApi = {
       AuthMiddleware.requireEditTableData,
       updateOriginalDataPointYear
     )
+    express.get(
+      ApiEndPoint.CycleData.OriginalDataPoint.history(),
+      AuthMiddleware.requireViewHistory,
+      getOriginalDataPointHistory
+    )
     // OriginalDataPoint NationalClasses
     express.put(
       ApiEndPoint.CycleData.OriginalDataPoint.nationalClasses(),
diff --git a/src/server/api/cycleData/originalDataPoint/getOriginalDataPointHistory.ts b/src/server/api/cycleData/originalDataPoint/getOriginalDataPointHistory.ts
new file mode 100644
index 0000000000..dbefbcb680
--- /dev/null
+++ b/src/server/api/cycleData/originalDataPoint/getOriginalDataPointHistory.ts
@@ -0,0 +1,26 @@
+import { Response } from 'express'
+
+import { CycleDataRequest } from 'meta/api/request'
+
+import { Requests } from 'server/utils'
+
+export const getOriginalDataPointHistory = async (_req: CycleDataRequest, res: Response) => {
+  try {
+    // TODO: Add suport for non-empty last cycle odps
+    const odpHistory = {
+      // Example of the object:
+      // countryIso: 'FIN',
+      // year: '1990',
+      // dataSourceAdditionalComments: '',
+      // dataSourceMethods: [],
+      // dataSourceReferences: '',
+      // description: '',
+      // nationalClasses: [],
+      // values: {},
+    }
+
+    Requests.send(res, odpHistory)
+  } catch (e) {
+    Requests.sendErr(res, e)
+  }
+}
diff --git a/src/utils/objects/getInPath.ts b/src/utils/objects/getInPath.ts
index e0da1ab179..49b69afbba 100644
--- a/src/utils/objects/getInPath.ts
+++ b/src/utils/objects/getInPath.ts
@@ -1,3 +1,3 @@
-export const getInPath = (obj: any, path: string[]) => {
+export const getInPath = (obj: any, path: Array<string | number>) => {
   return path.reduce((acc, pathPart) => acc?.[pathPart], obj)
 }

From 154e74e6835bdbc736311001d19714ff47410c69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Wed, 5 Feb 2025 14:21:13 -0500
Subject: [PATCH 10/38] 4253 - Data History: ODP comparison (empty dataset) -
 Comments & diff layout (#4333)

* 4253 - ODP history: Add comment diffs

* 4253 - ODP history: Handle ODPDiffText layout from outside component
---
 .../components/Comments/Comments.tsx          | 23 ++++++++++++-------
 .../AdditionalComments/AdditionalComments.tsx |  6 ++++-
 .../DataSources/MethodsUsed/MethodsUsed.tsx   |  6 ++++-
 .../DataSources/References/References.tsx     |  6 ++++-
 .../components/NationalClass.tsx              | 12 ++++++++--
 .../components/ODPDiffText/ODPDiffText.scss   |  5 ----
 .../components/ODPDiffText/ODPDiffText.tsx    | 16 ++++---------
 .../components/ODPDiffText/types.ts           |  7 ++++++
 .../hooks/useFieldChanges.ts                  | 10 ++------
 9 files changed, 54 insertions(+), 37 deletions(-)
 delete mode 100644 src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.scss
 create mode 100644 src/client/pages/OriginalDataPoint/components/ODPDiffText/types.ts

diff --git a/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx b/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx
index d7a260ff81..89dde5feed 100644
--- a/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx
+++ b/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx
@@ -3,11 +3,13 @@ import { useTranslation } from 'react-i18next'
 
 import classNames from 'classnames'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useIsDataLocked } from 'client/store/ui/dataLock'
 import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
 import Button, { ButtonSize } from 'client/components/Buttons/Button'
 import { DataCell, DataGrid, DataRow } from 'client/components/DataGrid'
 import EditorWYSIWYG from 'client/components/EditorWYSIWYG'
+import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 
 import { useUpdateDescription } from './hooks/useUpdateDescription'
 import { useCommentsActions } from './useCommentsActions'
@@ -25,6 +27,7 @@ const Comments: React.FC<Props> = (props) => {
   const updateDescription = useUpdateDescription()
   const actions = useCommentsActions()
   const [open, setOpen] = useState<boolean>(false)
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
 
   useEffect(() => {
     if (open && isDataLocked) {
@@ -52,14 +55,18 @@ const Comments: React.FC<Props> = (props) => {
       </DataRow>
 
       <DataCell editable={open} gridColumn={canEditData ? `1/-1` : undefined} lastCol lastRow noBorder={!open}>
-        <div className={classNames('description__editor-container', { editable: open })}>
-          <EditorWYSIWYG
-            disabled={!open}
-            onChange={updateDescription}
-            repository
-            value={originalDataPoint.description}
-          />
-        </div>
+        {historyLastApprovedIsActive ? (
+          <ODPDiffText originalDataPoint={originalDataPoint} path={['description']} />
+        ) : (
+          <div className={classNames('description__editor-container', { editable: open })}>
+            <EditorWYSIWYG
+              disabled={!open}
+              onChange={updateDescription}
+              repository
+              value={originalDataPoint.description}
+            />
+          </div>
+        )}
       </DataCell>
     </DataGrid>
   )
diff --git a/src/client/pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx b/src/client/pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx
index 8ae43f3407..55d876f86d 100644
--- a/src/client/pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx
+++ b/src/client/pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx
@@ -63,7 +63,11 @@ const AdditionalComments: React.FC<Props> = (props: Props) => {
       </DataCell>
       <DataCell lastCol lastRow>
         {historyLastApprovedIsActive ? (
-          <ODPDiffText originalDataPoint={originalDataPoint} path={['dataSourceAdditionalComments']} />
+          <ODPDiffText
+            className="input-text disabled"
+            originalDataPoint={originalDataPoint}
+            path={['dataSourceAdditionalComments']}
+          />
         ) : (
           <TextArea
             disabled={disabled}
diff --git a/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx b/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx
index 73045bccf0..647932babd 100644
--- a/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx
+++ b/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx
@@ -62,7 +62,11 @@ const MethodsUsed: React.FC<Props> = (props: Props) => {
       <DataCell header>{t('nationalDataPoint.methodsUsed')}</DataCell>
       <DataCell lastCol>
         {historyLastApprovedIsActive ? (
-          <ODPDiffText originalDataPoint={originalDataPoint} path={['dataSourceMethods']} />
+          <ODPDiffText
+            className="input-text disabled"
+            originalDataPoint={originalDataPoint}
+            path={['dataSourceMethods']}
+          />
         ) : (
           <Select
             disabled={disabled}
diff --git a/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx b/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx
index 74a0053021..777d9c389f 100644
--- a/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx
+++ b/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx
@@ -57,7 +57,11 @@ const References: React.FC<Props> = (props: Props) => {
       <DataCell header>{t('nationalDataPoint.references')}</DataCell>
       <DataCell lastCol>
         {historyLastApprovedIsActive ? (
-          <ODPDiffText originalDataPoint={originalDataPoint} path={['dataSourceReferences']} />
+          <ODPDiffText
+            className="input-text disabled"
+            originalDataPoint={originalDataPoint}
+            path={['dataSourceReferences']}
+          />
         ) : (
           <EditorWYSIWYGLinks
             disabled={disabled}
diff --git a/src/client/pages/OriginalDataPoint/components/NationalClasses/components/NationalClass.tsx b/src/client/pages/OriginalDataPoint/components/NationalClasses/components/NationalClass.tsx
index 18779013ea..67a77a95fc 100644
--- a/src/client/pages/OriginalDataPoint/components/NationalClasses/components/NationalClass.tsx
+++ b/src/client/pages/OriginalDataPoint/components/NationalClasses/components/NationalClass.tsx
@@ -51,7 +51,11 @@ const NationalClass: React.FC<Props> = (props) => {
     <DataRow actions={actions}>
       <DataCell error={error} lastRow={lastRow}>
         {historyLastApprovedIsActive ? (
-          <ODPDiffText originalDataPoint={originalDataPoint} path={['nationalClasses', index, 'name']} />
+          <ODPDiffText
+            className="input-text disabled"
+            originalDataPoint={originalDataPoint}
+            path={['nationalClasses', index, 'name']}
+          />
         ) : (
           <InputText
             disabled={!canEditData}
@@ -65,7 +69,11 @@ const NationalClass: React.FC<Props> = (props) => {
 
       <DataCell lastCol lastRow={lastRow}>
         {historyLastApprovedIsActive ? (
-          <ODPDiffText originalDataPoint={originalDataPoint} path={['nationalClasses', index, 'definition']} />
+          <ODPDiffText
+            className="input-text disabled"
+            originalDataPoint={originalDataPoint}
+            path={['nationalClasses', index, 'definition']}
+          />
         ) : (
           <TextArea
             disabled={!canEditData}
diff --git a/src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.scss b/src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.scss
deleted file mode 100644
index 5daadc9750..0000000000
--- a/src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import 'src/client/style/partials';
-
-.odp-diff-text {
-  padding: $spacing-xxs;
-}
diff --git a/src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.tsx b/src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.tsx
index 8762274695..8cdc679109 100644
--- a/src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText.tsx
@@ -1,22 +1,16 @@
-import './ODPDiffText.scss'
 import React from 'react'
 
-import { OriginalDataPoint } from 'meta/assessment'
-
 import DiffText from 'client/components/DiffText'
 import { useFieldChanges } from 'client/pages/OriginalDataPoint/hooks/useFieldChanges'
 
-type Props = {
-  originalDataPoint: OriginalDataPoint
-  path: Array<string | number>
-}
+import { ODPDiffTextProps } from './types'
 
-const ODPDiffText: React.FC<Props> = (props) => {
-  const { originalDataPoint, path } = props
+const ODPDiffText: React.FC<ODPDiffTextProps> = (props) => {
+  const { className } = props
 
-  const changes = useFieldChanges({ originalDataPoint, path })
+  const changes = useFieldChanges(props)
 
-  return <DiffText changes={changes} className="odp-diff-text" />
+  return <DiffText changes={changes} className={className} />
 }
 
 export default ODPDiffText
diff --git a/src/client/pages/OriginalDataPoint/components/ODPDiffText/types.ts b/src/client/pages/OriginalDataPoint/components/ODPDiffText/types.ts
new file mode 100644
index 0000000000..cee70efa47
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ODPDiffText/types.ts
@@ -0,0 +1,7 @@
+import { OriginalDataPoint } from 'meta/assessment'
+
+export type ODPDiffTextProps = {
+  className?: string
+  originalDataPoint: OriginalDataPoint
+  path: Array<string | number>
+}
diff --git a/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts b/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
index d23f8f5efc..3cd6c0e5d9 100644
--- a/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
+++ b/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
@@ -5,22 +5,16 @@ import * as Diff from 'diff'
 import { Change } from 'diff'
 import { Objects } from 'utils/objects'
 
-import { OriginalDataPoint } from 'meta/assessment'
-
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { ODPDiffTextProps } from 'client/pages/OriginalDataPoint/components/ODPDiffText/types'
 import { DOMs } from 'client/utils/dom'
 
-type Props = {
-  originalDataPoint: OriginalDataPoint
-  path: Array<string | number>
-}
-
 type Returned = Array<Change>
 
 const _getSourceMethodText = (values: Array<string> | undefined, t: TFunction): string =>
   (values ?? [])?.map((value) => t(`nationalDataPoint.dataSourceMethodsOptions.${value}`)).join('\n\r')
 
-export const useFieldChanges = (props: Props): Returned => {
+export const useFieldChanges = (props: ODPDiffTextProps): Returned => {
   const { originalDataPoint, path } = props
 
   const { t } = useTranslation()

From ef123a844a5fdc811543f4a84bfe118dcf515759 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Wed, 5 Feb 2025 23:42:31 -0500
Subject: [PATCH 11/38] 4253 - Data History: ODP comparison (empty dataset) -
 Extent of forest non-calculated diffs (#4334)

* 4253 - ODP history: Add Extent of Forest non-calculated diffs

* 4253 - ODP history: Format Extent of Forest diffs
---
 .../ExtentOfForest/ExtentOfForestRow.tsx      | 123 ++++++++++++------
 .../components/ODPDiffText/types.ts           |   1 +
 .../hooks/useFieldChanges.ts                  |  13 +-
 3 files changed, 93 insertions(+), 44 deletions(-)

diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
index ea82d37d40..e1eead4435 100644
--- a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
@@ -11,12 +11,15 @@ import { Topics } from 'meta/messageCenter'
 import { TooltipId } from 'meta/tooltip'
 
 import { useCycle } from 'client/store/assessment'
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import PercentInput from 'client/components/PercentInput'
 import ReviewIndicator from 'client/components/ReviewIndicator'
 import ThousandSeparatedDecimalInput from 'client/components/ThousandSeparatedDecimalInput'
 import { Columns, useOnPaste } from 'client/pages/OriginalDataPoint/components/hooks/useOnPaste'
 import { useUpdateOriginalData } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalData'
 import { useUpdateOriginalDataField } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalDataField'
+import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
+import { ODPDiffTextProps } from 'client/pages/OriginalDataPoint/components/ODPDiffText/types'
 import { useNationalClassValidations } from 'client/pages/OriginalDataPoint/hooks/useNationalClassValidations'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
@@ -36,6 +39,10 @@ const columns: Columns = [
   { name: 'otherLandPercent' as keyof ODPNationalClass, type: 'decimal', precision: 3 },
 ]
 
+const _formatDecimalFieldFn: ODPDiffTextProps['formatFn'] = (v) => (!Objects.isEmpty(v) ? Numbers.format(v, 2) : '')
+const _formatPercentFieldFn: ODPDiffTextProps['formatFn'] = (v) =>
+  !Objects.isEmpty(v) ? `${Numbers.format(v, 3)}  %` : ''
+
 const ExtentOfForestRow: React.FC<Props> = (props) => {
   const { canEditData, index, nationalClassValidation, originalDataPoint } = props
 
@@ -58,6 +65,9 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
   if (!Objects.isEmpty(forestPercent) || !Objects.isEmpty(otherWoodedLandPercent)) {
     otherLand = Numbers.format(Numbers.sub(100, Numbers.add(forestPercent ?? 0, otherWoodedLandPercent ?? 0)), 3)
   }
+
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
   const _onPaste = useOnPaste({
     columns,
     index,
@@ -69,25 +79,40 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
 
   return (
     <tr className={classNameRowComments}>
-      <th className="fra-table__category-cell">{name}</th>
+      <th className="fra-table__category-cell">
+        {historyLastApprovedIsActive ? (
+          <ODPDiffText originalDataPoint={originalDataPoint} path={['nationalClasses', index, 'name']} />
+        ) : (
+          name
+        )}
+      </th>
       <td
         className={classNames(`fra-table__cell fra-table__divider`, {
           error: !nationalClassValidation.validArea,
         })}
       >
-        <ThousandSeparatedDecimalInput
-          disabled={!canEditData}
-          numberValue={area}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-            const { value } = event.target
-            const updateProps = { field: columns[0].name, value, index }
-            updateOriginalDataField(updateProps)
-          }}
-          onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
-            const odp = _onPaste({ event, colIndex: 0 })
-            updateOriginalData(odp)
-          }}
-        />
+        {historyLastApprovedIsActive ? (
+          <ODPDiffText
+            className="input-text disabled"
+            formatFn={_formatDecimalFieldFn}
+            originalDataPoint={originalDataPoint}
+            path={['nationalClasses', index, 'area']}
+          />
+        ) : (
+          <ThousandSeparatedDecimalInput
+            disabled={!canEditData}
+            numberValue={area}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              const { value } = event.target
+              const updateProps = { field: columns[0].name, value, index }
+              updateOriginalDataField(updateProps)
+            }}
+            onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
+              const odp = _onPaste({ event, colIndex: 0 })
+              updateOriginalData(odp)
+            }}
+          />
+        )}
       </td>
 
       <td
@@ -97,19 +122,28 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        <PercentInput
-          disabled={!canEditData}
-          numberValue={forestPercent}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-            const { value } = event.target
-            const updateProps = { field: columns[1].name, index, precision: columns[1].precision, value }
-            updateOriginalDataField(updateProps)
-          }}
-          onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
-            const odp = _onPaste({ event, colIndex: 1 })
-            updateOriginalData(odp)
-          }}
-        />
+        {historyLastApprovedIsActive ? (
+          <ODPDiffText
+            className="input-text disabled"
+            formatFn={_formatPercentFieldFn}
+            originalDataPoint={originalDataPoint}
+            path={['nationalClasses', index, 'forestPercent']}
+          />
+        ) : (
+          <PercentInput
+            disabled={!canEditData}
+            numberValue={forestPercent}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              const { value } = event.target
+              const updateProps = { field: columns[1].name, index, precision: columns[1].precision, value }
+              updateOriginalDataField(updateProps)
+            }}
+            onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
+              const odp = _onPaste({ event, colIndex: 1 })
+              updateOriginalData(odp)
+            }}
+          />
+        )}
       </td>
 
       <td
@@ -117,19 +151,28 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        <PercentInput
-          disabled={!canEditData}
-          numberValue={otherWoodedLandPercent}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-            const { value } = event.target
-            const updateProps = { field: columns[2].name, index, precision: columns[2].precision, value }
-            updateOriginalDataField(updateProps)
-          }}
-          onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
-            const odp = _onPaste({ event, colIndex: 2 })
-            updateOriginalData(odp)
-          }}
-        />
+        {historyLastApprovedIsActive ? (
+          <ODPDiffText
+            className="input-text disabled"
+            formatFn={_formatPercentFieldFn}
+            originalDataPoint={originalDataPoint}
+            path={['nationalClasses', index, 'otherWoodedLandPercent']}
+          />
+        ) : (
+          <PercentInput
+            disabled={!canEditData}
+            numberValue={otherWoodedLandPercent}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              const { value } = event.target
+              const updateProps = { field: columns[2].name, index, precision: columns[2].precision, value }
+              updateOriginalDataField(updateProps)
+            }}
+            onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
+              const odp = _onPaste({ event, colIndex: 2 })
+              updateOriginalData(odp)
+            }}
+          />
+        )}
       </td>
 
       <td className="fra-table__calculated-cell">
diff --git a/src/client/pages/OriginalDataPoint/components/ODPDiffText/types.ts b/src/client/pages/OriginalDataPoint/components/ODPDiffText/types.ts
index cee70efa47..a8d34885f2 100644
--- a/src/client/pages/OriginalDataPoint/components/ODPDiffText/types.ts
+++ b/src/client/pages/OriginalDataPoint/components/ODPDiffText/types.ts
@@ -2,6 +2,7 @@ import { OriginalDataPoint } from 'meta/assessment'
 
 export type ODPDiffTextProps = {
   className?: string
+  formatFn?: (value: string | null) => string
   originalDataPoint: OriginalDataPoint
   path: Array<string | number>
 }
diff --git a/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts b/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
index 3cd6c0e5d9..f26f746bf6 100644
--- a/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
+++ b/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
@@ -15,7 +15,7 @@ const _getSourceMethodText = (values: Array<string> | undefined, t: TFunction):
   (values ?? [])?.map((value) => t(`nationalDataPoint.dataSourceMethodsOptions.${value}`)).join('\n\r')
 
 export const useFieldChanges = (props: ODPDiffTextProps): Returned => {
-  const { originalDataPoint, path } = props
+  const { formatFn, originalDataPoint, path } = props
 
   const { t } = useTranslation()
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
@@ -33,11 +33,16 @@ export const useFieldChanges = (props: ODPDiffTextProps): Returned => {
 
       return multipleMethods ? Diff.diffLines(methodsPrev, methodsCurrent) : Diff.diffChars(methodsPrev, methodsCurrent)
     }
+    let textPrev = DOMs.getHtmlTextContent(valuePrev ?? '')
+    let textCurrent = DOMs.getHtmlTextContent(valueCurrent ?? '')
+
+    if (Objects.isFunction(formatFn)) {
+      textPrev = formatFn(textPrev)
+      textCurrent = formatFn(textCurrent)
+    }
 
-    const textPrev = DOMs.getHtmlTextContent(valuePrev ?? '')
-    const textCurrent = DOMs.getHtmlTextContent(valueCurrent ?? '')
     return Diff.diffChars(textPrev, textCurrent, {
       ignoreCase: false,
     })
-  }, [originalDataPoint, originalDataPointHistory, path, t])
+  }, [formatFn, originalDataPoint, originalDataPointHistory, path, t])
 }

From 01faac8209edffaf9a69289d111ea21ccc2163b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Sorja?= <ping@mirosorja.com>
Date: Thu, 6 Feb 2025 10:58:48 +0200
Subject: [PATCH 12/38] 4302 - Data History: Descriptions data sources
 comparison (Prev cycle) (#4335)

* 4302 - introduce CycleDataController.Description

* 4302 - use diffLines for meaningful changes

* 4302 - getDescriptionsHistory: prevCycle and getDescriptionsLastApproved
---
 .../hooks/useChanges.ts                       |  2 +-
 .../cycleData/descriptions/getDataSources.ts  |  2 +-
 .../cycleData/descriptions/getDescription.ts  |  2 +-
 .../descriptions/getDescriptionsHistory.ts    | 33 ++++++++-----------
 .../descriptions/removeDataSource.ts          |  2 +-
 .../descriptions/upsertDescription.ts         |  2 +-
 .../getDescriptionsLastApproved.ts            | 30 +++++++++++++++++
 .../controller/cycleData/description/index.ts | 13 ++++++++
 .../{ => description}/removeDataSource.ts     |  0
 .../{ => description}/upsertDescription.ts    |  0
 .../getBulkDownload/utils/getComments.ts      |  2 +-
 src/server/controller/cycleData/index.ts      | 13 +++-----
 12 files changed, 66 insertions(+), 35 deletions(-)
 create mode 100644 src/server/controller/cycleData/description/getDescriptionsLastApproved.ts
 create mode 100644 src/server/controller/cycleData/description/index.ts
 rename src/server/controller/cycleData/{ => description}/removeDataSource.ts (100%)
 rename src/server/controller/cycleData/{ => description}/upsertDescription.ts (100%)

diff --git a/src/client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges.ts b/src/client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges.ts
index a1fa63f3d0..ca0a9f4bef 100644
--- a/src/client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges.ts
+++ b/src/client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges.ts
@@ -25,7 +25,7 @@ const useChanges = (props: Props): Returned => {
     const textA = getTextContent(descriptionA)
     const textB = getTextContent(descriptionB)
 
-    const changes = Diff.diffWords(textA, textB, {
+    const changes = Diff.diffLines(textA, textB, {
       ignoreCase: false,
     })
 
diff --git a/src/server/api/cycleData/descriptions/getDataSources.ts b/src/server/api/cycleData/descriptions/getDataSources.ts
index 91ecf587ad..6139f87c93 100644
--- a/src/server/api/cycleData/descriptions/getDataSources.ts
+++ b/src/server/api/cycleData/descriptions/getDataSources.ts
@@ -17,7 +17,7 @@ export const getDataSources = async (req: CycleDataRequest<{ linkedVariable: str
 
     const { cycle, assessment } = await AssessmentController.getOneWithCycle({ assessmentName, cycleName })
 
-    const dataSources = await CycleDataController.getDataSources({
+    const dataSources = await CycleDataController.Description.getDataSources({
       assessment,
       countryIso,
       cycle,
diff --git a/src/server/api/cycleData/descriptions/getDescription.ts b/src/server/api/cycleData/descriptions/getDescription.ts
index 6b01cbe422..48f6f7e4fc 100644
--- a/src/server/api/cycleData/descriptions/getDescription.ts
+++ b/src/server/api/cycleData/descriptions/getDescription.ts
@@ -16,7 +16,7 @@ export const getDescription = async (req: Request, res: Response) => {
     const { cycle, assessment } = await AssessmentController.getOneWithCycle({ assessmentName, cycleName })
 
     const propsValues = { assessment, cycle, countryIso, sectionName, name }
-    const values = await CycleDataController.getDescriptionValues(propsValues)
+    const values = await CycleDataController.Description.getDescriptionValues(propsValues)
 
     Requests.send(res, values)
   } catch (e) {
diff --git a/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts b/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
index 490d461486..c52fe86159 100644
--- a/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
+++ b/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
@@ -1,35 +1,28 @@
 import { Response } from 'express'
+import { Objects } from 'utils/objects'
 
 import { CycleDataRequest } from 'meta/api/request'
-import { CountryIso } from 'meta/area'
-import { CommentableDescriptionName, DescriptionSectionValues } from 'meta/assessment'
+import { CommentableDescriptionName } from 'meta/assessment'
 
+import { AssessmentController } from 'server/controller/assessment'
+import { CycleDataController } from 'server/controller/cycleData'
 import Requests from 'server/utils/requests'
 
 type Request = CycleDataRequest<{ name?: CommentableDescriptionName }>
 
 export const getDescriptionsHistory = async (req: Request, res: Response) => {
   try {
-    const { sectionName, countryIso } = req.query
-    const values: { [key in CountryIso]?: DescriptionSectionValues } = {
-      [countryIso]: {
-        [sectionName]: {
-          // Example of expected output:
-          // dataSources: {
-          //   text: '',
-          //   dataSources: [],
-          // },
-          // generalComments: '',
-          // nationalClassificationAndDefinitions: '',
-          // originalData: '',
-          // reclassification: '',
-          // estimationAndForecasting: '',
-          // introductoryText: '',
-        },
-      },
+    const { assessmentName, cycleName, countryIso } = req.query
+    const { assessment, cycle } = await AssessmentController.getOneWithCycle({ assessmentName, cycleName })
+    const info = await CycleDataController.History.LastApproved.getInfo({ assessment, cycle, countryIso })
+
+    let descriptions = {}
+    if (!Objects.isNil(info)) {
+      const props = { assessment, cycle, countryIso, info }
+      descriptions = await CycleDataController.Description.getDescriptionsLastApproved(props)
     }
 
-    Requests.send(res, values)
+    Requests.send(res, descriptions)
   } catch (e) {
     Requests.sendErr(res, e)
   }
diff --git a/src/server/api/cycleData/descriptions/removeDataSource.ts b/src/server/api/cycleData/descriptions/removeDataSource.ts
index 35fbbb5538..4451dd4c88 100644
--- a/src/server/api/cycleData/descriptions/removeDataSource.ts
+++ b/src/server/api/cycleData/descriptions/removeDataSource.ts
@@ -18,7 +18,7 @@ export const removeDataSource = async (req: Request, res: Response) => {
     const { assessment, cycle } = await AssessmentController.getOneWithCycle({ assessmentName, cycleName })
 
     const propsDelete = { assessment, cycle, countryIso, sectionName, uuid, user }
-    await CycleDataController.removeDataSource(propsDelete)
+    await CycleDataController.Description.removeDataSource(propsDelete)
 
     SocketServer.emit(Sockets.getRequestReviewSummaryEvent({ assessmentName, cycleName, countryIso }))
 
diff --git a/src/server/api/cycleData/descriptions/upsertDescription.ts b/src/server/api/cycleData/descriptions/upsertDescription.ts
index 28f722c2d5..c06fcfcf96 100644
--- a/src/server/api/cycleData/descriptions/upsertDescription.ts
+++ b/src/server/api/cycleData/descriptions/upsertDescription.ts
@@ -18,7 +18,7 @@ export const upsertDescription = async (req: Request, res: Response) => {
     const { assessment, cycle } = await AssessmentController.getOneWithCycle({ assessmentName, cycleName })
 
     const propsUpsert = { assessment, cycle, countryIso, sectionName, name, value, user }
-    const description = await CycleDataController.upsertDescription(propsUpsert)
+    const description = await CycleDataController.Description.upsertDescription(propsUpsert)
 
     Requests.send(res, description)
   } catch (e) {
diff --git a/src/server/controller/cycleData/description/getDescriptionsLastApproved.ts b/src/server/controller/cycleData/description/getDescriptionsLastApproved.ts
new file mode 100644
index 0000000000..b6b91263a9
--- /dev/null
+++ b/src/server/controller/cycleData/description/getDescriptionsLastApproved.ts
@@ -0,0 +1,30 @@
+import { Objects } from 'utils/objects'
+
+import { CountryIso } from 'meta/area'
+import { Assessment, Cycle, DescriptionCountryValues } from 'meta/assessment'
+import { HistoryLastApprovedInfo } from 'meta/cycleData/historyLastApproved'
+
+import { BaseProtocol, DB } from 'server/db'
+import { DescriptionRepository } from 'server/repository/assessmentCycle/descriptions'
+
+type Props = {
+  assessment: Assessment
+  cycle: Cycle
+  countryIso: CountryIso
+  sectionName?: string
+  info: HistoryLastApprovedInfo
+}
+
+export const getDescriptionsLastApproved = async (
+  props: Props,
+  client: BaseProtocol = DB
+): Promise<DescriptionCountryValues> => {
+  const { info } = props
+  const { prevCycle } = info
+
+  if (!Objects.isNil(prevCycle)) {
+    return DescriptionRepository.getValues({ ...props, cycle: prevCycle }, client)
+  }
+
+  return {} as DescriptionCountryValues
+}
diff --git a/src/server/controller/cycleData/description/index.ts b/src/server/controller/cycleData/description/index.ts
new file mode 100644
index 0000000000..f849f08f23
--- /dev/null
+++ b/src/server/controller/cycleData/description/index.ts
@@ -0,0 +1,13 @@
+import { getDescriptionsLastApproved } from 'server/controller/cycleData/description/getDescriptionsLastApproved'
+import { DescriptionRepository } from 'server/repository/assessmentCycle/descriptions'
+
+import { removeDataSource } from './removeDataSource'
+import { upsertDescription } from './upsertDescription'
+
+export const Description = {
+  getDataSources: DescriptionRepository.getDataSources,
+  getDescriptionValues: DescriptionRepository.getValues,
+  getDescriptionsLastApproved,
+  removeDataSource,
+  upsertDescription,
+}
diff --git a/src/server/controller/cycleData/removeDataSource.ts b/src/server/controller/cycleData/description/removeDataSource.ts
similarity index 100%
rename from src/server/controller/cycleData/removeDataSource.ts
rename to src/server/controller/cycleData/description/removeDataSource.ts
diff --git a/src/server/controller/cycleData/upsertDescription.ts b/src/server/controller/cycleData/description/upsertDescription.ts
similarity index 100%
rename from src/server/controller/cycleData/upsertDescription.ts
rename to src/server/controller/cycleData/description/upsertDescription.ts
diff --git a/src/server/controller/cycleData/getBulkDownload/utils/getComments.ts b/src/server/controller/cycleData/getBulkDownload/utils/getComments.ts
index ef8b539a98..ec1ebc317c 100644
--- a/src/server/controller/cycleData/getBulkDownload/utils/getComments.ts
+++ b/src/server/controller/cycleData/getBulkDownload/utils/getComments.ts
@@ -50,7 +50,7 @@ const _extractTextAndLinks = (html: string) => {
 
 export const getComments = async (props: Props): Promise<string> => {
   const { countryIso, sectionName, name } = props
-  const values = await CycleDataController.getDescriptionValues(props)
+  const values = await CycleDataController.Description.getDescriptionValues(props)
   const comments = values?.[countryIso]?.[sectionName]?.[name]?.text
 
   return comments ? _extractTextAndLinks(comments) : ''
diff --git a/src/server/controller/cycleData/index.ts b/src/server/controller/cycleData/index.ts
index b18f51b8c8..b67947a005 100644
--- a/src/server/controller/cycleData/index.ts
+++ b/src/server/controller/cycleData/index.ts
@@ -6,7 +6,6 @@ import { Repository } from 'server/controller/cycleData/repository'
 import { TableData } from 'server/controller/cycleData/tableData'
 import { CountryActivityLogRepository } from 'server/repository/assessmentCycle/countryActivityLog'
 import { CountrySummaryRepository } from 'server/repository/assessmentCycle/countrySummary'
-import { DescriptionRepository } from 'server/repository/assessmentCycle/descriptions'
 import { MessageTopicUserRepository } from 'server/repository/assessmentCycle/messageTopicUser'
 import { OriginalDataPointRepository } from 'server/repository/assessmentCycle/originalDataPoint'
 
@@ -20,13 +19,12 @@ import { updateOriginalDataPointOriginalData } from './originalDataPoint/updateO
 import { updateOriginalDataPointYear } from './originalDataPoint/updateOriginalDataPointYear'
 import { clearTableData } from './clearTableData'
 import { Contacts } from './contact'
+import { Description } from './description'
 import { getBulkDownload } from './getBulkDownload'
 import { getNodeValuesEstimations } from './getNodeValuesEstimations'
 import { getReviewStatus } from './getReviewStatus'
 import { getTableData } from './getTableData'
 import { persistNodeValues, persistNodeValuesEstimated } from './persistNodeValues'
-import { removeDataSource } from './removeDataSource'
-import { upsertDescription } from './upsertDescription'
 
 export const CycleDataController = {
   // ===== node
@@ -64,16 +62,13 @@ export const CycleDataController = {
   getReviewStatus,
   getReviewSummary: MessageTopicUserRepository.getReviewSummary,
 
-  // ==== description
-  getDataSources: DescriptionRepository.getDataSources,
-  getDescriptionValues: DescriptionRepository.getValues,
-  upsertDescription,
-  removeDataSource,
-
   // ==== activities
   getActivities: CountryActivityLogRepository.getMany,
   getActivitiesCount: CountryActivityLogRepository.getCount,
 
+  // ====== description
+  Description,
+
   // ====== history
   History,
 

From 52c3bde827d7ef69fdf080a87f5cf4c3973a7449 Mon Sep 17 00:00:00 2001
From: Mino Togna <minotogna@users.noreply.github.com>
Date: Thu, 6 Feb 2025 11:19:16 +0100
Subject: [PATCH 13/38] 4305 - Data History: Data table (with ODP) comparison
 (Prev cycle) (#4332)

* 4305 - Data History: Data table (with ODP) comparison (Prev cycle)

* 4305 - review comments
---
 .../Table/GridHeadCell/GridHeadCell.tsx       |  8 ++--
 .../OdpHeaderCell/OdpHeaderCell.scss          | 12 +++--
 .../OdpHeaderCell/OdpHeaderCell.tsx           | 46 +++++++++---------
 .../useOdpHeaderLastApprovedHistoryInfo.ts    | 42 ++++++++++++++++
 .../Table/GridHeadCell/hooks/getODPHeader.ts  | 16 +++----
 .../hooks/useGridHeadCellProps.ts             | 26 ++++------
 .../DataTable/Table/GridHeadCell/types.ts     |  4 +-
 .../pages/Section/DataTable/Table/Table.tsx   | 25 ++++------
 .../DataTable/Table/hooks/_parseTable.ts      | 48 ++++++++-----------
 .../Table/hooks/useGridTemplateColumns.ts     |  3 +-
 .../useOriginalDataPointYearsWithHistory.ts   | 48 +++++++++++++++++++
 .../DataTable/Table/hooks/useParsedTable.ts   | 34 +++++--------
 .../pages/Section/DataTable/Table/types.ts    | 10 ++++
 .../DataTable/Table/utils/getODPColSpan.ts    | 18 +++++--
 .../data/hooks/useOriginalDataPointData.ts    | 12 ++---
 15 files changed, 217 insertions(+), 135 deletions(-)
 create mode 100644 src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/hooks/useOdpHeaderLastApprovedHistoryInfo.ts
 create mode 100644 src/client/pages/Section/DataTable/Table/hooks/useOriginalDataPointYearsWithHistory.ts

diff --git a/src/client/pages/Section/DataTable/Table/GridHeadCell/GridHeadCell.tsx b/src/client/pages/Section/DataTable/Table/GridHeadCell/GridHeadCell.tsx
index 34f3f9e93a..0292e57685 100644
--- a/src/client/pages/Section/DataTable/Table/GridHeadCell/GridHeadCell.tsx
+++ b/src/client/pages/Section/DataTable/Table/GridHeadCell/GridHeadCell.tsx
@@ -14,11 +14,11 @@ const GridHeadCell: React.FC<GridHeadCellProps> = (props) => {
   const { col, firstCol, table } = props
 
   const cycle = useCycle()
-  const { className, gridColumn, gridRow, lastCol, odpHeader } = useGridHeadCellProps(props)
+  const { className, gridColumn, gridRow, lastCol, odpYear } = useGridHeadCellProps(props)
 
   const { t } = useTranslation()
 
-  if (odpHeader) {
+  if (odpYear) {
     return (
       <OdpHeaderCell
         key={col.uuid}
@@ -26,9 +26,9 @@ const GridHeadCell: React.FC<GridHeadCellProps> = (props) => {
         gridColumn={gridColumn}
         gridRow={gridRow}
         lastCol={lastCol}
-        odpId={odpHeader.id}
-        odpYear={odpHeader.year}
+        odpYear={odpYear}
         sectionName={table.props.name}
+        table={table}
       />
     )
   }
diff --git a/src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/OdpHeaderCell.scss b/src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/OdpHeaderCell.scss
index e9617bce4f..b2003caa55 100644
--- a/src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/OdpHeaderCell.scss
+++ b/src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/OdpHeaderCell.scss
@@ -4,11 +4,15 @@
   background-color: rgba($ui-accent, 10%);
   font-weight: 700;
 
-  .link {
-    text-decoration: underline;
-  }
-
   .review-summary-status {
     margin: 0 $spacing-xxxs;
   }
 }
+
+.table-grid__odp-link {
+  text-decoration: underline;
+
+  &.removed {
+    pointer-events: none;
+  }
+}
diff --git a/src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/OdpHeaderCell.tsx b/src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/OdpHeaderCell.tsx
index d33689a98a..bc4707a7c7 100644
--- a/src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/OdpHeaderCell.tsx
+++ b/src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/OdpHeaderCell.tsx
@@ -1,45 +1,52 @@
 import './OdpHeaderCell.scss'
+import 'client/components/DiffText/DiffText.scss'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 
 import classNames from 'classnames'
+import { Objects } from 'utils/objects'
 
+import { CountryIso } from 'meta/area'
+import { Table } from 'meta/assessment'
 import { Routes } from 'meta/routes'
 import { TooltipId } from 'meta/tooltip'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useOdpReviewSummary } from 'client/store/ui/review/hooks'
-import { useCountryIso } from 'client/hooks'
 import { useIsPrintRoute } from 'client/hooks/useIsRoute'
-import { useCycleRouteParams } from 'client/hooks/useRouteParams'
+import { useCountryRouteParams } from 'client/hooks/useRouteParams'
 import { DataCell } from 'client/components/DataGrid'
 import ReviewSummaryIndicator from 'client/components/ReviewSummaryIndicator'
+import { ODPColHeader } from 'client/pages/Section/DataTable/Table/types'
+
+import { useOdpHeaderLastApprovedHistoryInfo } from './hooks/useOdpHeaderLastApprovedHistoryInfo'
 
 type Props = {
   className: string
   gridColumn: string
   gridRow: string
   lastCol?: boolean
-  odpId: number
-  odpYear: string
+  odpYear: ODPColHeader
   sectionName: string
+  table: Table
 }
 
 const OdpHeaderCell: React.FC<Props> = (props) => {
-  const { className, gridColumn, gridRow, lastCol, odpId, odpYear, sectionName } = props
-
-  const { assessmentName, cycleName } = useCycleRouteParams()
-  const countryIso = useCountryIso()
+  const { className, gridColumn, gridRow, lastCol, odpYear, sectionName, table } = props
+  const { id: odpId, year } = odpYear
 
-  const { print } = useIsPrintRoute()
   const { t } = useTranslation()
-
+  const { assessmentName, cycleName, countryIso } = useCountryRouteParams<CountryIso>()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const { print } = useIsPrintRoute()
   const reviewStatus = useOdpReviewSummary(odpId)
+  const historyInfo = useOdpHeaderLastApprovedHistoryInfo({ odpYear, table })
 
   if (print) {
     return (
       <DataCell className={classNames(className, 'header')} gridColumn={gridColumn} gridRow={gridRow}>
-        {odpYear}
+        {year}
       </DataCell>
     )
   }
@@ -52,22 +59,17 @@ const OdpHeaderCell: React.FC<Props> = (props) => {
       header
       lastCol={lastCol}
     >
-      <div>
+      <div className={classNames({ 'diff-text': !Objects.isNil(historyInfo) })}>
         <Link
-          className="link"
+          className={classNames('table-grid__odp-link', { added: historyInfo?.added, removed: historyInfo?.removed })}
           data-tooltip-content={t('nationalDataPoint.clickOnNDP')}
           data-tooltip-id={TooltipId.info}
-          to={Routes.OriginalDataPoint.generatePath({
-            assessmentName,
-            countryIso,
-            cycleName,
-            sectionName,
-            year: odpYear,
-          })}
+          to={Routes.OriginalDataPoint.generatePath({ assessmentName, countryIso, cycleName, sectionName, year })}
         >
-          {odpYear}
+          {year}
         </Link>
-        <ReviewSummaryIndicator status={reviewStatus} />
+
+        {!historyLastApprovedIsActive && <ReviewSummaryIndicator status={reviewStatus} />}
       </div>
     </DataCell>
   )
diff --git a/src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/hooks/useOdpHeaderLastApprovedHistoryInfo.ts b/src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/hooks/useOdpHeaderLastApprovedHistoryInfo.ts
new file mode 100644
index 0000000000..868470e7eb
--- /dev/null
+++ b/src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/hooks/useOdpHeaderLastApprovedHistoryInfo.ts
@@ -0,0 +1,42 @@
+import { useMemo } from 'react'
+
+import { Objects } from 'utils/objects'
+
+import { CountryIso } from 'meta/area'
+import { Table } from 'meta/assessment'
+import { RecordAssessmentDatas } from 'meta/data'
+
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useLastApprovedHistoryTableData } from 'client/store/data/hooks/useLastApprovedHistoryTableData'
+import { useCountryRouteParams } from 'client/hooks/useRouteParams'
+import { ODPColHeader } from 'client/pages/Section/DataTable/Table/types'
+
+type Props = {
+  odpYear: ODPColHeader
+  table: Table
+}
+
+type Returned = {
+  added: boolean
+  removed: boolean
+}
+
+export const useOdpHeaderLastApprovedHistoryInfo = (props: Props): Returned | undefined => {
+  const { odpYear, table } = props
+  const { name: tableName } = table.props
+
+  const { assessmentName, cycleName, countryIso } = useCountryRouteParams<CountryIso>()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const historyData = useLastApprovedHistoryTableData()
+
+  return useMemo<Returned | undefined>(() => {
+    if (historyLastApprovedIsActive && !Objects.isNil(historyData)) {
+      const _props = { assessmentName, cycleName, countryIso, tableName, data: historyData }
+      const tableData = RecordAssessmentDatas.getTableData(_props)
+      const existsInHistory = Object.values(tableData?.[odpYear.year] ?? {}).some((v) => Boolean(v.odpId))
+
+      return { added: !existsInHistory, removed: Objects.isNil(odpYear.id) }
+    }
+    return undefined
+  }, [assessmentName, countryIso, cycleName, historyData, historyLastApprovedIsActive, odpYear, tableName])
+}
diff --git a/src/client/pages/Section/DataTable/Table/GridHeadCell/hooks/getODPHeader.ts b/src/client/pages/Section/DataTable/Table/GridHeadCell/hooks/getODPHeader.ts
index a989000fc9..a82d318b96 100644
--- a/src/client/pages/Section/DataTable/Table/GridHeadCell/hooks/getODPHeader.ts
+++ b/src/client/pages/Section/DataTable/Table/GridHeadCell/hooks/getODPHeader.ts
@@ -1,21 +1,18 @@
 import { Country } from 'meta/area'
-import { Col, Table } from 'meta/assessment'
+import { Col, Table, TableNames } from 'meta/assessment'
 
-type OdpYear = {
-  id: number
-  year: string
-}
+import { ODPColHeader } from 'client/pages/Section/DataTable/Table/types'
 
 type Props = {
   col: Col
   columnName: string
   country: Country
-  odpYears: Array<OdpYear>
+  odpYears: Array<ODPColHeader>
   showOdp: boolean
   table: Table
 }
 
-type Returned = OdpYear | undefined
+type Returned = ODPColHeader | undefined
 
 export const getODPHeader = (props: Props): Returned => {
   const { col, columnName, country, odpYears, showOdp, table } = props
@@ -25,7 +22,10 @@ export const getODPHeader = (props: Props): Returned => {
   if (isODPVisible) {
     odpHeader = odpYears?.find((odp) => odp.year === columnName)
   }
-  if (table.props.name === 'forestCharacteristics' && !country.props.forestCharacteristics.useOriginalDataPoint) {
+  if (
+    table.props.name === TableNames.forestCharacteristics &&
+    !country.props.forestCharacteristics.useOriginalDataPoint
+  ) {
     odpHeader = undefined
   }
 
diff --git a/src/client/pages/Section/DataTable/Table/GridHeadCell/hooks/useGridHeadCellProps.ts b/src/client/pages/Section/DataTable/Table/GridHeadCell/hooks/useGridHeadCellProps.ts
index 961f7b3149..a451d5a3b7 100644
--- a/src/client/pages/Section/DataTable/Table/GridHeadCell/hooks/useGridHeadCellProps.ts
+++ b/src/client/pages/Section/DataTable/Table/GridHeadCell/hooks/useGridHeadCellProps.ts
@@ -7,10 +7,11 @@ import { Cols } from 'meta/assessment'
 
 import { useAssessmentCountry } from 'client/store/area'
 import { useCycle } from 'client/store/assessment'
-import { useOriginalDataPointYears } from 'client/store/data'
 import { useShowOriginalDatapoints } from 'client/store/ui/assessmentSection'
+import { ODPColHeader } from 'client/pages/Section/DataTable/Table/types'
 import { getODPColSpan } from 'client/pages/Section/DataTable/Table/utils/getODPColSpan'
 
+import { useOriginalDataPointYearsWithHistory } from '../../hooks/useOriginalDataPointYearsWithHistory'
 import { GridHeadCellProps } from '../types'
 import { getODPHeader } from './getODPHeader'
 
@@ -19,10 +20,7 @@ type Returned = {
   gridColumn: string
   gridRow: string
   lastCol: boolean
-  odpHeader?: {
-    id: number
-    year: string
-  }
+  odpYear?: ODPColHeader
 }
 
 export const useGridHeadCellProps = (props: GridHeadCellProps): Returned => {
@@ -30,19 +28,19 @@ export const useGridHeadCellProps = (props: GridHeadCellProps): Returned => {
 
   const country = useAssessmentCountry()
   const cycle = useCycle()
-  const odpYears = useOriginalDataPointYears()
   const showOdp = useShowOriginalDatapoints()
+  const odpYears = useOriginalDataPointYearsWithHistory(props)
 
   return useMemo<Returned>(() => {
-    const { odp: isOdpTable } = table.props
+    const { odp } = table.props
 
     const { colSpan: defaultColSpan, gridRow } = Cols.getStyle({ col, cycle })
-    const columnName = headers[colIndex]
+    const { columnName } = headers[colIndex] ?? {}
 
-    const odpHeader = getODPHeader({ col, columnName, country, odpYears, showOdp, table })
+    const odpYear = getODPHeader({ col, columnName, country, odpYears, showOdp, table })
 
     let colSpan = defaultColSpan
-    if (isOdpTable && !defaultColSpan) {
+    if (odp && !defaultColSpan) {
       colSpan = getODPColSpan({ assessmentName, cycleName: cycle.name, data, headers, table })
     }
     const gridColumn = Objects.isNil(colSpan) ? undefined : `span ${colSpan}`
@@ -53,12 +51,6 @@ export const useGridHeadCellProps = (props: GridHeadCellProps): Returned => {
 
     const lastCol = colIndex === row.cols.length - 1
 
-    return {
-      className,
-      gridColumn,
-      gridRow,
-      lastCol,
-      odpHeader,
-    }
+    return { className, gridColumn, gridRow, lastCol, odpYear }
   }, [assessmentName, col, colIndex, country, cycle, data, headers, odpYears, row, rowIndex, showOdp, table])
 }
diff --git a/src/client/pages/Section/DataTable/Table/GridHeadCell/types.ts b/src/client/pages/Section/DataTable/Table/GridHeadCell/types.ts
index 2ea49ed5eb..61d1a8cc6a 100644
--- a/src/client/pages/Section/DataTable/Table/GridHeadCell/types.ts
+++ b/src/client/pages/Section/DataTable/Table/GridHeadCell/types.ts
@@ -1,13 +1,15 @@
 import { Col, Row, Table } from 'meta/assessment'
 import { RecordAssessmentData } from 'meta/data'
 
+import { ColHeader } from 'client/pages/Section/DataTable/Table/types'
+
 export type GridHeadCellProps = {
   assessmentName: string
   col: Col
   colIndex: number
   data: RecordAssessmentData
   firstCol: boolean
-  headers: Array<string>
+  headers: Array<ColHeader>
   row: Row
   rowIndex: number
   table: Table
diff --git a/src/client/pages/Section/DataTable/Table/Table.tsx b/src/client/pages/Section/DataTable/Table/Table.tsx
index 9f009d7752..d5cbcd2f2a 100644
--- a/src/client/pages/Section/DataTable/Table/Table.tsx
+++ b/src/client/pages/Section/DataTable/Table/Table.tsx
@@ -32,37 +32,30 @@ type Props = {
 }
 
 const Table: React.FC<Props> = (props) => {
-  const { assessmentName, sectionName, sectionAnchor, table: tableProps, data, disabled } = props
+  const { assessmentName, sectionName, sectionAnchor, table: _table, data, disabled } = props
 
+  const isDataLocked = useIsDataLocked()
   const canEdit = useCanEdit(sectionName)
-
+  const canViewReview = useCanViewReview(sectionName)
   const { print } = useIsPrintRoute()
 
-  const gridRef = useRef<HTMLDivElement>(null)
-
-  const { firstHeaderRowSpan, headers, noticeMessages, rowsData, rowsHeader, table, withReview } = useParsedTable({
-    assessmentName,
-    data,
-    table: tableProps,
-  })
+  const parsedTable = useParsedTable({ assessmentName, data, table: _table })
+  const { firstHeaderRowSpan, headers, noticeMessages, rowsData, rowsHeader, table, withReview } = parsedTable
 
   const gridTemplateColumns = useGridTemplateColumns({ headers, table })
+  const gridRef = useRef<HTMLDivElement>(null)
   useCellBorderCorrection({ disabled, gridRef, rowsData, rowsHeader })
 
-  const canViewReview = useCanViewReview(sectionName)
   const withActions = withReview && canViewReview
-
   const { secondary, name } = table.props
-
-  const isDataLocked = useIsDataLocked()
   const canClearData = !print && !isDataLocked && !table.props.readonly
 
-  const fileName = `${sectionAnchor ? `${sectionAnchor} ` : ''}${name}`
-
   return (
     <div className={classNames('table-grid-container', { 'secondary-table': secondary })}>
       <div className="table-grid-actions">
-        {!print && <ButtonGridExport filename={fileName} gridRef={gridRef} />}
+        {!print && (
+          <ButtonGridExport filename={`${sectionAnchor ? `${sectionAnchor} ` : ''}${name}`} gridRef={gridRef} />
+        )}
         <ButtonCopyValues gridRef={gridRef} table={table} />
         {canClearData && <ButtonTableClear disabled={disabled} sectionName={sectionName} table={table} />}
       </div>
diff --git a/src/client/pages/Section/DataTable/Table/hooks/_parseTable.ts b/src/client/pages/Section/DataTable/Table/hooks/_parseTable.ts
index e72432edf7..987ee0d2cf 100644
--- a/src/client/pages/Section/DataTable/Table/hooks/_parseTable.ts
+++ b/src/client/pages/Section/DataTable/Table/hooks/_parseTable.ts
@@ -3,46 +3,40 @@ import { UUIDs } from 'utils/uuids'
 
 import { CountryIso } from 'meta/area'
 import { AssessmentName, Col as TypeCol, Cycle, Row as TypeRow, RowType, Table } from 'meta/assessment'
-import { RecordAssessmentData, RecordAssessmentDatas } from 'meta/data'
+import { RecordAssessmentData } from 'meta/data'
+
+import { ColHeader, ODPColHeader } from 'client/pages/Section/DataTable/Table/types'
 
 type Props = {
   assessmentName: AssessmentName
   countryIso: CountryIso
   cycle: Cycle
   data: RecordAssessmentData
+  odpYears: Array<ODPColHeader>
   showODP: boolean
   table: Table
 }
 
-const getHeaders = (props: Props): string[] => {
-  const { assessmentName, countryIso, cycle, data, showODP, table } = props
+const getHeaders = (props: Props): Array<ColHeader> => {
+  const { cycle, odpYears, showODP, table } = props
 
-  const headers = table.props.columnNames[cycle.uuid]
+  let columnNames = table.props.columnNames[cycle.uuid]
   if (table.props.odp && showODP) {
-    const headersDiff = RecordAssessmentDatas.getCycleData({ data, assessmentName, cycleName: cycle.name })
-      ? Arrays.difference(
-          Object.keys(
-            RecordAssessmentDatas.getTableData({
-              data,
-              assessmentName,
-              cycleName: cycle.name,
-              tableName: table.props.name,
-              countryIso,
-            })
-          ),
-          headers
-        )
-      : []
-    return [...headersDiff, ...headers].sort((a, b) => a.localeCompare(b))
+    const columnDiffs = Arrays.difference(
+      odpYears.map(({ year }) => year),
+      columnNames
+    )
+    columnNames = [...columnDiffs, ...columnNames].sort((a, b) => a.localeCompare(b))
   }
-  return headers.map((header) => {
+
+  return columnNames.map<ColHeader>((header) => {
     // Case ex. 1990_2000 => 1990-2000
-    if (/^\d{4}_\d{4}$/.test(header)) return header.replace('_', '-')
-    return header
+    const columnName = /^\d{4}_\d{4}$/.test(header) ? header.replace('_', '-') : header
+    return { columnName, odp: odpYears.find((o) => o.year === columnName) }
   })
 }
 
-export const parseTable = (props: Props): { headers: Array<string>; table: Table } => {
+export const parseTable = (props: Props): { headers: Array<ColHeader>; table: Table } => {
   const { cycle, table } = props
   const headers = getHeaders(props)
 
@@ -52,17 +46,17 @@ export const parseTable = (props: Props): { headers: Array<string>; table: Table
 
   // Returns true if we are on header row that contains colNames (eg. '1990' or '% of forest area 2015')
   const isHeaderData = (row: TypeRow): boolean =>
-    row.props.type === RowType.header && headers && headers.length > 0 && headers.includes(row.cols[0].props.colName)
+    row.props.type === RowType.header && Boolean(headers?.find((h) => h.columnName === row.cols[0].props.colName))
 
   const rows = table.rows.map((row) => {
     let cols = row.cols.map((c) => c)
     const headerData = isHeaderData(row)
 
     if (headerData || row.props.type === RowType.data) {
-      cols = headers.map<TypeCol>((columnHeader) => {
-        let col = row.cols.find((c) => c.props.colName === columnHeader)
+      cols = headers.map<TypeCol>(({ columnName }) => {
+        let col = row.cols.find((c) => c.props.colName === columnName)
         if (!col) {
-          col = { ...row.cols[1], uuid: UUIDs.v4(), props: { ...row.cols[1].props, colName: columnHeader } }
+          col = { ...row.cols[1], uuid: UUIDs.v4(), props: { ...row.cols[1].props, colName: columnName } }
         }
         return col
       })
diff --git a/src/client/pages/Section/DataTable/Table/hooks/useGridTemplateColumns.ts b/src/client/pages/Section/DataTable/Table/hooks/useGridTemplateColumns.ts
index da3dc9f39f..a015b1064b 100644
--- a/src/client/pages/Section/DataTable/Table/hooks/useGridTemplateColumns.ts
+++ b/src/client/pages/Section/DataTable/Table/hooks/useGridTemplateColumns.ts
@@ -5,9 +5,10 @@ import { Objects } from 'utils/objects'
 import { Table } from 'meta/assessment'
 
 import { useCycle } from 'client/store/assessment'
+import { ColHeader } from 'client/pages/Section/DataTable/Table/types'
 
 type Props = {
-  headers: Array<string>
+  headers: Array<ColHeader>
   table: Table
 }
 
diff --git a/src/client/pages/Section/DataTable/Table/hooks/useOriginalDataPointYearsWithHistory.ts b/src/client/pages/Section/DataTable/Table/hooks/useOriginalDataPointYearsWithHistory.ts
new file mode 100644
index 0000000000..ea77bfbe6d
--- /dev/null
+++ b/src/client/pages/Section/DataTable/Table/hooks/useOriginalDataPointYearsWithHistory.ts
@@ -0,0 +1,48 @@
+import { useMemo } from 'react'
+
+import { Objects } from 'utils/objects'
+
+import { CountryIso } from 'meta/area'
+import { AssessmentName, Table } from 'meta/assessment'
+import { RecordAssessmentDatas } from 'meta/data'
+
+import { useHistoryLastApprovedIsActive, useOriginalDataPointYears } from 'client/store/data'
+import { useLastApprovedHistoryTableData } from 'client/store/data/hooks/useLastApprovedHistoryTableData'
+import { useCountryRouteParams } from 'client/hooks/useRouteParams'
+import { ODPColHeader } from 'client/pages/Section/DataTable/Table/types'
+
+type Props = {
+  assessmentName: AssessmentName
+  table: Table
+}
+
+export const useOriginalDataPointYearsWithHistory = (props: Props): Array<ODPColHeader> => {
+  const { assessmentName, table } = props
+  const { name: tableName, odp } = table.props
+
+  const { cycleName, countryIso } = useCountryRouteParams<CountryIso>()
+  const odpYears = useOriginalDataPointYears()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const data = useLastApprovedHistoryTableData()
+
+  return useMemo<Array<ODPColHeader>>(() => {
+    const _odpYears = odpYears ?? []
+
+    if (historyLastApprovedIsActive && odp) {
+      const odpYearsMap = _odpYears.reduce<Record<string, ODPColHeader>>(
+        (acc, odpYear) => ({ ...acc, [odpYear.year]: odpYear }),
+        {}
+      )
+      const tableData = RecordAssessmentDatas.getTableData({ assessmentName, cycleName, countryIso, tableName, data })
+      Object.entries(tableData).forEach(([year, value]) => {
+        const nodeValues = Object.values(value)
+        if (nodeValues.some((v) => !Objects.isNil(v.odpId)) && !odpYearsMap[year]) {
+          odpYearsMap[year] = { year, id: undefined }
+        }
+      })
+      return Object.values(odpYearsMap)
+    }
+
+    return _odpYears
+  }, [assessmentName, countryIso, cycleName, data, historyLastApprovedIsActive, odp, odpYears, tableName])
+}
diff --git a/src/client/pages/Section/DataTable/Table/hooks/useParsedTable.ts b/src/client/pages/Section/DataTable/Table/hooks/useParsedTable.ts
index fd03433753..2fb773b9b5 100644
--- a/src/client/pages/Section/DataTable/Table/hooks/useParsedTable.ts
+++ b/src/client/pages/Section/DataTable/Table/hooks/useParsedTable.ts
@@ -2,14 +2,17 @@ import { useMemo } from 'react'
 
 import { Objects } from 'utils/objects'
 
+import { CountryIso } from 'meta/area'
 import { AssessmentName, Cols, Row, RowType, Table } from 'meta/assessment'
 import { RecordAssessmentData } from 'meta/data'
 
 import { useCycle } from 'client/store/assessment'
 import { useShowOriginalDatapoints } from 'client/store/ui/assessmentSection'
-import { useCountryIso } from 'client/hooks'
+import { useCountryRouteParams } from 'client/hooks/useRouteParams'
+import { ColHeader } from 'client/pages/Section/DataTable/Table/types'
 
 import { parseTable } from './_parseTable'
+import { useOriginalDataPointYearsWithHistory } from './useOriginalDataPointYearsWithHistory'
 
 type Props = {
   assessmentName: AssessmentName
@@ -19,7 +22,7 @@ type Props = {
 
 type Returned = {
   firstHeaderRowSpan: number
-  headers: Array<string>
+  headers: Array<ColHeader>
   noticeMessages: Array<Row>
   rowsData: Array<Row>
   rowsHeader: Array<Row>
@@ -28,21 +31,16 @@ type Returned = {
 }
 
 export const useParsedTable = (props: Props): Returned => {
-  const { assessmentName, data, table: tableProps } = props
+  const { assessmentName, data, table: _table } = props
 
-  const countryIso = useCountryIso()
+  const { countryIso } = useCountryRouteParams<CountryIso>()
   const cycle = useCycle()
   const showODP = useShowOriginalDatapoints()
+  const odpYears = useOriginalDataPointYearsWithHistory({ assessmentName, table: _table })
 
   return useMemo<Returned>(() => {
-    const { headers, table } = parseTable({
-      assessmentName,
-      countryIso,
-      cycle,
-      data,
-      showODP,
-      table: tableProps,
-    })
+    const _props = { assessmentName, countryIso, cycle, data, odpYears, showODP, table: _table }
+    const { headers, table } = parseTable(_props)
 
     const rowsData: Array<Row> = []
     const rowsHeader: Array<Row> = []
@@ -67,14 +65,6 @@ export const useParsedTable = (props: Props): Returned => {
       firstHeaderRowSpan = rowSpan ?? 1
     }
 
-    return {
-      firstHeaderRowSpan,
-      headers,
-      noticeMessages,
-      rowsData,
-      rowsHeader,
-      table,
-      withReview,
-    }
-  }, [assessmentName, countryIso, cycle, data, showODP, tableProps])
+    return { firstHeaderRowSpan, headers, noticeMessages, rowsData, rowsHeader, table, withReview }
+  }, [_table, assessmentName, countryIso, cycle, data, odpYears, showODP])
 }
diff --git a/src/client/pages/Section/DataTable/Table/types.ts b/src/client/pages/Section/DataTable/Table/types.ts
index a1bb2c3553..510c7ae970 100644
--- a/src/client/pages/Section/DataTable/Table/types.ts
+++ b/src/client/pages/Section/DataTable/Table/types.ts
@@ -12,3 +12,13 @@ export type RowProps = {
   sectionName: string
   table: Table
 }
+
+export type ColHeader = {
+  columnName: string
+  odp?: ODPColHeader
+}
+
+export type ODPColHeader = {
+  id: number
+  year: string
+}
diff --git a/src/client/pages/Section/DataTable/Table/utils/getODPColSpan.ts b/src/client/pages/Section/DataTable/Table/utils/getODPColSpan.ts
index 6b0785579b..3d44ef682b 100644
--- a/src/client/pages/Section/DataTable/Table/utils/getODPColSpan.ts
+++ b/src/client/pages/Section/DataTable/Table/utils/getODPColSpan.ts
@@ -4,20 +4,28 @@ import { Objects } from 'utils/objects'
 import { AssessmentName, CycleName, Table } from 'meta/assessment'
 import { RecordAssessmentData, RecordAssessmentDatas } from 'meta/data'
 
-export const getODPColSpan = (props: {
+import { ColHeader } from 'client/pages/Section/DataTable/Table/types'
+
+type Props = {
   assessmentName: AssessmentName
   cycleName: CycleName
   data: RecordAssessmentData
-  headers: Array<string>
+  headers: Array<ColHeader>
   table: Table
-}): number => {
+}
+
+export const getODPColSpan = (props: Props): number => {
   const { assessmentName, cycleName, data, headers, table } = props
+
   if (Objects.isEmpty(props.data?.[assessmentName]?.[cycleName])) return headers.length
 
   const [[, tableData]] = Object.entries(RecordAssessmentDatas.getCycleData({ assessmentName, cycleName, data }))
-  const tableDataKeys = Object.keys(tableData?.[table.props.name] || {})
+  const dataColumnNames = Object.keys(tableData?.[table.props.name] || {})
 
-  const keysDifference = Arrays.difference(tableDataKeys, headers)
+  const keysDifference = Arrays.difference(
+    dataColumnNames,
+    headers.map((h) => h.columnName)
+  )
 
   return keysDifference.length + headers.length
 }
diff --git a/src/client/store/data/hooks/useOriginalDataPointData.ts b/src/client/store/data/hooks/useOriginalDataPointData.ts
index 71fbdf81fc..38fd00b3f3 100644
--- a/src/client/store/data/hooks/useOriginalDataPointData.ts
+++ b/src/client/store/data/hooks/useOriginalDataPointData.ts
@@ -5,16 +5,12 @@ import { RecordAssessmentDatas, RecordColumnData } from 'meta/data'
 import { useAppSelector } from 'client/store'
 import { useCountryRouteParams } from 'client/hooks/useRouteParams'
 
+const tableName = TableNames.originalDataPointValue
+
 export const useOriginalDataPointData = (): RecordColumnData => {
-  const { assessmentName, cycleName, countryIso } = useCountryRouteParams()
+  const { assessmentName, cycleName, countryIso } = useCountryRouteParams<CountryIso>()
 
   return useAppSelector((state) =>
-    RecordAssessmentDatas.getTableData({
-      assessmentName,
-      cycleName,
-      data: state.data.tableData,
-      countryIso: countryIso as CountryIso,
-      tableName: TableNames.originalDataPointValue,
-    })
+    RecordAssessmentDatas.getTableData({ assessmentName, cycleName, data: state.data.tableData, countryIso, tableName })
   )
 }

From 61d13f345f1a7a29a110ff33738565cbfb7414dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Thu, 6 Feb 2025 07:55:42 -0500
Subject: [PATCH 14/38] 4253 - Data History: ODP comparison (empty dataset) -
 Extent of forest calculated totals (#4336)

* 4253 - ODP history: Add variables for calculations

* 4253 - ODP history: Add Extent of Forest calculated col total diffs
---
 .../ExtentOfForest/ExtentOfForest.tsx         | 31 +++++++-
 .../ExtentOfForest/hooks/useTotalsChange.ts   | 76 +++++++++++++++++++
 2 files changed, 103 insertions(+), 4 deletions(-)
 create mode 100644 src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts

diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx
index 675114f67f..053f85821c 100644
--- a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx
@@ -5,11 +5,14 @@ import { Numbers } from 'utils/numbers'
 
 import { ODPs, OriginalDataPoint } from 'meta/assessment/originalDataPoint'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useIsPrintRoute } from 'client/hooks/useIsRoute'
 import { useCycleRouteParams } from 'client/hooks/useRouteParams'
 import ButtonTableExport from 'client/components/ButtonTableExport'
 import DefinitionLink from 'client/components/DefinitionLink'
+import DiffText from 'client/components/DiffText'
 
+import { useTotalsChange } from './hooks/useTotalsChange'
 import ExtentOfForestRow from './ExtentOfForestRow'
 
 type Props = {
@@ -34,6 +37,18 @@ const ExtentOfForest: React.FC<Props> = (props) => {
     ODPs.validateNationalClass(originalDataPoint, index)
   )
 
+  const totalArea = Numbers.format(ODPs.calcTotalArea({ originalDataPoint }))
+  const totalForestPercentArea = Numbers.format(ODPs.calcTotalFieldArea({ originalDataPoint, field: 'forestPercent' }))
+  const totalOtherWoodedLandPercentArea = Numbers.format(
+    ODPs.calcTotalFieldArea({ originalDataPoint, field: 'otherWoodedLandPercent' })
+  )
+  const totalLandArea = Numbers.format(ODPs.calcTotalLandArea({ originalDataPoint }))
+
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  const _totals = { totalArea, totalForestPercentArea, totalLandArea, totalOtherWoodedLandPercentArea }
+  const totalsChange = useTotalsChange(_totals)
+
   const tableRef = useRef(null)
 
   const fileName = `odp-${t(`nationalDataPoint.forestCategoriesLabel${cycleName !== '2020' ? '2025' : ''}`)} ${
@@ -97,16 +112,24 @@ const ExtentOfForest: React.FC<Props> = (props) => {
               <tr>
                 <th className="fra-table__header-cell-left">{t('nationalDataPoint.total')}</th>
                 <td className="fra-table__calculated-cell fra-table__divider">
-                  {Numbers.format(ODPs.calcTotalArea({ originalDataPoint }))}
+                  {historyLastApprovedIsActive ? <DiffText changes={totalsChange?.totalArea} /> : totalArea}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {Numbers.format(ODPs.calcTotalFieldArea({ originalDataPoint, field: 'forestPercent' }))}
+                  {historyLastApprovedIsActive ? (
+                    <DiffText changes={totalsChange?.totalForestPercentArea} />
+                  ) : (
+                    totalForestPercentArea
+                  )}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {Numbers.format(ODPs.calcTotalFieldArea({ originalDataPoint, field: 'otherWoodedLandPercent' }))}
+                  {historyLastApprovedIsActive ? (
+                    <DiffText changes={totalsChange?.totalOtherWoodedLandPercentArea} />
+                  ) : (
+                    totalOtherWoodedLandPercentArea
+                  )}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {Numbers.format(ODPs.calcTotalLandArea({ originalDataPoint }))}
+                  {historyLastApprovedIsActive ? <DiffText changes={totalsChange?.totalLandArea} /> : totalLandArea}
                 </td>
               </tr>
             </tbody>
diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts
new file mode 100644
index 0000000000..756337b460
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts
@@ -0,0 +1,76 @@
+import { useMemo } from 'react'
+
+import * as Diff from 'diff'
+import { Change } from 'diff'
+import { Numbers } from 'utils/numbers'
+import { Objects } from 'utils/objects'
+
+import { ODPs } from 'meta/assessment'
+
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+
+type Props = {
+  totalArea: string | null
+  totalForestPercentArea: string | null
+  totalLandArea: string | null
+  totalOtherWoodedLandPercentArea: string | null
+}
+
+type Returned =
+  | {
+      [K in keyof Props]: Array<Change>
+    }
+  | undefined
+
+export const useTotalsChange = (props: Props): Returned => {
+  const {
+    totalArea: totalAreaCurrent,
+    totalForestPercentArea: totalForestPercentAreaCurrent,
+    totalLandArea: totalLandAreaCurrent,
+    totalOtherWoodedLandPercentArea: totalOtherWoodedLandPercentAreaCurrent,
+  } = props
+
+  const originalDataPointHistory = useLastApprovedOriginalDataPoint()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  return useMemo<Returned>(() => {
+    if (!historyLastApprovedIsActive) return undefined
+
+    const canCalculate = !Objects.isEmpty(originalDataPointHistory)
+
+    const totalAreaPrev = canCalculate
+      ? Numbers.format(ODPs.calcTotalArea({ originalDataPoint: originalDataPointHistory }))
+      : ''
+    const totalArea = Diff.diffChars(totalAreaPrev ?? '', totalAreaCurrent ?? '')
+
+    const totalForestPercentAreaPrev = canCalculate
+      ? Numbers.format(ODPs.calcTotalFieldArea({ originalDataPoint: originalDataPointHistory, field: 'forestPercent' }))
+      : ''
+    const totalForestPercentArea = Diff.diffChars(totalForestPercentAreaPrev ?? '', totalForestPercentAreaCurrent ?? '')
+
+    const totalLandAreaPrev = canCalculate
+      ? Numbers.format(ODPs.calcTotalLandArea({ originalDataPoint: originalDataPointHistory }))
+      : ''
+    const totalLandArea = Diff.diffChars(totalLandAreaPrev ?? '', totalLandAreaCurrent ?? '')
+
+    const totalOtherWoodedLandPercentAreaPrev = canCalculate
+      ? Numbers.format(
+          ODPs.calcTotalFieldArea({ originalDataPoint: originalDataPointHistory, field: 'otherWoodedLandPercent' })
+        )
+      : ''
+    const totalOtherWoodedLandPercentArea = Diff.diffChars(
+      totalOtherWoodedLandPercentAreaPrev ?? '',
+      totalOtherWoodedLandPercentAreaCurrent ?? ''
+    )
+
+    return { totalArea, totalForestPercentArea, totalLandArea, totalOtherWoodedLandPercentArea }
+  }, [
+    historyLastApprovedIsActive,
+    originalDataPointHistory,
+    totalAreaCurrent,
+    totalForestPercentAreaCurrent,
+    totalLandAreaCurrent,
+    totalOtherWoodedLandPercentAreaCurrent,
+  ])
+}

From dd89630bb4984fe820ae55c75f40fb81f92367b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Thu, 6 Feb 2025 16:25:50 -0500
Subject: [PATCH 15/38] 4253 - Data History: ODP comparison (empty dataset) -
 Extent of forest: other land percent diffs (#4337)

* 4253 - ODP history: Add calculate other land percent util

* 4253 - ODP history: Add other land percent diffs

* 4253 - ODP history: Keep percent symbol out of diffs
---
 .../OriginalDataPoint/OriginalDataPoint.scss  | 21 +++++++
 .../ExtentOfForest/ExtentOfForestRow.tsx      | 58 +++++++++++--------
 .../hooks/useOtherLandPercentChange.ts        | 35 +++++++++++
 .../originalDataPoint/odps/index.ts           |  3 +-
 .../odps/nationalClassUtils.ts                |  9 +++
 5 files changed, 102 insertions(+), 24 deletions(-)
 create mode 100644 src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts

diff --git a/src/client/pages/OriginalDataPoint/OriginalDataPoint.scss b/src/client/pages/OriginalDataPoint/OriginalDataPoint.scss
index e17a6cf709..79a4f8709e 100644
--- a/src/client/pages/OriginalDataPoint/OriginalDataPoint.scss
+++ b/src/client/pages/OriginalDataPoint/OriginalDataPoint.scss
@@ -194,3 +194,24 @@
     max-width: 150px !important;
   }
 }
+
+.odp-calculated-percent-diff,
+.odp-percent-diff {
+  align-items: center;
+  direction: ltr;
+  display: flex;
+  justify-content: end;
+}
+
+.odp-calculated-percent-diff {
+  > span {
+    margin-left: $spacing-xxs;
+  }
+}
+
+.odp-percent-diff,
+.odp-data-input-diff {
+  cursor: default;
+  gap: 10px;
+  padding: 10px 9px 10px 10px; // Matches PercentInput right spacing of 9px
+}
diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
index e1eead4435..c0caca47d8 100644
--- a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
@@ -5,13 +5,14 @@ import classNames from 'classnames'
 import { Numbers } from 'utils/numbers'
 import { Objects } from 'utils/objects'
 
-import { ODPNationalClass, OriginalDataPoint } from 'meta/assessment'
+import { ODPNationalClass, ODPs, OriginalDataPoint } from 'meta/assessment'
 import { NationalClassValidation } from 'meta/assessment/originalDataPoint/odps/validateODP'
 import { Topics } from 'meta/messageCenter'
 import { TooltipId } from 'meta/tooltip'
 
 import { useCycle } from 'client/store/assessment'
 import { useHistoryLastApprovedIsActive } from 'client/store/data'
+import DiffText from 'client/components/DiffText'
 import PercentInput from 'client/components/PercentInput'
 import ReviewIndicator from 'client/components/ReviewIndicator'
 import ThousandSeparatedDecimalInput from 'client/components/ThousandSeparatedDecimalInput'
@@ -24,6 +25,7 @@ import { useNationalClassValidations } from 'client/pages/OriginalDataPoint/hook
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
 import { useNationalClassNameComments } from '../../hooks'
+import { useOtherLandPercentChange } from './hooks/useOtherLandPercentChange'
 
 type Props = {
   canEditData: boolean
@@ -40,8 +42,7 @@ const columns: Columns = [
 ]
 
 const _formatDecimalFieldFn: ODPDiffTextProps['formatFn'] = (v) => (!Objects.isEmpty(v) ? Numbers.format(v, 2) : '')
-const _formatPercentFieldFn: ODPDiffTextProps['formatFn'] = (v) =>
-  !Objects.isEmpty(v) ? `${Numbers.format(v, 3)}  %` : ''
+const _formatPercentFieldFn: ODPDiffTextProps['formatFn'] = (v) => (!Objects.isEmpty(v) ? Numbers.format(v, 3) : '')
 
 const ExtentOfForestRow: React.FC<Props> = (props) => {
   const { canEditData, index, nationalClassValidation, originalDataPoint } = props
@@ -54,20 +55,18 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
   const target = [originalDataPoint.id, 'class', `${uuid}`, 'value'] as string[]
   const classNameRowComments = useNationalClassNameComments(target)
 
-  let otherLand = null
-
   const validationErrorMessage = useNationalClassValidations({
     index,
     originalDataPoint,
     variable: 'validExtentOfForestPercentage',
   })
 
-  if (!Objects.isEmpty(forestPercent) || !Objects.isEmpty(otherWoodedLandPercent)) {
-    otherLand = Numbers.format(Numbers.sub(100, Numbers.add(forestPercent ?? 0, otherWoodedLandPercent ?? 0)), 3)
-  }
+  const otherLandPercent = ODPs.calculateNationalClassOtherLandPercent(nationalClass)
 
   const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
 
+  const otherLandPercentChange = useOtherLandPercentChange({ nationalClassIndex: index, otherLandPercent })
+
   const _onPaste = useOnPaste({
     columns,
     index,
@@ -93,7 +92,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
       >
         {historyLastApprovedIsActive ? (
           <ODPDiffText
-            className="input-text disabled"
+            className="odp-data-input-diff"
             formatFn={_formatDecimalFieldFn}
             originalDataPoint={originalDataPoint}
             path={['nationalClasses', index, 'area']}
@@ -123,12 +122,14 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
         data-tooltip-id={TooltipId.error}
       >
         {historyLastApprovedIsActive ? (
-          <ODPDiffText
-            className="input-text disabled"
-            formatFn={_formatPercentFieldFn}
-            originalDataPoint={originalDataPoint}
-            path={['nationalClasses', index, 'forestPercent']}
-          />
+          <div className="odp-percent-diff">
+            <ODPDiffText
+              formatFn={_formatPercentFieldFn}
+              originalDataPoint={originalDataPoint}
+              path={['nationalClasses', index, 'forestPercent']}
+            />
+            <span>%</span>
+          </div>
         ) : (
           <PercentInput
             disabled={!canEditData}
@@ -152,12 +153,14 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
         data-tooltip-id={TooltipId.error}
       >
         {historyLastApprovedIsActive ? (
-          <ODPDiffText
-            className="input-text disabled"
-            formatFn={_formatPercentFieldFn}
-            originalDataPoint={originalDataPoint}
-            path={['nationalClasses', index, 'otherWoodedLandPercent']}
-          />
+          <div className="odp-percent-diff">
+            <ODPDiffText
+              formatFn={_formatPercentFieldFn}
+              originalDataPoint={originalDataPoint}
+              path={['nationalClasses', index, 'otherWoodedLandPercent']}
+            />
+            <span>%</span>
+          </div>
         ) : (
           <PercentInput
             disabled={!canEditData}
@@ -176,8 +179,17 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
       </td>
 
       <td className="fra-table__calculated-cell">
-        <span>{otherLand}</span>
-        <span style={{ marginLeft: '8px' }}>%</span>
+        {historyLastApprovedIsActive ? (
+          <div className="odp-calculated-percent-diff">
+            <DiffText changes={otherLandPercentChange} />
+            <span>%</span>
+          </div>
+        ) : (
+          <>
+            <span>{otherLandPercent}</span>
+            <span style={{ marginLeft: '8px' }}>%</span>
+          </>
+        )}
       </td>
 
       {showReviewIndicator && (
diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts
new file mode 100644
index 0000000000..4c75524df6
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts
@@ -0,0 +1,35 @@
+import { useMemo } from 'react'
+
+import * as Diff from 'diff'
+import { Change } from 'diff'
+import { Objects } from 'utils/objects'
+
+import { ODPs } from 'meta/assessment'
+
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+
+type Props = {
+  nationalClassIndex: number
+  otherLandPercent: string | null
+}
+
+type Returned = Array<Change>
+
+export const useOtherLandPercentChange = (props: Props): Returned => {
+  const { nationalClassIndex, otherLandPercent: otherLandPercentCurrent } = props
+
+  const originalDataPointHistory = useLastApprovedOriginalDataPoint()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const nationalClass = originalDataPointHistory?.nationalClasses?.[nationalClassIndex]
+
+  return useMemo<Returned>(() => {
+    if (!historyLastApprovedIsActive) return undefined
+
+    const canCalculate = !Objects.isEmpty(nationalClass)
+
+    const otherLandPercentPrev = canCalculate ? ODPs.calculateNationalClassOtherLandPercent(nationalClass) : null
+
+    return Diff.diffChars(otherLandPercentPrev ?? '', otherLandPercentCurrent ?? '')
+  }, [historyLastApprovedIsActive, nationalClass, otherLandPercentCurrent])
+}
diff --git a/src/meta/assessment/originalDataPoint/odps/index.ts b/src/meta/assessment/originalDataPoint/odps/index.ts
index 6bf1ce04b5..59a14d36a7 100644
--- a/src/meta/assessment/originalDataPoint/odps/index.ts
+++ b/src/meta/assessment/originalDataPoint/odps/index.ts
@@ -10,7 +10,7 @@ import {
 } from './calc'
 import { canCopyPreviousValues } from './canCopyPreviousValues'
 import { deleteNationalClass } from './deleteNationalClass'
-import { hasNaturallyRegenerating } from './nationalClassUtils'
+import { calculateNationalClassOtherLandPercent, hasNaturallyRegenerating } from './nationalClassUtils'
 import { removeNationalClassPlaceHolder } from './removeNationalClassPlaceHolder'
 import { updateNationalClass } from './updateNationalClass'
 import { validateNationalClass, validateYear } from './validateODP'
@@ -22,6 +22,7 @@ export const ODPs = {
   calcTotalLandArea,
   calcTotalSubFieldArea,
   calcTotalSubSubFieldArea,
+  calculateNationalClassOtherLandPercent,
   calculateValues,
   canCopyPreviousValues,
   deleteNationalClass,
diff --git a/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts b/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts
index 3d10b35c2d..c010d6b73c 100644
--- a/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts
+++ b/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts
@@ -1,7 +1,16 @@
+import { Numbers } from 'utils/numbers'
 import { Objects } from 'utils/objects'
 
 import { ODPNationalClass } from 'meta/assessment/originalDataPoint/odpNationalClass'
 
+export const calculateNationalClassOtherLandPercent = (nc: ODPNationalClass): string | null => {
+  if (!Objects.isEmpty(nc.forestPercent) || !Objects.isEmpty(nc.otherWoodedLandPercent)) {
+    return Numbers.format(Numbers.sub(100, Numbers.add(nc.forestPercent ?? 0, nc.otherWoodedLandPercent ?? 0)), 3)
+  }
+
+  return null
+}
+
 export const hasNaturallyRegenerating = (nc: ODPNationalClass): boolean => {
   return (
     !Objects.isEmpty(nc.forestNaturalPercent) && Number(nc.forestNaturalPercent) > 0 && Number(nc.forestPercent) > 0

From 1cb901c9d015c22cdbd46f9f0c56d82e5a224554 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Thu, 6 Feb 2025 23:27:34 -0500
Subject: [PATCH 16/38] 4253 - Data History: ODP comparison (empty dataset) -
 Forest characteristics non calculated diffs (#4338)

* 4253 - ODP history: Hide validation toolips in Extent of forest

* 4253 - ODP history: Add ForestCharacteristicsRow non-calculated value diffs

* 4253 - ODP history: Move national class forest area calculation to a util
---
 .../ExtentOfForest/ExtentOfForestRow.tsx      |   8 +-
 .../ForestCharacteristicsRow.tsx              | 140 ++++++++++++------
 .../originalDataPoint/odps/index.ts           |   7 +-
 .../odps/nationalClassUtils.ts                |   4 +
 4 files changed, 109 insertions(+), 50 deletions(-)

diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
index c0caca47d8..a0ed5490f5 100644
--- a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
@@ -55,15 +55,17 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
   const target = [originalDataPoint.id, 'class', `${uuid}`, 'value'] as string[]
   const classNameRowComments = useNationalClassNameComments(target)
 
-  const validationErrorMessage = useNationalClassValidations({
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  let validationErrorMessage = useNationalClassValidations({
     index,
     originalDataPoint,
     variable: 'validExtentOfForestPercentage',
   })
 
-  const otherLandPercent = ODPs.calculateNationalClassOtherLandPercent(nationalClass)
+  validationErrorMessage = historyLastApprovedIsActive ? null : validationErrorMessage
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const otherLandPercent = ODPs.calculateNationalClassOtherLandPercent(nationalClass)
 
   const otherLandPercentChange = useOtherLandPercentChange({ nationalClassIndex: index, otherLandPercent })
 
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsRow.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsRow.tsx
index 798cad18c0..7e6bd2e609 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsRow.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsRow.tsx
@@ -3,16 +3,20 @@ import { useTranslation } from 'react-i18next'
 
 import classNames from 'classnames'
 import { Numbers } from 'utils/numbers'
+import { Objects } from 'utils/objects'
 
-import { ODPNationalClass, OriginalDataPoint, SectionNames } from 'meta/assessment'
+import { ODPNationalClass, ODPs, OriginalDataPoint, SectionNames } from 'meta/assessment'
 import { Topics } from 'meta/messageCenter'
 import { TooltipId } from 'meta/tooltip'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import PercentInput from 'client/components/PercentInput'
 import ReviewIndicator from 'client/components/ReviewIndicator'
 import { Columns, useOnPaste } from 'client/pages/OriginalDataPoint/components/hooks/useOnPaste'
 import { useUpdateOriginalData } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalData'
 import { useUpdateOriginalDataField } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalDataField'
+import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
+import { ODPDiffTextProps } from 'client/pages/OriginalDataPoint/components/ODPDiffText/types'
 import { useNationalClassValidations } from 'client/pages/OriginalDataPoint/hooks/useNationalClassValidations'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
@@ -25,6 +29,8 @@ const columns: Columns = [
   { name: 'otherPlantedForestPercent', type: 'decimal', precision: 3 },
 ]
 
+const _formatPercentFieldFn: ODPDiffTextProps['formatFn'] = (v) => (!Objects.isEmpty(v) ? Numbers.format(v, 3) : '')
+
 const allowedClass = (nc: ODPNationalClass) => Number(nc.forestPercent) > 0
 
 type Props = {
@@ -40,7 +46,7 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
 
   const { nationalClasses, id } = originalDataPoint
   const nationalClass = nationalClasses[index]
-  const { name, area, forestNaturalPercent, forestPlantationPercent, otherPlantedForestPercent, uuid } = nationalClass
+  const { name, forestNaturalPercent, forestPlantationPercent, otherPlantedForestPercent, uuid } = nationalClass
   const target = [id, 'class', `${uuid}`, 'forest_charasteristics'] as string[]
   const classNameRowComments = useNationalClassNameComments(target)
 
@@ -51,11 +57,16 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
   const updateOriginalDataField = useUpdateOriginalDataField()
   const updateOriginalData = useUpdateOriginalData()
 
-  const validationErrorMessage = useNationalClassValidations({
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  let validationErrorMessage = useNationalClassValidations({
     index,
     originalDataPoint,
     variable: 'validForestCharacteristicsPercentage',
   })
+  validationErrorMessage = historyLastApprovedIsActive ? null : validationErrorMessage
+
+  const nationalClassForestArea = ODPs.calculateNationalClassForestArea(nationalClass)
 
   const showReviewIndicator = useShowReviewIndicator(SectionNames.forestCharacteristics)
 
@@ -65,12 +76,16 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
 
   return (
     <tr className={classNameRowComments}>
-      <th className="fra-table__category-cell">{name}</th>
-
-      <th className="fra-table__calculated-sub-cell fra-table__divider">
-        {area && Numbers.format((Number(area) * Number(nationalClass.forestPercent)) / 100)}
+      <th className="fra-table__category-cell">
+        {historyLastApprovedIsActive ? (
+          <ODPDiffText originalDataPoint={originalDataPoint} path={['nationalClasses', index, 'name']} />
+        ) : (
+          name
+        )}
       </th>
 
+      <th className="fra-table__calculated-sub-cell fra-table__divider">{nationalClassForestArea}</th>
+
       <td
         className={classNames('fra-table__cell', {
           error: Boolean(validationErrorMessage),
@@ -78,19 +93,30 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        <PercentInput
-          disabled={!canEditData}
-          numberValue={forestNaturalPercent}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-            const { value } = event.target
-            const updateProps = { field: columns[1].name, index, precision: columns[1].precision, value }
-            updateOriginalDataField(updateProps)
-          }}
-          onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
-            const odp = _onPaste({ event, colIndex: 1 })
-            updateOriginalData(odp)
-          }}
-        />
+        {historyLastApprovedIsActive ? (
+          <div className="odp-percent-diff">
+            <ODPDiffText
+              formatFn={_formatPercentFieldFn}
+              originalDataPoint={originalDataPoint}
+              path={['nationalClasses', index, 'forestNaturalPercent']}
+            />
+            <span>%</span>
+          </div>
+        ) : (
+          <PercentInput
+            disabled={!canEditData}
+            numberValue={forestNaturalPercent}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              const { value } = event.target
+              const updateProps = { field: columns[1].name, index, precision: columns[1].precision, value }
+              updateOriginalDataField(updateProps)
+            }}
+            onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
+              const odp = _onPaste({ event, colIndex: 1 })
+              updateOriginalData(odp)
+            }}
+          />
+        )}
       </td>
 
       <td
@@ -100,19 +126,30 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        <PercentInput
-          disabled={!canEditData}
-          numberValue={forestPlantationPercent}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-            const { value } = event.target
-            const updateProps = { field: columns[2].name, index, precision: columns[2].precision, value }
-            updateOriginalDataField(updateProps)
-          }}
-          onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
-            const odp = _onPaste({ event, colIndex: 2 })
-            updateOriginalData(odp)
-          }}
-        />
+        {historyLastApprovedIsActive ? (
+          <div className="odp-percent-diff">
+            <ODPDiffText
+              formatFn={_formatPercentFieldFn}
+              originalDataPoint={originalDataPoint}
+              path={['nationalClasses', index, 'forestPlantationPercent']}
+            />
+            <span>%</span>
+          </div>
+        ) : (
+          <PercentInput
+            disabled={!canEditData}
+            numberValue={forestPlantationPercent}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              const { value } = event.target
+              const updateProps = { field: columns[2].name, index, precision: columns[2].precision, value }
+              updateOriginalDataField(updateProps)
+            }}
+            onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
+              const odp = _onPaste({ event, colIndex: 2 })
+              updateOriginalData(odp)
+            }}
+          />
+        )}
       </td>
 
       <td
@@ -122,19 +159,30 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        <PercentInput
-          disabled={!canEditData}
-          numberValue={otherPlantedForestPercent}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-            const { value } = event.target
-            const updateProps = { field: columns[3].name, index, precision: columns[3].precision, value }
-            updateOriginalDataField(updateProps)
-          }}
-          onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
-            const odp = _onPaste({ event, colIndex: 3 })
-            updateOriginalData(odp)
-          }}
-        />
+        {historyLastApprovedIsActive ? (
+          <div className="odp-percent-diff">
+            <ODPDiffText
+              formatFn={_formatPercentFieldFn}
+              originalDataPoint={originalDataPoint}
+              path={['nationalClasses', index, 'otherPlantedForestPercent']}
+            />
+            <span>%</span>
+          </div>
+        ) : (
+          <PercentInput
+            disabled={!canEditData}
+            numberValue={otherPlantedForestPercent}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              const { value } = event.target
+              const updateProps = { field: columns[3].name, index, precision: columns[3].precision, value }
+              updateOriginalDataField(updateProps)
+            }}
+            onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
+              const odp = _onPaste({ event, colIndex: 3 })
+              updateOriginalData(odp)
+            }}
+          />
+        )}
       </td>
 
       {showReviewIndicator && (
diff --git a/src/meta/assessment/originalDataPoint/odps/index.ts b/src/meta/assessment/originalDataPoint/odps/index.ts
index 59a14d36a7..2160f166a3 100644
--- a/src/meta/assessment/originalDataPoint/odps/index.ts
+++ b/src/meta/assessment/originalDataPoint/odps/index.ts
@@ -10,7 +10,11 @@ import {
 } from './calc'
 import { canCopyPreviousValues } from './canCopyPreviousValues'
 import { deleteNationalClass } from './deleteNationalClass'
-import { calculateNationalClassOtherLandPercent, hasNaturallyRegenerating } from './nationalClassUtils'
+import {
+  calculateNationalClassForestArea,
+  calculateNationalClassOtherLandPercent,
+  hasNaturallyRegenerating,
+} from './nationalClassUtils'
 import { removeNationalClassPlaceHolder } from './removeNationalClassPlaceHolder'
 import { updateNationalClass } from './updateNationalClass'
 import { validateNationalClass, validateYear } from './validateODP'
@@ -22,6 +26,7 @@ export const ODPs = {
   calcTotalLandArea,
   calcTotalSubFieldArea,
   calcTotalSubSubFieldArea,
+  calculateNationalClassForestArea,
   calculateNationalClassOtherLandPercent,
   calculateValues,
   canCopyPreviousValues,
diff --git a/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts b/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts
index c010d6b73c..07bfd4d6be 100644
--- a/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts
+++ b/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts
@@ -3,6 +3,10 @@ import { Objects } from 'utils/objects'
 
 import { ODPNationalClass } from 'meta/assessment/originalDataPoint/odpNationalClass'
 
+export const calculateNationalClassForestArea = (nc: ODPNationalClass): string | null => {
+  return nc.area && Numbers.format((Number(nc.area) * Number(nc.forestPercent)) / 100)
+}
+
 export const calculateNationalClassOtherLandPercent = (nc: ODPNationalClass): string | null => {
   if (!Objects.isEmpty(nc.forestPercent) || !Objects.isEmpty(nc.otherWoodedLandPercent)) {
     return Numbers.format(Numbers.sub(100, Numbers.add(nc.forestPercent ?? 0, nc.otherWoodedLandPercent ?? 0)), 3)

From 1662df7dae988cdb8756dfa99353d3d0e57109b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Sorja?= <ping@mirosorja.com>
Date: Fri, 7 Feb 2025 15:27:06 +0200
Subject: [PATCH 17/38] 4308 - Data History: Descriptions text comparison (Last
 approved) (#4339)

* 4302 - API: getValuesLastApproved

* 4302 - Show DB errors in terminal

* 4308 - Merge datas
---
 .../descriptions/getDescriptionsHistory.ts    |  4 +-
 .../getDescriptionsLastApproved.ts            | 20 ++++--
 src/server/db/db.ts                           | 13 ++++
 .../descriptions/getValuesLastApproved.ts     | 61 +++++++++++++++++++
 .../assessmentCycle/descriptions/index.ts     |  2 +
 5 files changed, 94 insertions(+), 6 deletions(-)
 create mode 100644 src/server/repository/assessmentCycle/descriptions/getValuesLastApproved.ts

diff --git a/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts b/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
index c52fe86159..cd4bf4890c 100644
--- a/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
+++ b/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
@@ -12,13 +12,13 @@ type Request = CycleDataRequest<{ name?: CommentableDescriptionName }>
 
 export const getDescriptionsHistory = async (req: Request, res: Response) => {
   try {
-    const { assessmentName, cycleName, countryIso } = req.query
+    const { assessmentName, cycleName, countryIso, sectionName } = req.query
     const { assessment, cycle } = await AssessmentController.getOneWithCycle({ assessmentName, cycleName })
     const info = await CycleDataController.History.LastApproved.getInfo({ assessment, cycle, countryIso })
 
     let descriptions = {}
     if (!Objects.isNil(info)) {
-      const props = { assessment, cycle, countryIso, info }
+      const props = { assessment, cycle, countryIso, sectionName, info }
       descriptions = await CycleDataController.Description.getDescriptionsLastApproved(props)
     }
 
diff --git a/src/server/controller/cycleData/description/getDescriptionsLastApproved.ts b/src/server/controller/cycleData/description/getDescriptionsLastApproved.ts
index b6b91263a9..f413a84898 100644
--- a/src/server/controller/cycleData/description/getDescriptionsLastApproved.ts
+++ b/src/server/controller/cycleData/description/getDescriptionsLastApproved.ts
@@ -19,12 +19,24 @@ export const getDescriptionsLastApproved = async (
   props: Props,
   client: BaseProtocol = DB
 ): Promise<DescriptionCountryValues> => {
-  const { info } = props
-  const { prevCycle } = info
+  const { assessment, cycle, countryIso, sectionName, info } = props
+  const { prevCycle, lastAccepted } = info
+
+  let data: DescriptionCountryValues = {} as DescriptionCountryValues
 
   if (!Objects.isNil(prevCycle)) {
-    return DescriptionRepository.getValues({ ...props, cycle: prevCycle }, client)
+    data = await DescriptionRepository.getValues({ ...props, cycle: prevCycle }, client)
+  }
+
+  if (!Objects.isNil(lastAccepted)) {
+    const lastApprovedData = await DescriptionRepository.getValuesLastApproved({
+      assessment,
+      cycle,
+      countryIso,
+      sectionName,
+    })
+    data = Objects.merge(data, lastApprovedData)
   }
 
-  return {} as DescriptionCountryValues
+  return data
 }
diff --git a/src/server/db/db.ts b/src/server/db/db.ts
index 3780098eba..64e5197829 100644
--- a/src/server/db/db.ts
+++ b/src/server/db/db.ts
@@ -10,6 +10,19 @@ const debugOptions = {
       Logger.debug(`PARAMS: ${JSON.stringify(e.params)}`)
     }
   },
+  error: (err: Error, e: pgPromise.IEventContext) => {
+    Logger.error(
+      `\x1b[31mDB ERROR: ${err.message}\x1b[0m ${JSON.stringify(
+        {
+          query: e.query,
+          params: e.params,
+          stack: err.stack,
+        },
+        null,
+        2
+      )}`
+    )
+  },
 }
 
 const initOptions = {
diff --git a/src/server/repository/assessmentCycle/descriptions/getValuesLastApproved.ts b/src/server/repository/assessmentCycle/descriptions/getValuesLastApproved.ts
new file mode 100644
index 0000000000..5f9e1c3b22
--- /dev/null
+++ b/src/server/repository/assessmentCycle/descriptions/getValuesLastApproved.ts
@@ -0,0 +1,61 @@
+import { CountryIso } from 'meta/area'
+import { Assessment, CommentableDescriptionName, Cycle, DescriptionCountryValues } from 'meta/assessment'
+
+import { BaseProtocol, DB, Schemas } from 'server/db'
+
+type Props = {
+  assessment: Assessment
+  cycle: Cycle
+  countryIso: CountryIso
+  sectionName?: string
+  name?: CommentableDescriptionName
+}
+
+export const getValuesLastApproved = async (
+  props: Props,
+  client: BaseProtocol = DB
+): Promise<DescriptionCountryValues> => {
+  const { countryIso, assessment, cycle, sectionName } = props
+
+  const schemaName = Schemas.getNameCycle(assessment, cycle)
+
+  return client.one<DescriptionCountryValues>(
+    `with latest_descriptions as (
+        select
+            al.country_iso,
+            al.section as section_name,
+            al.target ->> 'name' as name,
+            al.target -> 'description' -> 'value' as value,
+            row_number() over (partition by al.target ->> 'name' order by al.time desc) as row_number
+     from public.activity_log al
+         left join ${schemaName}.country_summary cs on al.country_iso = cs.country_iso
+     where
+           al.target is not null
+       and al.message = 'descriptionUpdate'
+       and al.country_iso = $1
+       and al.section = $2
+       and cs.last_accepted is not null
+       and al.time < cs.last_accepted
+         ),
+         agg1 as (
+     select
+         ld.country_iso,
+         ld.section_name,
+         jsonb_object_agg(ld.name, ld.value) as descriptions
+     from latest_descriptions ld
+     where ld.row_number = 1
+     group by 1, 2
+         ),
+         agg2 as (
+     select
+         a.country_iso,
+         jsonb_object_agg(a.section_name, a.descriptions) as descriptions
+     from agg1 a
+     group by 1
+         )
+    select coalesce(jsonb_object_agg(a.country_iso, a.descriptions), '{}'::jsonb) as descriptions
+    from agg2 a;`,
+    [countryIso, sectionName],
+    ({ descriptions }) => descriptions
+  )
+}
diff --git a/src/server/repository/assessmentCycle/descriptions/index.ts b/src/server/repository/assessmentCycle/descriptions/index.ts
index fe406ff273..b78f7c7ef5 100644
--- a/src/server/repository/assessmentCycle/descriptions/index.ts
+++ b/src/server/repository/assessmentCycle/descriptions/index.ts
@@ -2,6 +2,7 @@ import { getDataSources } from './getDataSources'
 import { getManyWithDataSourcesLinks } from './getManyWithDataSourcesLinks'
 import { getManyWithTextLinks } from './getManyWithTextLinks'
 import { getValues } from './getValues'
+import { getValuesLastApproved } from './getValuesLastApproved'
 import { upsert } from './upsert'
 
 export const DescriptionRepository = {
@@ -9,5 +10,6 @@ export const DescriptionRepository = {
   getManyWithDataSourcesLinks,
   getManyWithTextLinks,
   getValues,
+  getValuesLastApproved,
   upsert,
 }

From 53f135cf319794b3c84436b368e6b67ca65fa288 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Fri, 7 Feb 2025 08:39:22 -0500
Subject: [PATCH 18/38] 4253 - Data History: ODP comparison (empty dataset) -
 Forest Characteristics: National class Forest Area diffs (#4340)

* 4253 - ODP history: Move diff formatting fns to common hook

* 4253 - ODP history: Add National class Forest Area diffs
---
 .../ExtentOfForest/ExtentOfForestRow.tsx      | 12 ++----
 .../ForestCharacteristicsRow.tsx              | 21 +++++-----
 .../hooks/useNationalClassForestAreaChange.ts | 38 +++++++++++++++++++
 .../components/ODPDiffText/types.ts           |  2 +-
 .../hooks/useFieldChanges.ts                  | 16 +++++++-
 5 files changed, 68 insertions(+), 21 deletions(-)
 create mode 100644 src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNationalClassForestAreaChange.ts

diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
index a0ed5490f5..3e0ca86005 100644
--- a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
@@ -2,8 +2,6 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import classNames from 'classnames'
-import { Numbers } from 'utils/numbers'
-import { Objects } from 'utils/objects'
 
 import { ODPNationalClass, ODPs, OriginalDataPoint } from 'meta/assessment'
 import { NationalClassValidation } from 'meta/assessment/originalDataPoint/odps/validateODP'
@@ -20,7 +18,6 @@ import { Columns, useOnPaste } from 'client/pages/OriginalDataPoint/components/h
 import { useUpdateOriginalData } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalData'
 import { useUpdateOriginalDataField } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalDataField'
 import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
-import { ODPDiffTextProps } from 'client/pages/OriginalDataPoint/components/ODPDiffText/types'
 import { useNationalClassValidations } from 'client/pages/OriginalDataPoint/hooks/useNationalClassValidations'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
@@ -41,9 +38,6 @@ const columns: Columns = [
   { name: 'otherLandPercent' as keyof ODPNationalClass, type: 'decimal', precision: 3 },
 ]
 
-const _formatDecimalFieldFn: ODPDiffTextProps['formatFn'] = (v) => (!Objects.isEmpty(v) ? Numbers.format(v, 2) : '')
-const _formatPercentFieldFn: ODPDiffTextProps['formatFn'] = (v) => (!Objects.isEmpty(v) ? Numbers.format(v, 3) : '')
-
 const ExtentOfForestRow: React.FC<Props> = (props) => {
   const { canEditData, index, nationalClassValidation, originalDataPoint } = props
 
@@ -95,7 +89,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
         {historyLastApprovedIsActive ? (
           <ODPDiffText
             className="odp-data-input-diff"
-            formatFn={_formatDecimalFieldFn}
+            format="decimal"
             originalDataPoint={originalDataPoint}
             path={['nationalClasses', index, 'area']}
           />
@@ -126,7 +120,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
         {historyLastApprovedIsActive ? (
           <div className="odp-percent-diff">
             <ODPDiffText
-              formatFn={_formatPercentFieldFn}
+              format="percent"
               originalDataPoint={originalDataPoint}
               path={['nationalClasses', index, 'forestPercent']}
             />
@@ -157,7 +151,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
         {historyLastApprovedIsActive ? (
           <div className="odp-percent-diff">
             <ODPDiffText
-              formatFn={_formatPercentFieldFn}
+              format="percent"
               originalDataPoint={originalDataPoint}
               path={['nationalClasses', index, 'otherWoodedLandPercent']}
             />
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsRow.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsRow.tsx
index 7e6bd2e609..36c0e794f6 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsRow.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsRow.tsx
@@ -2,25 +2,24 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import classNames from 'classnames'
-import { Numbers } from 'utils/numbers'
-import { Objects } from 'utils/objects'
 
 import { ODPNationalClass, ODPs, OriginalDataPoint, SectionNames } from 'meta/assessment'
 import { Topics } from 'meta/messageCenter'
 import { TooltipId } from 'meta/tooltip'
 
 import { useHistoryLastApprovedIsActive } from 'client/store/data'
+import DiffText from 'client/components/DiffText'
 import PercentInput from 'client/components/PercentInput'
 import ReviewIndicator from 'client/components/ReviewIndicator'
 import { Columns, useOnPaste } from 'client/pages/OriginalDataPoint/components/hooks/useOnPaste'
 import { useUpdateOriginalData } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalData'
 import { useUpdateOriginalDataField } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalDataField'
 import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
-import { ODPDiffTextProps } from 'client/pages/OriginalDataPoint/components/ODPDiffText/types'
 import { useNationalClassValidations } from 'client/pages/OriginalDataPoint/hooks/useNationalClassValidations'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
 import { useNationalClassNameComments } from '../../hooks'
+import { useNationalClassForestAreaChange } from './hooks/useNationalClassForestAreaChange'
 
 const columns: Columns = [
   { name: 'area', type: 'decimal' },
@@ -29,8 +28,6 @@ const columns: Columns = [
   { name: 'otherPlantedForestPercent', type: 'decimal', precision: 3 },
 ]
 
-const _formatPercentFieldFn: ODPDiffTextProps['formatFn'] = (v) => (!Objects.isEmpty(v) ? Numbers.format(v, 3) : '')
-
 const allowedClass = (nc: ODPNationalClass) => Number(nc.forestPercent) > 0
 
 type Props = {
@@ -67,6 +64,10 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
   validationErrorMessage = historyLastApprovedIsActive ? null : validationErrorMessage
 
   const nationalClassForestArea = ODPs.calculateNationalClassForestArea(nationalClass)
+  const nationalClassForestAreaChange = useNationalClassForestAreaChange({
+    nationalClassForestArea,
+    nationalClassIndex: index,
+  })
 
   const showReviewIndicator = useShowReviewIndicator(SectionNames.forestCharacteristics)
 
@@ -84,7 +85,9 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
         )}
       </th>
 
-      <th className="fra-table__calculated-sub-cell fra-table__divider">{nationalClassForestArea}</th>
+      <th className="fra-table__calculated-sub-cell fra-table__divider">
+        {historyLastApprovedIsActive ? <DiffText changes={nationalClassForestAreaChange} /> : nationalClassForestArea}
+      </th>
 
       <td
         className={classNames('fra-table__cell', {
@@ -96,7 +99,7 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
         {historyLastApprovedIsActive ? (
           <div className="odp-percent-diff">
             <ODPDiffText
-              formatFn={_formatPercentFieldFn}
+              format="percent"
               originalDataPoint={originalDataPoint}
               path={['nationalClasses', index, 'forestNaturalPercent']}
             />
@@ -129,7 +132,7 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
         {historyLastApprovedIsActive ? (
           <div className="odp-percent-diff">
             <ODPDiffText
-              formatFn={_formatPercentFieldFn}
+              format="percent"
               originalDataPoint={originalDataPoint}
               path={['nationalClasses', index, 'forestPlantationPercent']}
             />
@@ -162,7 +165,7 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
         {historyLastApprovedIsActive ? (
           <div className="odp-percent-diff">
             <ODPDiffText
-              formatFn={_formatPercentFieldFn}
+              format="percent"
               originalDataPoint={originalDataPoint}
               path={['nationalClasses', index, 'otherPlantedForestPercent']}
             />
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNationalClassForestAreaChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNationalClassForestAreaChange.ts
new file mode 100644
index 0000000000..b8c066f496
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNationalClassForestAreaChange.ts
@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+
+import * as Diff from 'diff'
+import { Change } from 'diff'
+import { Objects } from 'utils/objects'
+
+import { ODPs } from 'meta/assessment'
+
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+
+type Props = {
+  nationalClassForestArea: string | null
+  nationalClassIndex: number
+}
+
+type Returned = Array<Change>
+
+export const useNationalClassForestAreaChange = (props: Props): Returned => {
+  const { nationalClassForestArea: nationalClassForestAreaCurrent, nationalClassIndex } = props
+
+  const originalDataPointHistory = useLastApprovedOriginalDataPoint()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const nationalClass = originalDataPointHistory?.nationalClasses?.[nationalClassIndex]
+
+  return useMemo<Returned>(() => {
+    if (!historyLastApprovedIsActive) return undefined
+
+    const canCalculate = !Objects.isEmpty(nationalClass)
+
+    const nationalClassForestAreaPrev = canCalculate ? ODPs.calculateNationalClassForestArea(nationalClass) : null
+
+    return Diff.diffChars(
+      nationalClassForestAreaPrev?.toString() ?? '',
+      nationalClassForestAreaCurrent?.toString() ?? ''
+    )
+  }, [historyLastApprovedIsActive, nationalClass, nationalClassForestAreaCurrent])
+}
diff --git a/src/client/pages/OriginalDataPoint/components/ODPDiffText/types.ts b/src/client/pages/OriginalDataPoint/components/ODPDiffText/types.ts
index a8d34885f2..ccb10cf684 100644
--- a/src/client/pages/OriginalDataPoint/components/ODPDiffText/types.ts
+++ b/src/client/pages/OriginalDataPoint/components/ODPDiffText/types.ts
@@ -2,7 +2,7 @@ import { OriginalDataPoint } from 'meta/assessment'
 
 export type ODPDiffTextProps = {
   className?: string
-  formatFn?: (value: string | null) => string
+  format?: 'decimal' | 'percent'
   originalDataPoint: OriginalDataPoint
   path: Array<string | number>
 }
diff --git a/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts b/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
index f26f746bf6..1a40a0604d 100644
--- a/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
+++ b/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
@@ -3,6 +3,7 @@ import { TFunction, useTranslation } from 'react-i18next'
 
 import * as Diff from 'diff'
 import { Change } from 'diff'
+import { Numbers } from 'utils/numbers'
 import { Objects } from 'utils/objects'
 
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
@@ -11,11 +12,21 @@ import { DOMs } from 'client/utils/dom'
 
 type Returned = Array<Change>
 
+type FormatFn = (value: string | null) => string
+
+const _formatDecimalFieldFn: FormatFn = (v) => (!Objects.isEmpty(v) ? Numbers.format(v, 2) : '')
+const _formatPercentFieldFn: FormatFn = (v) => (!Objects.isEmpty(v) ? Numbers.format(v, 3) : '')
+
+const formatFns: Record<ODPDiffTextProps['format'], FormatFn> = {
+  decimal: _formatDecimalFieldFn,
+  percent: _formatPercentFieldFn,
+}
+
 const _getSourceMethodText = (values: Array<string> | undefined, t: TFunction): string =>
   (values ?? [])?.map((value) => t(`nationalDataPoint.dataSourceMethodsOptions.${value}`)).join('\n\r')
 
 export const useFieldChanges = (props: ODPDiffTextProps): Returned => {
-  const { formatFn, originalDataPoint, path } = props
+  const { format, originalDataPoint, path } = props
 
   const { t } = useTranslation()
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
@@ -36,6 +47,7 @@ export const useFieldChanges = (props: ODPDiffTextProps): Returned => {
     let textPrev = DOMs.getHtmlTextContent(valuePrev ?? '')
     let textCurrent = DOMs.getHtmlTextContent(valueCurrent ?? '')
 
+    const formatFn = formatFns[format]
     if (Objects.isFunction(formatFn)) {
       textPrev = formatFn(textPrev)
       textCurrent = formatFn(textCurrent)
@@ -44,5 +56,5 @@ export const useFieldChanges = (props: ODPDiffTextProps): Returned => {
     return Diff.diffChars(textPrev, textCurrent, {
       ignoreCase: false,
     })
-  }, [formatFn, originalDataPoint, originalDataPointHistory, path, t])
+  }, [format, originalDataPoint, originalDataPointHistory, path, t])
 }

From 284404965b911c7bf4e3bb4a9ea35120cba0d082 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Fri, 7 Feb 2025 12:09:04 -0500
Subject: [PATCH 19/38] 4253 - Data History: ODP comparison (empty dataset) -
 Forest characteristics calculated diffs (#4343)

* 4253 - ODP history: Add ForestCharacteristics calculated field variables

* 4253 - ODP history: Add Forest characteristics totals diffs
---
 .../ForestCharacteristics.tsx                 |  71 ++++++++----
 .../useForestCharacteristicsTotalsChange.ts   | 103 ++++++++++++++++++
 2 files changed, 155 insertions(+), 19 deletions(-)
 create mode 100644 src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useForestCharacteristicsTotalsChange.ts

diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx
index 6654e5fb03..3079834b69 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx
@@ -5,11 +5,14 @@ import { Numbers } from 'utils/numbers'
 
 import { ODPs, OriginalDataPoint } from 'meta/assessment'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useIsPrintRoute } from 'client/hooks/useIsRoute'
 import { useCycleRouteParams } from 'client/hooks/useRouteParams'
 import ButtonTableExport from 'client/components/ButtonTableExport'
 import DefinitionLink from 'client/components/DefinitionLink'
+import DiffText from 'client/components/DiffText'
 
+import { useForestCharacteristicsTotalsChange } from './hooks/useForestCharacteristicsTotalsChange'
 import ForestCharacteristicsNaturallyRegenerating from './ForestCharacteristicsNaturallyRegenerating'
 import ForestCharacteristicsPlantation from './ForestCharacteristicsPlantation'
 import ForestCharacteristicsRow from './ForestCharacteristicsRow'
@@ -30,6 +33,38 @@ const ForestCharacteristics: React.FC<Props> = (props) => {
   } = useTranslation()
   const { print } = useIsPrintRoute()
 
+  const totalForestPercentArea = Numbers.format(ODPs.calcTotalFieldArea({ originalDataPoint, field: 'forestPercent' }))
+  const totalForestNaturalPercentArea = Numbers.format(
+    ODPs.calcTotalSubFieldArea({
+      originalDataPoint,
+      field: 'forestPercent',
+      subField: 'forestNaturalPercent',
+    })
+  )
+  const totalForestPlantationPercentArea = Numbers.format(
+    ODPs.calcTotalSubFieldArea({
+      originalDataPoint,
+      field: 'forestPercent',
+      subField: 'forestPlantationPercent',
+    })
+  )
+  const totalOtherPlantedForestPercentArea = Numbers.format(
+    ODPs.calcTotalSubFieldArea({
+      originalDataPoint,
+      field: 'forestPercent',
+      subField: 'otherPlantedForestPercent',
+    })
+  )
+
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  const totalsChange = useForestCharacteristicsTotalsChange({
+    totalForestNaturalPercentArea,
+    totalForestPercentArea,
+    totalForestPlantationPercentArea,
+    totalOtherPlantedForestPercentArea,
+  })
+
   const nationalClasses = originalDataPoint.nationalClasses.filter((nationalClass) => !nationalClass.placeHolder)
   const plantationTotal = ODPs.calcTotalSubFieldArea({
     originalDataPoint,
@@ -111,33 +146,31 @@ const ForestCharacteristics: React.FC<Props> = (props) => {
               <tr>
                 <th className="fra-table__header-cell-left">{t('nationalDataPoint.total')}</th>
                 <th className="fra-table__calculated-cell fra-table__divider">
-                  {Numbers.format(ODPs.calcTotalFieldArea({ originalDataPoint, field: 'forestPercent' }))}
+                  {historyLastApprovedIsActive ? (
+                    <DiffText changes={totalsChange?.totalForestPercentArea} />
+                  ) : (
+                    totalForestPercentArea
+                  )}
                 </th>
                 <td className="fra-table__calculated-cell">
-                  {Numbers.format(
-                    ODPs.calcTotalSubFieldArea({
-                      originalDataPoint,
-                      field: 'forestPercent',
-                      subField: 'forestNaturalPercent',
-                    })
+                  {historyLastApprovedIsActive ? (
+                    <DiffText changes={totalsChange?.totalForestNaturalPercentArea} />
+                  ) : (
+                    totalForestNaturalPercentArea
                   )}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {Numbers.format(
-                    ODPs.calcTotalSubFieldArea({
-                      originalDataPoint,
-                      field: 'forestPercent',
-                      subField: 'forestPlantationPercent',
-                    })
+                  {historyLastApprovedIsActive ? (
+                    <DiffText changes={totalsChange?.totalForestPlantationPercentArea} />
+                  ) : (
+                    totalForestPlantationPercentArea
                   )}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {Numbers.format(
-                    ODPs.calcTotalSubFieldArea({
-                      originalDataPoint,
-                      field: 'forestPercent',
-                      subField: 'otherPlantedForestPercent',
-                    })
+                  {historyLastApprovedIsActive ? (
+                    <DiffText changes={totalsChange?.totalOtherPlantedForestPercentArea} />
+                  ) : (
+                    totalOtherPlantedForestPercentArea
                   )}
                 </td>
               </tr>
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useForestCharacteristicsTotalsChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useForestCharacteristicsTotalsChange.ts
new file mode 100644
index 0000000000..45ede806e9
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useForestCharacteristicsTotalsChange.ts
@@ -0,0 +1,103 @@
+import { useMemo } from 'react'
+
+import * as Diff from 'diff'
+import { Change } from 'diff'
+import { Numbers } from 'utils/numbers'
+import { Objects } from 'utils/objects'
+
+import { ODPs } from 'meta/assessment'
+
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+
+type Props = {
+  totalForestNaturalPercentArea: string | null
+  totalForestPercentArea: string | null
+  totalForestPlantationPercentArea: string | null
+  totalOtherPlantedForestPercentArea: string | null
+}
+
+type Returned =
+  | {
+      [K in keyof Props]: Array<Change>
+    }
+  | undefined
+
+export const useForestCharacteristicsTotalsChange = (props: Props): Returned => {
+  const {
+    totalForestNaturalPercentArea: totalForestNaturalPercentAreaCurrent,
+    totalForestPercentArea: totalForestPercentAreaCurrent,
+    totalForestPlantationPercentArea: totalForestPlantationPercentAreaCurrent,
+    totalOtherPlantedForestPercentArea: totalOtherPlantedForestPercentAreaCurrent,
+  } = props
+
+  const originalDataPointHistory = useLastApprovedOriginalDataPoint()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  return useMemo<Returned>(() => {
+    if (!historyLastApprovedIsActive) return undefined
+
+    const canCalculate = !Objects.isEmpty(originalDataPointHistory)
+
+    const totalForestPercentAreaPrev = canCalculate
+      ? Numbers.format(ODPs.calcTotalFieldArea({ originalDataPoint: originalDataPointHistory, field: 'forestPercent' }))
+      : ''
+    const totalForestPercentArea = Diff.diffChars(totalForestPercentAreaPrev ?? '', totalForestPercentAreaCurrent ?? '')
+
+    const totalForestNaturalPercentAreaPrev = canCalculate
+      ? Numbers.format(
+          ODPs.calcTotalSubFieldArea({
+            originalDataPoint: originalDataPointHistory,
+            field: 'forestPercent',
+            subField: 'forestNaturalPercent',
+          })
+        )
+      : ''
+    const totalForestNaturalPercentArea = Diff.diffChars(
+      totalForestNaturalPercentAreaPrev ?? '',
+      totalForestNaturalPercentAreaCurrent ?? ''
+    )
+
+    const totalForestPlantationPercentAreaPrev = canCalculate
+      ? Numbers.format(
+          ODPs.calcTotalSubFieldArea({
+            originalDataPoint: originalDataPointHistory,
+            field: 'forestPercent',
+            subField: 'forestPlantationPercent',
+          })
+        )
+      : ''
+    const totalForestPlantationPercentArea = Diff.diffChars(
+      totalForestPlantationPercentAreaPrev ?? '',
+      totalForestPlantationPercentAreaCurrent ?? ''
+    )
+
+    const totalOtherPlantedForestPercentAreaPrev = canCalculate
+      ? Numbers.format(
+          ODPs.calcTotalSubFieldArea({
+            originalDataPoint: originalDataPointHistory,
+            field: 'forestPercent',
+            subField: 'otherPlantedForestPercent',
+          })
+        )
+      : ''
+    const totalOtherPlantedForestPercentArea = Diff.diffChars(
+      totalOtherPlantedForestPercentAreaPrev ?? '',
+      totalOtherPlantedForestPercentAreaCurrent ?? ''
+    )
+
+    return {
+      totalForestNaturalPercentArea,
+      totalForestPercentArea,
+      totalForestPlantationPercentArea,
+      totalOtherPlantedForestPercentArea,
+    }
+  }, [
+    historyLastApprovedIsActive,
+    originalDataPointHistory,
+    totalForestNaturalPercentAreaCurrent,
+    totalForestPercentAreaCurrent,
+    totalForestPlantationPercentAreaCurrent,
+    totalOtherPlantedForestPercentAreaCurrent,
+  ])
+}

From 66d24c3ba6e6c9897d94b9f16f8456de832dc1c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Sorja?= <ping@mirosorja.com>
Date: Mon, 10 Feb 2025 09:41:32 +0200
Subject: [PATCH 20/38] 4310 - Data History: Data table (no ODP) comparison
 (Last approved) (#4341)

* 4310 - getValuesLastApproved: use ActivityLogMessage.descriptionUpdate

* 4310 - table history: merge the last approved data

* 4310 - clean up

* 4310 - remove cloneCycle file
---
 .../tableData/getTableDataLastApproved.ts     | 21 ++++--
 .../data/getTableDataLastApproved.ts          | 70 +++++++++++++++++++
 .../repository/assessmentCycle/data/index.ts  |  2 +
 .../descriptions/getValuesLastApproved.ts     | 10 ++-
 4 files changed, 97 insertions(+), 6 deletions(-)
 create mode 100644 src/server/repository/assessmentCycle/data/getTableDataLastApproved.ts

diff --git a/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts b/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts
index e89933a5cf..e3bf075b7f 100644
--- a/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts
+++ b/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts
@@ -3,10 +3,11 @@ import { Objects } from 'utils/objects'
 import { HistoryLastApprovedInfo } from 'meta/cycleData/historyLastApproved'
 import { RecordAssessmentData, RecordAssessmentDatas } from 'meta/data'
 
-import { getTableData } from 'server/controller/cycleData/getTableData'
 import { BaseProtocol, DB } from 'server/db'
+import { DataRepository } from 'server/repository/assessmentCycle/data'
 import { TableRedisRepository } from 'server/repository/redis/table'
 
+import { getTableData } from '../getTableData'
 import { PropsGetTableData } from './props'
 
 type Props = PropsGetTableData & { info: HistoryLastApprovedInfo }
@@ -16,7 +17,7 @@ export const getTableDataLastApproved = async (
   client: BaseProtocol = DB
 ): Promise<RecordAssessmentData> => {
   const { assessment, countryISOs, cycle, info, mergeOdp = true, tableNames: _tableNames } = props
-  const { prevCycle } = info
+  const { prevCycle, lastAccepted } = info
   const prevCycleName = prevCycle?.name
 
   let data = {}
@@ -37,7 +38,7 @@ export const getTableDataLastApproved = async (
   if (!Objects.isEmpty(data)) {
     const { name: assessmentName } = assessment.props
     const cycleName = prevCycleName
-    return {
+    data = {
       [assessmentName]: {
         [cycle.name]: countryISOs.reduce((acc, countryIso) => {
           const countryData = RecordAssessmentDatas.getCountryData({ assessmentName, cycleName, countryIso, data })
@@ -47,5 +48,17 @@ export const getTableDataLastApproved = async (
     }
   }
 
-  return {}
+  if (!Objects.isNil(lastAccepted)) {
+    const assessmentName = assessment.props.name
+    const cycleName = cycle.name
+    const lastApprovedData = {
+      [assessmentName]: {
+        [cycleName]: await DataRepository.getTableDataLastApproved(props, client),
+      },
+    }
+
+    data = Objects.merge(data, lastApprovedData)
+  }
+
+  return data
 }
diff --git a/src/server/repository/assessmentCycle/data/getTableDataLastApproved.ts b/src/server/repository/assessmentCycle/data/getTableDataLastApproved.ts
new file mode 100644
index 0000000000..170a0fe946
--- /dev/null
+++ b/src/server/repository/assessmentCycle/data/getTableDataLastApproved.ts
@@ -0,0 +1,70 @@
+import { CountryIso } from 'meta/area'
+import { ActivityLogMessage, Assessment, Cycle } from 'meta/assessment'
+import { RecordCountryData } from 'meta/data'
+
+import { BaseProtocol, DB, Schemas } from 'server/db'
+
+type Props = {
+  assessment: Assessment
+  cycle: Cycle
+  countryISOs: Array<CountryIso>
+  tableNames: Array<string>
+}
+
+export const getTableDataLastApproved = (props: Props, client: BaseProtocol = DB): Promise<RecordCountryData> => {
+  const { assessment, cycle, countryISOs, tableNames } = props
+  const schemaCycle = Schemas.getNameCycle(assessment, cycle)
+  const schemaAssessment = Schemas.getName(assessment)
+
+  return client.one<RecordCountryData>(
+    `
+        with activities as (
+            select al.country_iso,
+                   t.props ->> 'name' as table_name,
+                   r.props ->> 'variableName' as variable_name,
+                   c.props ->> 'colName' as col_name,
+                   al.target -> 'value' || '{ "foo": "bar" }' as value,
+                   row_number() over (partition by al.target ->> 'colUuid' order by al.time desc) as row_number
+            from public.activity_log al
+            left join ${schemaCycle}.country_summary cs on al.country_iso = cs.country_iso
+            left join public.assessment a               on al.assessment_uuid = a.uuid
+            left join public.assessment_cycle ac        on a.id = ac.assessment_id and al.cycle_uuid = ac.uuid
+            left join ${schemaAssessment}.col c         on (al.target ->> 'colUuid')::uuid = c.uuid
+            left join ${schemaAssessment}.row r         on c.row_id = r.id
+            left join ${schemaAssessment}.table t       on r.table_id = t.id
+            where al.message in ('${ActivityLogMessage.nodeValueCalculatedUpdate}', '${ActivityLogMessage.nodeValueEstimate}', '${ActivityLogMessage.nodeValueUpdate}')
+              and al.country_iso in ($1:csv)
+              and a.props ->> 'name' = $2
+              and ac.name = $3
+              and al.time < cs.last_accepted
+              and t.props ->> 'name' in ($4:csv)
+        ),
+        agg1 as (
+            select country_iso,
+                   table_name,
+                   col_name,
+                   jsonb_object_agg(variable_name, value) as variable_data
+            from activities
+            where row_number = 1
+            group by country_iso, table_name, col_name
+        ),
+        agg2 as (
+            select country_iso,
+                   table_name,
+                   jsonb_object_agg(col_name, variable_data) as col_data
+            from agg1
+            group by country_iso, table_name
+        ),
+        agg3 as (
+            select country_iso,
+                   jsonb_object_agg(table_name, col_data) as table_data
+            from agg2
+            group by country_iso
+        )
+        select jsonb_object_agg(country_iso, table_data) as data
+        from agg3;
+    `,
+    [countryISOs, assessment.props.name, cycle.name, tableNames],
+    ({ data }) => data ?? {}
+  )
+}
diff --git a/src/server/repository/assessmentCycle/data/index.ts b/src/server/repository/assessmentCycle/data/index.ts
index 04aea3a9d8..c9b45e8175 100644
--- a/src/server/repository/assessmentCycle/data/index.ts
+++ b/src/server/repository/assessmentCycle/data/index.ts
@@ -3,6 +3,7 @@ import { createOrReplaceTableDataView } from './createOrReplaceTableDataView'
 import { getFaoEstimateData } from './getFaoEstimateData'
 import { getOriginalDataPointData } from './getOriginalDataPointData'
 import { getTableData } from './getTableData'
+import { getTableDataLastApproved } from './getTableDataLastApproved'
 
 export const DataRepository = {
   clearTableData,
@@ -10,4 +11,5 @@ export const DataRepository = {
   getFaoEstimateData,
   getOriginalDataPointData,
   getTableData,
+  getTableDataLastApproved,
 }
diff --git a/src/server/repository/assessmentCycle/descriptions/getValuesLastApproved.ts b/src/server/repository/assessmentCycle/descriptions/getValuesLastApproved.ts
index 5f9e1c3b22..365f851592 100644
--- a/src/server/repository/assessmentCycle/descriptions/getValuesLastApproved.ts
+++ b/src/server/repository/assessmentCycle/descriptions/getValuesLastApproved.ts
@@ -1,5 +1,11 @@
 import { CountryIso } from 'meta/area'
-import { Assessment, CommentableDescriptionName, Cycle, DescriptionCountryValues } from 'meta/assessment'
+import {
+  ActivityLogMessage,
+  Assessment,
+  CommentableDescriptionName,
+  Cycle,
+  DescriptionCountryValues,
+} from 'meta/assessment'
 
 import { BaseProtocol, DB, Schemas } from 'server/db'
 
@@ -31,7 +37,7 @@ export const getValuesLastApproved = async (
          left join ${schemaName}.country_summary cs on al.country_iso = cs.country_iso
      where
            al.target is not null
-       and al.message = 'descriptionUpdate'
+       and al.message = '${ActivityLogMessage.descriptionUpdate}'
        and al.country_iso = $1
        and al.section = $2
        and cs.last_accepted is not null

From 24c98aa7d018fbc4d1c9f7d453f9a82d318aa96f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Sorja?= <ping@mirosorja.com>
Date: Mon, 10 Feb 2025 11:31:09 +0200
Subject: [PATCH 21/38] 4324 - Don't show history on placeholder cells (#4344)

---
 .../pages/Section/DataTable/Table/RowData/Cell/Cell.tsx      | 3 ++-
 src/meta/assessment/cols.ts                                  | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx b/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
index e1c69440e3..b04dee6137 100644
--- a/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
+++ b/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
@@ -80,7 +80,8 @@ const Cell: React.FC<Props> = (props) => {
 
   const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
   const disabled = disabledProps || !!nodeValue?.odpId || Cols.hasLinkedNodes({ col, cycle })
-  const Component = historyLastApprovedIsActive ? History : Components[col.props.colType]
+  const displayHistory = historyLastApprovedIsActive && !Cols.isPlaceholder(col)
+  const Component = displayHistory ? History : Components[col.props.colType]
   const { gridColumn, gridRow, ...style } = Cols.getStyle({ col, cycle })
   const isInput = ![ColType.calculated, ColType.placeholder].includes(col.props.colType)
 
diff --git a/src/meta/assessment/cols.ts b/src/meta/assessment/cols.ts
index 1902a84942..1d77922bd1 100644
--- a/src/meta/assessment/cols.ts
+++ b/src/meta/assessment/cols.ts
@@ -126,6 +126,10 @@ const isNumeric = (col: Col): boolean => {
   return [ColType.integer, ColType.decimal, ColType.calculated].includes(col.props.colType)
 }
 
+const isPlaceholder = (col: Col): boolean => {
+  return col.props.colType === ColType.placeholder
+}
+
 export const Cols = {
   cloneProps,
   getCalculateFn,
@@ -139,4 +143,5 @@ export const Cols = {
   isCalculated,
   isNumeric,
   isReadOnly,
+  isPlaceholder,
 }

From 78947fa9c903812c28c1eb85b59894c6b777766b Mon Sep 17 00:00:00 2001
From: Mino Togna <minotogna@users.noreply.github.com>
Date: Mon, 10 Feb 2025 11:44:04 +0100
Subject: [PATCH 22/38] 4206 - Data History: Data table w/ ODP lastAccepted
 preparation (#4348)

* 4206 - Data History: Data table w/ ODP lastAccepted preparation

* deepscan
---
 src/client/components/DiffText/DiffText.scss  |  4 +
 .../HistoryCompare/CellDiff/CellDiff.scss     | 14 ----
 .../HistoryCompare/CellDiff/CellDiff.tsx      | 20 +----
 .../tableData/getTableDataLastApproved.ts     | 29 +++++---
 .../ddl/getTableDataWithODPCreateViewDDL.ts   | 73 -------------------
 .../assessmentCycle/data/getTableData.ts      |  4 +-
 6 files changed, 26 insertions(+), 118 deletions(-)
 delete mode 100644 src/server/repository/assessmentCycle/data/ddl/getTableDataWithODPCreateViewDDL.ts

diff --git a/src/client/components/DiffText/DiffText.scss b/src/client/components/DiffText/DiffText.scss
index 7fd47e28d8..fc22648bfa 100644
--- a/src/client/components/DiffText/DiffText.scss
+++ b/src/client/components/DiffText/DiffText.scss
@@ -1,6 +1,10 @@
 @import 'src/client/style/partials';
 
 .diff-text {
+  span {
+    word-break: break-word;
+  }
+
   .added,
   .removed {
     font-weight: 600;
diff --git a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/CellDiff/CellDiff.scss b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/CellDiff/CellDiff.scss
index 7f25172770..1bafb6acd6 100644
--- a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/CellDiff/CellDiff.scss
+++ b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/CellDiff/CellDiff.scss
@@ -2,18 +2,4 @@
 
 .history-compare__cell-diff {
   padding: $spacing-xxs;
-
-  .added,
-  .removed {
-    font-weight: 600;
-  }
-
-  .added {
-    color: darken($ui-status-accepted, 10%);
-  }
-
-  .removed {
-    color: $ui-destructive;
-    text-decoration: line-through;
-  }
 }
diff --git a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/CellDiff/CellDiff.tsx b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/CellDiff/CellDiff.tsx
index 3106cb6b22..ee63671794 100644
--- a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/CellDiff/CellDiff.tsx
+++ b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/CellDiff/CellDiff.tsx
@@ -1,10 +1,10 @@
 import './CellDiff.scss'
 import React from 'react'
 
-import classNames from 'classnames'
 import { Change } from 'diff'
 
 import { DataCell } from 'client/components/DataGrid'
+import DiffText from 'client/components/DiffText'
 
 type Props = {
   changes: Array<Change>
@@ -17,23 +17,7 @@ const CellDiff: React.FC<Props> = (props) => {
 
   return (
     <DataCell className="history-compare__cell-diff" lastCol={lastCol} lastRow={lastRow}>
-      {changes?.map((change, i) => {
-        const { added, removed, value } = change
-        const key = `${value}_${String(i)}`
-
-        return (
-          <React.Fragment key={key}>
-            {value.split('\n\r').map((text, j) => {
-              return (
-                <React.Fragment key={`${key}_${String(j)}`}>
-                  <span className={classNames({ added, removed })}>{text}</span>
-                  <br />
-                </React.Fragment>
-              )
-            })}
-          </React.Fragment>
-        )
-      })}
+      <DiffText changes={changes} />
     </DataCell>
   )
 }
diff --git a/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts b/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts
index e3bf075b7f..759f0afd9d 100644
--- a/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts
+++ b/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts
@@ -1,5 +1,6 @@
 import { Objects } from 'utils/objects'
 
+import { TableName } from 'meta/assessment'
 import { HistoryLastApprovedInfo } from 'meta/cycleData/historyLastApproved'
 import { RecordAssessmentData, RecordAssessmentDatas } from 'meta/data'
 
@@ -10,28 +11,32 @@ import { TableRedisRepository } from 'server/repository/redis/table'
 import { getTableData } from '../getTableData'
 import { PropsGetTableData } from './props'
 
-type Props = PropsGetTableData & { info: HistoryLastApprovedInfo }
+type Props = Omit<PropsGetTableData, 'mergeOdp'> & { info: HistoryLastApprovedInfo }
 
 export const getTableDataLastApproved = async (
   props: Props,
   client: BaseProtocol = DB
 ): Promise<RecordAssessmentData> => {
-  const { assessment, countryISOs, cycle, info, mergeOdp = true, tableNames: _tableNames } = props
+  const { assessment, countryISOs, cycle, info, tableNames } = props
   const { prevCycle, lastAccepted } = info
   const prevCycleName = prevCycle?.name
 
+  const hasPrevCycle = !Objects.isNil(prevCycle)
+  const hasLastAccepted = !Objects.isNil(lastAccepted)
+
   let data = {}
-  if (!Objects.isNil(prevCycle)) {
-    const tableNames = (
-      await Promise.all(
-        _tableNames?.map((tableName) => TableRedisRepository.getOne({ assessment, cycle: prevCycle, tableName })) ?? []
-      )
+  if (hasPrevCycle) {
+    const tablesPrevCycle = await Promise.all(
+      (tableNames ?? []).map((tableName) => TableRedisRepository.getOne({ assessment, cycle: prevCycle, tableName }))
+    )
+    const tableNamesPrevCycle = tablesPrevCycle?.reduce<Array<TableName>>(
+      (acc, table) => (Objects.isNil(table) ? acc : [...acc, table.props.name]),
+      []
     )
-      .filter(Boolean)
-      ?.map((table) => table.props.name)
 
-    if (!Objects.isEmpty(tableNames)) {
-      data = await getTableData({ ...props, tableNames, mergeOdp, cycle: prevCycle }, client)
+    if (!Objects.isEmpty(tableNamesPrevCycle)) {
+      const mergeOdp = !hasLastAccepted // when has last accepted, odp gets manually merged later
+      data = await getTableData({ ...props, tableNames: tableNamesPrevCycle, mergeOdp, cycle: prevCycle }, client)
     }
   }
 
@@ -48,7 +53,7 @@ export const getTableDataLastApproved = async (
     }
   }
 
-  if (!Objects.isNil(lastAccepted)) {
+  if (hasLastAccepted) {
     const assessmentName = assessment.props.name
     const cycleName = cycle.name
     const lastApprovedData = {
diff --git a/src/server/repository/assessmentCycle/data/ddl/getTableDataWithODPCreateViewDDL.ts b/src/server/repository/assessmentCycle/data/ddl/getTableDataWithODPCreateViewDDL.ts
deleted file mode 100644
index deaf373561..0000000000
--- a/src/server/repository/assessmentCycle/data/ddl/getTableDataWithODPCreateViewDDL.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Assessment, Cycle, Table, TableNames } from 'meta/assessment'
-
-import { getOriginalDataPointVariables } from 'server/controller/cycleData/originalDataPoint/getOriginalDataPointVariables'
-import { Schemas, Tables } from 'server/db'
-
-type Props = {
-  assessment: Assessment
-  cycle: Cycle
-  table: Table
-}
-
-export const getTableDataWithODPCreateViewDDL = (props: Props): string => {
-  const { assessment, cycle, table } = props
-
-  const schemaCycle = Schemas.getNameCycle(assessment, cycle)
-
-  const tableName = table.props.name
-  const odpVariables = getOriginalDataPointVariables({ cycle }).filter((variable) => variable.tableName === tableName)
-
-  const query = `
-create or replace view ${schemaCycle}.${Tables.getTableDataWithOdpViewName({ tableName })} as
-(
-with config as (select c.country_iso,
-${
-  tableName === TableNames.forestCharacteristics
-    ? `coalesce(jsonb_extract_path_text(c.props,'forestCharacteristics','useOriginalDataPoint'),'false') = 'true'`
-    : `true`
-}                       as use_odp
-                from ${schemaCycle}.country c),
-     table_data as (select case when c.use_odp then 2 else 1 end as priority, d.*
-                    from ${schemaCycle}.${tableName} d
-                             left join config c
-                                       on c.country_iso = d.country_iso),
-     odp_data as (with data_raw as (select d.country_iso,
-                                           replace(initcap(replace(jsonb_object_keys(to_jsonb(d.*)), '_', ' ')), ' ',
-                                                   '')                      as variable_name,
-                                           jsonb_object_keys(to_jsonb(d.*)) as variable_name_orig,
-                                           d.year::text                     as col_name,
-                                           to_jsonb(d.*)                    as odp
-                                    from ${schemaCycle}.original_data_point_data d),
-                       data as (select d.country_iso,
-                                       lower(left(d.variable_name, 1)) || right(d.variable_name, -1) as variable_name,
-                                       d.variable_name_orig,
-                                       d.col_name,
-                                       d.odp
-                                from data_raw d)
-                  select case when c.use_odp then 1 else 2 end                                           as priority,
-                         d.country_iso,
-                         d.variable_name,
-                         d.col_name,
-                         jsonb_build_object('raw', jsonb_extract_path_text(d.odp, d.variable_name_orig)) as value
-                  from data d
-                           left join config c
-                                     on c.country_iso = d.country_iso
-                  where d.variable_name in (${odpVariables.map(({ variableName }) => `'${variableName}'`).join(',')})),
-     data as (SELECT d.*, row_number() OVER (PARTITION BY d.country_iso, d.variable_name, d.col_name) AS row_number
-              from ( (select *
-                      from table_data
-                      union
-                      select *
-                      from odp_data)
-                  order by 1,2,3,4) as d)
-select d.country_iso,
-       d.variable_name,
-       d.col_name,
-       d.value
-from data d
-where d.row_number = 1
-order by 1, 2, 3
-);
-`
-  return query
-}
diff --git a/src/server/repository/assessmentCycle/data/getTableData.ts b/src/server/repository/assessmentCycle/data/getTableData.ts
index 8a91887c99..b119598cd9 100644
--- a/src/server/repository/assessmentCycle/data/getTableData.ts
+++ b/src/server/repository/assessmentCycle/data/getTableData.ts
@@ -1,3 +1,5 @@
+import { Objects } from 'utils/objects'
+
 import { CountryIso } from 'meta/area'
 import { Assessment, Cycle, VariableCache } from 'meta/assessment'
 import { RecordCountryData, TablesCondition } from 'meta/data'
@@ -25,7 +27,7 @@ const asQueryStringArray = (arr: any[]) => `(${arr.map((v) => `'${v}'`).join(','
 const mergeDependencies = (props: Props): TablesCondition => {
   const { dependencies, tables } = props
 
-  if (dependencies && dependencies.length) {
+  if (!Objects.isEmpty(dependencies)) {
     dependencies.forEach((d) => {
       if (!tables[d.tableName]) {
         tables[d.tableName] = { variables: [] }

From 01826bfc87d51ddbc05f593a207647ac0efb55c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Sorja?= <ping@mirosorja.com>
Date: Mon, 10 Feb 2025 13:17:22 +0200
Subject: [PATCH 23/38] 4347 - raw year for select (#4349)

* 4347 - raw year for select

* 4347 - introduce getSelectOptionLabel
---
 .../RowData/Cell/History/hooks/useChanges.tsx   | 17 ++++++++++++++---
 .../RowData/Cell/Select/hooks/useOptions.tsx    | 11 ++---------
 src/meta/assessment/cols.ts                     |  8 +++++++-
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/client/pages/Section/DataTable/Table/RowData/Cell/History/hooks/useChanges.tsx b/src/client/pages/Section/DataTable/Table/RowData/Cell/History/hooks/useChanges.tsx
index 9cd8108404..a12e7e3f66 100644
--- a/src/client/pages/Section/DataTable/Table/RowData/Cell/History/hooks/useChanges.tsx
+++ b/src/client/pages/Section/DataTable/Table/RowData/Cell/History/hooks/useChanges.tsx
@@ -22,12 +22,23 @@ interface FormatValueProps {
 }
 
 const _formatSelectValue = (nodeValue: NodeValue, col: Col, cycle: Cycle, t: TFunction): string => {
-  const { labelKeyPrefix } = Cols.getSelectProps({ cycle, col })
+  const { labelKeyPrefix, years } = Cols.getSelectProps({ cycle, col })
   const { raw } = nodeValue
+  const options = Cols.getSelectOptions({ cycle, col })
+
+  if (!Objects.isEmpty(years)) {
+    return raw
+  }
+
+  const getLabel = (value: string) => {
+    const optionProps = options.find((option) => option.name === value)
+    return optionProps ? Cols.getSelectOptionLabel(optionProps, t, labelKeyPrefix) : value
+  }
+
   if (Array.isArray(raw)) {
-    return raw.map((value) => t(`${labelKeyPrefix}.${value}`)).join(', ')
+    return raw.map(getLabel).join(', ')
   }
-  return t(`${labelKeyPrefix}.${raw}`)
+  return getLabel(raw)
 }
 
 const _formatValue = (props: FormatValueProps): string => {
diff --git a/src/client/pages/Section/DataTable/Table/RowData/Cell/Select/hooks/useOptions.tsx b/src/client/pages/Section/DataTable/Table/RowData/Cell/Select/hooks/useOptions.tsx
index f9a8136446..3fc85f5e75 100644
--- a/src/client/pages/Section/DataTable/Table/RowData/Cell/Select/hooks/useOptions.tsx
+++ b/src/client/pages/Section/DataTable/Table/RowData/Cell/Select/hooks/useOptions.tsx
@@ -1,18 +1,11 @@
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { TFunction } from 'i18next'
-
-import { Col, Cols, ColSelectOption, NodeValue } from 'meta/assessment'
+import { Col, Cols, NodeValue } from 'meta/assessment'
 
 import { useCycle } from 'client/store/assessment'
 import { Option, OptionsGroup, OptionsOrGroups } from 'client/components/Inputs/Select'
 
-const getLabel = (option: ColSelectOption, t: TFunction, labelKeyPrefix = 'yesNoTextSelect'): string => {
-  const label = Number.isInteger(+option.name) ? option.name : t(`${labelKeyPrefix}.${option.name}`)
-  return option.type === 'header' ? `-- ${label} --` : label
-}
-
 type Props = {
   col: Col
   nodeValue: NodeValue
@@ -32,7 +25,7 @@ export const useOptions = (props: Props): OptionsOrGroups => {
     let options: Array<Option> = []
 
     optionsProps.forEach((optionProps) => {
-      const label = getLabel(optionProps, t, labelKeyPrefix)
+      const label = Cols.getSelectOptionLabel(optionProps, t, labelKeyPrefix)
 
       if (optionProps.type === 'header') {
         options = []
diff --git a/src/meta/assessment/cols.ts b/src/meta/assessment/cols.ts
index 1d77922bd1..e44ab33478 100644
--- a/src/meta/assessment/cols.ts
+++ b/src/meta/assessment/cols.ts
@@ -130,18 +130,24 @@ const isPlaceholder = (col: Col): boolean => {
   return col.props.colType === ColType.placeholder
 }
 
+const getSelectOptionLabel = (option: ColSelectOption, t: TFunction, labelKeyPrefix = 'yesNoTextSelect'): string => {
+  const label = Number.isInteger(+option.name) ? option.name : t(`${labelKeyPrefix}.${option.name}`)
+  return option.type === 'header' ? `-- ${label} --` : label
+}
+
 export const Cols = {
   cloneProps,
   getCalculateFn,
   getClassNames,
   getColName,
   getLabel,
+  getSelectOptionLabel,
   getSelectOptions,
   getSelectProps,
   getStyle,
   hasLinkedNodes,
   isCalculated,
   isNumeric,
-  isReadOnly,
   isPlaceholder,
+  isReadOnly,
 }

From 65f37e50ba41631edaa85ba5cc13e021cb1bcd4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Sorja?= <ping@mirosorja.com>
Date: Mon, 10 Feb 2025 16:01:39 +0200
Subject: [PATCH 24/38] 4345 - Check table names exist when fetching history
 (#4346)

* 4345 - Check table names exist when fetching history

* 4345 - cleanup

* 4345 - clean up the cleanup

* 4345 - reset file

* 4345 - Fix empty tableNames issue
---
 src/client/pages/Section/hooks/useGetTableDataHistory.ts     | 5 ++++-
 .../assessmentCycle/data/getTableDataLastApproved.ts         | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/client/pages/Section/hooks/useGetTableDataHistory.ts b/src/client/pages/Section/hooks/useGetTableDataHistory.ts
index 94fb9751dc..69a9226659 100644
--- a/src/client/pages/Section/hooks/useGetTableDataHistory.ts
+++ b/src/client/pages/Section/hooks/useGetTableDataHistory.ts
@@ -1,5 +1,7 @@
 import { useEffect } from 'react'
 
+import { Objects } from 'utils/objects'
+
 import { CountryIso } from 'meta/area'
 import { SectionName } from 'meta/assessment'
 
@@ -22,7 +24,8 @@ export const useGetTableDataHistory = (props: Props): void => {
   const tableNames = tableSections.flatMap((tableSection) => tableSection.tables.flatMap((table) => table.props.name))
 
   useEffect(() => {
-    if (historyLastApprovedIsActive) {
+    // TableSections might not be initialised on first load
+    if (historyLastApprovedIsActive && !Objects.isEmpty(tableNames)) {
       const getParams = { countryIso, assessmentName, cycleName, sectionName, tableNames }
       dispatch(DataActions.getTableDataHistory(getParams))
     }
diff --git a/src/server/repository/assessmentCycle/data/getTableDataLastApproved.ts b/src/server/repository/assessmentCycle/data/getTableDataLastApproved.ts
index 170a0fe946..f26ed2bcf3 100644
--- a/src/server/repository/assessmentCycle/data/getTableDataLastApproved.ts
+++ b/src/server/repository/assessmentCycle/data/getTableDataLastApproved.ts
@@ -23,7 +23,7 @@ export const getTableDataLastApproved = (props: Props, client: BaseProtocol = DB
                    t.props ->> 'name' as table_name,
                    r.props ->> 'variableName' as variable_name,
                    c.props ->> 'colName' as col_name,
-                   al.target -> 'value' || '{ "foo": "bar" }' as value,
+                   al.target -> 'value' as value,
                    row_number() over (partition by al.target ->> 'colUuid' order by al.time desc) as row_number
             from public.activity_log al
             left join ${schemaCycle}.country_summary cs on al.country_iso = cs.country_iso

From 21baed357e9e5d75233811f444a576413db66d37 Mon Sep 17 00:00:00 2001
From: Mino Togna <minotogna@users.noreply.github.com>
Date: Mon, 10 Feb 2025 17:51:25 +0100
Subject: [PATCH 25/38] 4206 - Data History: Descriptions slice merge (#4351)

---
 src/client/store/data/extraReducers/getDescriptionsHistory.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/client/store/data/extraReducers/getDescriptionsHistory.ts b/src/client/store/data/extraReducers/getDescriptionsHistory.ts
index 96880ba403..9bf656c188 100644
--- a/src/client/store/data/extraReducers/getDescriptionsHistory.ts
+++ b/src/client/store/data/extraReducers/getDescriptionsHistory.ts
@@ -10,6 +10,7 @@ export const getDescriptionsHistoryReducer = (builder: ActionReducerMapBuilder<D
 
     const value = payload[countryIso]
     const path = ['history', 'lastApproved', 'descriptions', assessmentName, cycleName, countryIso]
+    const currentValue = Objects.getInPath(state, path) ?? {}
 
-    Objects.setInPath({ obj: state, path, value })
+    Objects.setInPath({ obj: state, path, value: { ...value, ...currentValue } })
   })

From 9e323319edebfc50bcafc4871d966d8882ce3a9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Mon, 10 Feb 2025 12:31:29 -0500
Subject: [PATCH 26/38] 4253 - Data History: ODP comparison (empty dataset) -
 Forest characteristics - naturally regenerating (#4352)

* 4253 - ODP history: Add calculateNationalClassNaturalForestPercentArea util

* 4253 - ODP history: Add naturalForestPercentAreaChange calculated diffs

* 4253 - ODP history: Hide validation when historyLastApprovedIsActive

* 4253 - ODP history: Rename useNaturalForestPercentAreaChange

* 4253 - ODP history: Add naturalForestPercent diffs
---
 ...haracteristicsNaturallyRegeneratingRow.tsx | 63 +++++++++-----
 .../useNaturalForestPercentAndAreaChange.ts   | 83 +++++++++++++++++++
 .../originalDataPoint/odps/index.ts           |  2 +
 .../odps/nationalClassUtils.ts                |  7 ++
 4 files changed, 135 insertions(+), 20 deletions(-)
 create mode 100644 src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaChange.ts

diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegeneratingRow.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegeneratingRow.tsx
index 36ddaf2321..809d566ba6 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegeneratingRow.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegeneratingRow.tsx
@@ -8,7 +8,9 @@ import { ODPs, SectionNames } from 'meta/assessment'
 import { Topics } from 'meta/messageCenter'
 import { TooltipId } from 'meta/tooltip'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
+import DiffText from 'client/components/DiffText'
 import PercentInput from 'client/components/PercentInput'
 import ReviewIndicator from 'client/components/ReviewIndicator'
 import { Columns, useOnPaste } from 'client/pages/OriginalDataPoint/components/hooks/useOnPaste'
@@ -18,6 +20,7 @@ import { useNationalClassValidations } from 'client/pages/OriginalDataPoint/hook
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
 import { useNationalClassNameComments } from '../../hooks'
+import { useNaturalForestPercentAndAreaChange } from './hooks/useNaturalForestPercentAndAreaChange'
 
 const columns: Columns = [{ name: 'forestNaturalForestOfWhichPrimaryForestPercent', type: 'decimal', precision: 3 }]
 
@@ -34,20 +37,27 @@ const ForestCharacteristicsNaturallyRegeneratingRow: React.FC<Props> = (props) =
 
   const { nationalClasses, id } = originalDataPoint
   const nationalClass = nationalClasses[index]
-  const { name, area, forestPercent, forestNaturalPercent, forestNaturalForestOfWhichPrimaryForestPercent, uuid } =
-    nationalClass
+  const { name, forestNaturalForestOfWhichPrimaryForestPercent, uuid } = nationalClass
   const target = [id, 'class', `${uuid}`, 'naturally_regenerating_forest_of_which_primary_forest'] as string[]
   const classNameRowComments = useNationalClassNameComments(target)
 
-  const ofWhichPrimary = area
-    ? Numbers.mul(area, Numbers.div(Numbers.mul(forestNaturalPercent, forestPercent), 10000))
-    : null
+  const ofWhichPrimary = ODPs.calculateNationalClassNaturalForestPercentArea(nationalClass)
 
-  const validationErrorMessage = useNationalClassValidations({
+  const changes = useNaturalForestPercentAndAreaChange({
+    forestNaturalForestOfWhichPrimaryForestPercent,
+    nationalClassIndex: index,
+    naturalForestPercentArea: ofWhichPrimary,
+  })
+
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  let validationErrorMessage = useNationalClassValidations({
     index,
     originalDataPoint,
     variable: 'validPrimaryForest',
   })
+  validationErrorMessage = historyLastApprovedIsActive ? null : validationErrorMessage
+
   const _onPaste = useOnPaste({
     columns,
     index,
@@ -66,7 +76,13 @@ const ForestCharacteristicsNaturallyRegeneratingRow: React.FC<Props> = (props) =
   return (
     <tr className={classNameRowComments}>
       <th className="fra-table__category-cell">{name}</th>
-      <th className="fra-table__calculated-sub-cell fra-table__divider">{Numbers.format(ofWhichPrimary)}</th>
+      <th className="fra-table__calculated-sub-cell fra-table__divider">
+        {historyLastApprovedIsActive ? (
+          <DiffText changes={changes?.naturalForestPercentArea} />
+        ) : (
+          Numbers.format(ofWhichPrimary)
+        )}
+      </th>
       <td
         className={classNames(`fra-table__cell`, {
           error: Boolean(validationErrorMessage),
@@ -74,19 +90,26 @@ const ForestCharacteristicsNaturallyRegeneratingRow: React.FC<Props> = (props) =
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        <PercentInput
-          disabled={!canEditData || isZeroOrNullPrimaryForest}
-          numberValue={isZeroOrNullPrimaryForest ? 0 : forestNaturalForestOfWhichPrimaryForestPercent}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-            const { value } = event.target
-            const updateProps = { field: columns[0].name, index, precision: columns[0].precision, value }
-            updateOriginalDataField(updateProps)
-          }}
-          onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
-            const odp = _onPaste({ event, colIndex: 0 })
-            updateOriginalData(odp)
-          }}
-        />
+        {historyLastApprovedIsActive ? (
+          <div className="odp-percent-diff">
+            <DiffText changes={changes?.naturalForestPercent} />
+            <span>%</span>
+          </div>
+        ) : (
+          <PercentInput
+            disabled={!canEditData || isZeroOrNullPrimaryForest}
+            numberValue={isZeroOrNullPrimaryForest ? 0 : forestNaturalForestOfWhichPrimaryForestPercent}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              const { value } = event.target
+              const updateProps = { field: columns[0].name, index, precision: columns[0].precision, value }
+              updateOriginalDataField(updateProps)
+            }}
+            onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
+              const odp = _onPaste({ event, colIndex: 0 })
+              updateOriginalData(odp)
+            }}
+          />
+        )}
       </td>
 
       {showReviewIndicator && (
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaChange.ts
new file mode 100644
index 0000000000..6f77acbdd2
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaChange.ts
@@ -0,0 +1,83 @@
+import { useMemo } from 'react'
+
+import BigNumber from 'bignumber.js'
+import * as Diff from 'diff'
+import { Change } from 'diff'
+import { Numbers } from 'utils/numbers'
+import { Objects } from 'utils/objects'
+
+import { ODPs } from 'meta/assessment'
+
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+
+type Props = {
+  forestNaturalForestOfWhichPrimaryForestPercent?: string
+  nationalClassIndex: number
+  naturalForestPercentArea: BigNumber | null
+}
+
+type Returned = {
+  naturalForestPercent: Array<Change>
+  naturalForestPercentArea: Array<Change>
+}
+
+export const useNaturalForestPercentAndAreaChange = (props: Props): Returned => {
+  const {
+    forestNaturalForestOfWhichPrimaryForestPercent: forestNaturalForestOfWhichPrimaryForestPercentCurrent,
+    nationalClassIndex,
+    naturalForestPercentArea: naturalForestPercentAreaCurrent,
+  } = props
+
+  const originalDataPointHistory = useLastApprovedOriginalDataPoint()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const nationalClass = originalDataPointHistory?.nationalClasses?.[nationalClassIndex]
+
+  return useMemo<Returned>(() => {
+    if (!historyLastApprovedIsActive) return undefined
+
+    const canCalculate = !Objects.isEmpty(nationalClass)
+
+    const naturalForestPercentAreaPrev = canCalculate
+      ? ODPs.calculateNationalClassNaturalForestPercentArea(nationalClass)
+      : null
+
+    const formattedAreaPrev = Numbers.format(naturalForestPercentAreaPrev ?? '')
+    const formattedAreaCurrent = Numbers.format(naturalForestPercentAreaCurrent ?? '')
+
+    const naturalForestPercentArea = Diff.diffChars(formattedAreaPrev ?? '', formattedAreaCurrent ?? '')
+
+    // forestNaturalForestOfWhichPrimaryForestPercent change
+    const isZeroOrNullPrimaryForestPrev =
+      naturalForestPercentAreaPrev === null || Numbers.eq(naturalForestPercentAreaPrev, 0)
+
+    let naturalForestPercentPrev = isZeroOrNullPrimaryForestPrev
+      ? 0
+      : nationalClass?.forestNaturalForestOfWhichPrimaryForestPercent
+    naturalForestPercentPrev = !canCalculate ? '' : naturalForestPercentPrev // Default to empty string if prev is not present
+    const formattedNaturalForestPercentPrev = Numbers.format(naturalForestPercentPrev ?? '', 3)
+
+    const isZeroOrNullPrimaryForestCurrent =
+      naturalForestPercentAreaCurrent === null || Numbers.eq(naturalForestPercentAreaCurrent, 0)
+
+    const naturalForestPercentCurrent = isZeroOrNullPrimaryForestCurrent
+      ? 0
+      : forestNaturalForestOfWhichPrimaryForestPercentCurrent
+    const formattedNaturalForestPercentCurrent = Numbers.format(naturalForestPercentCurrent ?? '', 3)
+
+    const naturalForestPercent = Diff.diffChars(
+      formattedNaturalForestPercentPrev ?? '',
+      formattedNaturalForestPercentCurrent ?? ''
+    )
+
+    return {
+      naturalForestPercent,
+      naturalForestPercentArea,
+    }
+  }, [
+    forestNaturalForestOfWhichPrimaryForestPercentCurrent,
+    historyLastApprovedIsActive,
+    nationalClass,
+    naturalForestPercentAreaCurrent,
+  ])
+}
diff --git a/src/meta/assessment/originalDataPoint/odps/index.ts b/src/meta/assessment/originalDataPoint/odps/index.ts
index 2160f166a3..7308f3d7c1 100644
--- a/src/meta/assessment/originalDataPoint/odps/index.ts
+++ b/src/meta/assessment/originalDataPoint/odps/index.ts
@@ -12,6 +12,7 @@ import { canCopyPreviousValues } from './canCopyPreviousValues'
 import { deleteNationalClass } from './deleteNationalClass'
 import {
   calculateNationalClassForestArea,
+  calculateNationalClassNaturalForestPercentArea,
   calculateNationalClassOtherLandPercent,
   hasNaturallyRegenerating,
 } from './nationalClassUtils'
@@ -27,6 +28,7 @@ export const ODPs = {
   calcTotalSubFieldArea,
   calcTotalSubSubFieldArea,
   calculateNationalClassForestArea,
+  calculateNationalClassNaturalForestPercentArea,
   calculateNationalClassOtherLandPercent,
   calculateValues,
   canCopyPreviousValues,
diff --git a/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts b/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts
index 07bfd4d6be..1ac3d3ae85 100644
--- a/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts
+++ b/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts
@@ -1,3 +1,4 @@
+import BigNumber from 'bignumber.js'
 import { Numbers } from 'utils/numbers'
 import { Objects } from 'utils/objects'
 
@@ -7,6 +8,12 @@ export const calculateNationalClassForestArea = (nc: ODPNationalClass): string |
   return nc.area && Numbers.format((Number(nc.area) * Number(nc.forestPercent)) / 100)
 }
 
+export const calculateNationalClassNaturalForestPercentArea = (nc: ODPNationalClass): BigNumber | null => {
+  return nc.area
+    ? Numbers.mul(nc.area, Numbers.div(Numbers.mul(nc.forestNaturalPercent, nc.forestPercent), 10000))
+    : null
+}
+
 export const calculateNationalClassOtherLandPercent = (nc: ODPNationalClass): string | null => {
   if (!Objects.isEmpty(nc.forestPercent) || !Objects.isEmpty(nc.otherWoodedLandPercent)) {
     return Numbers.format(Numbers.sub(100, Numbers.add(nc.forestPercent ?? 0, nc.otherWoodedLandPercent ?? 0)), 3)

From 9f3bc48b892cc0e63fe78643bba8f2c4a77cc232 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Tue, 11 Feb 2025 00:47:40 -0500
Subject: [PATCH 27/38] 4253 - Data History: ODP comparison (empty dataset) -
 Forest naturally regenerating totals diffs (#4353)

* 4253 - ODP history: Add name diffs

* 4253 - ODP history: Remove existing ternary render

* 4253 - ODP history: Add primaryForestPercentChange diffs

* 4253 - ODP history: Add ForestCharacteristicsNaturallyRegenerating total vars

* 4253 - ODP history: Add ForestCharacteristicsNaturallyRegenerating totals diffs
---
 ...stCharacteristicsNaturallyRegenerating.tsx | 44 +++++++++---
 ...haracteristicsNaturallyRegeneratingRow.tsx |  9 ++-
 .../PrimaryForestPercent.tsx                  | 62 ++++++++++------
 .../hooks/usePrimaryForestPercentChange.ts    | 32 +++++++++
 ...NaturalForestPercentAndAreaTotalsChange.ts | 72 +++++++++++++++++++
 5 files changed, 188 insertions(+), 31 deletions(-)
 create mode 100644 src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/hooks/usePrimaryForestPercentChange.ts
 create mode 100644 src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts

diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegenerating.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegenerating.tsx
index d6afe2daec..170646e202 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegenerating.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegenerating.tsx
@@ -5,8 +5,11 @@ import { Numbers } from 'utils/numbers'
 
 import { ODPs } from 'meta/assessment'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
+import DiffText from 'client/components/DiffText'
 
+import { useNaturalForestPercentAndAreaTotalsChange } from './hooks/useNaturalForestPercentAndAreaTotalsChange'
 import ForestCharacteristicsNaturallyRegeneratingRow from './ForestCharacteristicsNaturallyRegeneratingRow'
 import PrimaryForestPercent from './PrimaryForestPercent'
 
@@ -21,6 +24,27 @@ const ForestCharacteristicsNaturallyRegenerating: React.FC<Props> = (props) => {
 
   const nationalClasses = originalDataPoint?.nationalClasses.filter((nationalClass) => !nationalClass.placeHolder)
 
+  const totalForestNaturalPercentArea =
+    originalDataPoint &&
+    Numbers.format(
+      ODPs.calcTotalSubFieldArea({
+        originalDataPoint,
+        field: 'forestPercent',
+        subField: 'forestNaturalPercent',
+      })
+    )
+
+  const totalPrimaryForestNaturalPercentArea =
+    originalDataPoint?.values.primaryForest &&
+    Numbers.format(Numbers.toBigNumber(originalDataPoint.values.primaryForest))
+
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  const totalsChange = useNaturalForestPercentAndAreaTotalsChange({
+    totalForestNaturalPercentArea,
+    totalPrimaryForestNaturalPercentArea,
+  })
+
   return (
     <div className="fra-table__container">
       <div className="fra-table__scroll-wrapper">
@@ -50,18 +74,18 @@ const ForestCharacteristicsNaturallyRegenerating: React.FC<Props> = (props) => {
             <tr>
               <th className="fra-table__header-cell-left">{t('nationalDataPoint.total')}</th>
               <th className="fra-table__calculated-cell fra-table__divider">
-                {originalDataPoint &&
-                  Numbers.format(
-                    ODPs.calcTotalSubFieldArea({
-                      originalDataPoint,
-                      field: 'forestPercent',
-                      subField: 'forestNaturalPercent',
-                    })
-                  )}
+                {historyLastApprovedIsActive ? (
+                  <DiffText changes={totalsChange?.forestNaturalPercentArea} />
+                ) : (
+                  totalForestNaturalPercentArea
+                )}
               </th>
               <td className="fra-table__calculated-cell">
-                {originalDataPoint?.values.primaryForest &&
-                  Numbers.format(Numbers.toBigNumber(originalDataPoint.values.primaryForest))}
+                {historyLastApprovedIsActive ? (
+                  <DiffText changes={totalsChange?.primaryForestNaturalPercentArea} />
+                ) : (
+                  totalPrimaryForestNaturalPercentArea
+                )}
               </td>
             </tr>
           </tfoot>
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegeneratingRow.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegeneratingRow.tsx
index 809d566ba6..454be39a33 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegeneratingRow.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegeneratingRow.tsx
@@ -16,6 +16,7 @@ import ReviewIndicator from 'client/components/ReviewIndicator'
 import { Columns, useOnPaste } from 'client/pages/OriginalDataPoint/components/hooks/useOnPaste'
 import { useUpdateOriginalData } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalData'
 import { useUpdateOriginalDataField } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalDataField'
+import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 import { useNationalClassValidations } from 'client/pages/OriginalDataPoint/hooks/useNationalClassValidations'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
@@ -75,7 +76,13 @@ const ForestCharacteristicsNaturallyRegeneratingRow: React.FC<Props> = (props) =
 
   return (
     <tr className={classNameRowComments}>
-      <th className="fra-table__category-cell">{name}</th>
+      <th className="fra-table__category-cell">
+        {historyLastApprovedIsActive ? (
+          <ODPDiffText originalDataPoint={originalDataPoint} path={['nationalClasses', index, 'name']} />
+        ) : (
+          name
+        )}
+      </th>
       <th className="fra-table__calculated-sub-cell fra-table__divider">
         {historyLastApprovedIsActive ? (
           <DiffText changes={changes?.naturalForestPercentArea} />
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/PrimaryForestPercent.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/PrimaryForestPercent.tsx
index 0eb591e87e..359f350f13 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/PrimaryForestPercent.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/PrimaryForestPercent.tsx
@@ -4,9 +4,12 @@ import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import { Numbers } from 'utils/numbers'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
+import DiffText from 'client/components/DiffText'
 import PercentInput from 'client/components/PercentInput'
 
+import { usePrimaryForestPercentChange } from './hooks/usePrimaryForestPercentChange'
 import { useShouldUseTotal } from './hooks/useShouldUseTotal'
 import { useUpdateValues } from './hooks/useUpdateValues'
 
@@ -23,31 +26,50 @@ const PrimaryForestPercent: React.FC<Props> = (props) => {
 
   const field = 'primaryForestPercent'
 
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  const primaryForestPercentChange = usePrimaryForestPercentChange({
+    primaryForestPercent: originalDataPoint?.values?.primaryForestPercent,
+  })
+
   return (
     <tr>
       <th className="fra-table__header-cell-left fra-table__divider" colSpan={2}>
         {t('common.totalPercentage')}
       </th>
-      {useTotal ? (
-        <td className={classNames('fra-table__cell', {})}>
-          <PercentInput
-            disabled={!canEditData}
-            numberValue={originalDataPoint.values.primaryForestPercent}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              const { value } = event.target
-              const updateProps = { field, value }
-              updateValues(updateProps)
-            }}
-            onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
-              const value = event.clipboardData.getData('text')
-              const updateProps = { field, value }
-              updateValues(updateProps)
-            }}
-          />
-        </td>
-      ) : (
-        <td className="fra-table__calculated-cell">{Numbers.toFixed(originalDataPoint.values[field], 3)} %</td>
-      )}
+      <td
+        className={classNames({
+          'fra-table__calculated-cell': !useTotal && !historyLastApprovedIsActive,
+          'fra-table__cell': useTotal || historyLastApprovedIsActive,
+        })}
+      >
+        {historyLastApprovedIsActive ? (
+          <div className="odp-percent-diff">
+            <DiffText changes={primaryForestPercentChange} />
+            <span>%</span>
+          </div>
+        ) : (
+          <>
+            {useTotal && (
+              <PercentInput
+                disabled={!canEditData}
+                numberValue={originalDataPoint.values.primaryForestPercent}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  const { value } = event.target
+                  const updateProps = { field, value }
+                  updateValues(updateProps)
+                }}
+                onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
+                  const value = event.clipboardData.getData('text')
+                  const updateProps = { field, value }
+                  updateValues(updateProps)
+                }}
+              />
+            )}
+            {!useTotal && <>{Numbers.toFixed(originalDataPoint.values[field], 3)} %</>}
+          </>
+        )}
+      </td>
     </tr>
   )
 }
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/hooks/usePrimaryForestPercentChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/hooks/usePrimaryForestPercentChange.ts
new file mode 100644
index 0000000000..cc6b99645d
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/hooks/usePrimaryForestPercentChange.ts
@@ -0,0 +1,32 @@
+import { useMemo } from 'react'
+
+import * as Diff from 'diff'
+import { Change } from 'diff'
+import { Numbers } from 'utils/numbers'
+
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+
+type Props = {
+  primaryForestPercent?: string
+}
+
+type Returned = Array<Change>
+
+export const usePrimaryForestPercentChange = (props: Props): Returned => {
+  const { primaryForestPercent: primaryForestPercentCurrent } = props
+
+  const originalDataPointHistory = useLastApprovedOriginalDataPoint()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  return useMemo<Returned>(() => {
+    if (!historyLastApprovedIsActive) return undefined
+
+    const formattedPrimaryForestTotalPercentPrev = Numbers.toFixed(
+      originalDataPointHistory?.values?.primaryForestPercent ?? '',
+      3
+    )
+    const formattedPrimaryForestPercentCurrent = Numbers.toFixed(primaryForestPercentCurrent ?? '', 3)
+    return Diff.diffChars(formattedPrimaryForestTotalPercentPrev ?? '', formattedPrimaryForestPercentCurrent ?? '')
+  }, [historyLastApprovedIsActive, originalDataPointHistory, primaryForestPercentCurrent])
+}
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts
new file mode 100644
index 0000000000..e8e29032cd
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts
@@ -0,0 +1,72 @@
+import { useMemo } from 'react'
+
+import * as Diff from 'diff'
+import { Change } from 'diff'
+import { Numbers } from 'utils/numbers'
+import { Objects } from 'utils/objects'
+
+import { ODPs } from 'meta/assessment'
+
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+
+type Props = {
+  totalForestNaturalPercentArea: string | null
+  totalPrimaryForestNaturalPercentArea: string | null
+}
+
+type Returned = {
+  forestNaturalPercentArea: Array<Change>
+  primaryForestNaturalPercentArea: Array<Change>
+}
+
+export const useNaturalForestPercentAndAreaTotalsChange = (props: Props): Returned => {
+  const {
+    totalForestNaturalPercentArea: totalForestNaturalPercentAreaCurrent,
+    totalPrimaryForestNaturalPercentArea: totalPrimaryForestNaturalPercentAreaCurrent,
+  } = props
+
+  const originalDataPointHistory = useLastApprovedOriginalDataPoint()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  return useMemo<Returned>(() => {
+    if (!historyLastApprovedIsActive) return undefined
+
+    const canCalculate = !Objects.isEmpty(originalDataPointHistory)
+
+    const totalForestNaturalPercentAreaPrev = canCalculate
+      ? Numbers.format(
+          ODPs.calcTotalSubFieldArea({
+            originalDataPoint: originalDataPointHistory,
+            field: 'forestPercent',
+            subField: 'forestNaturalPercent',
+          })
+        )
+      : null
+
+    const forestNaturalPercentArea = Diff.diffChars(
+      totalForestNaturalPercentAreaPrev ?? '',
+      totalForestNaturalPercentAreaCurrent ?? ''
+    )
+
+    const totalPrimaryForestNaturalPercentAreaPrev =
+      canCalculate && originalDataPointHistory.values.primaryForest
+        ? Numbers.format(Numbers.toBigNumber(originalDataPointHistory.values.primaryForest))
+        : null
+
+    const primaryForestNaturalPercentArea = Diff.diffChars(
+      totalPrimaryForestNaturalPercentAreaPrev ?? '',
+      totalPrimaryForestNaturalPercentAreaCurrent ?? ''
+    )
+
+    return {
+      forestNaturalPercentArea,
+      primaryForestNaturalPercentArea,
+    }
+  }, [
+    historyLastApprovedIsActive,
+    originalDataPointHistory,
+    totalForestNaturalPercentAreaCurrent,
+    totalPrimaryForestNaturalPercentAreaCurrent,
+  ])
+}

From 186128dfdd44b69c5684db831eadb6a15a0afe02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Sorja?= <ping@mirosorja.com>
Date: Tue, 11 Feb 2025 13:58:09 +0200
Subject: [PATCH 28/38] 4342 - Data History: UI Diffs render logic (#4357)

* 4310 - add historyFetched hooks

* 4310 - Cell: show history after fetch

* 4310 - Descriptions: show history after fetch

* 4310 - Data Sources: show history after fetch
---
 .../Section/DataTable/Table/RowData/Cell/Cell.tsx   | 13 ++++++++++---
 .../CommentableDescription.tsx                      | 11 +++++++++--
 .../DataSources/DataSources.tsx                     | 10 ++++++++--
 .../hooks/useLastApprovedHistoryDescriptions.ts     | 12 ++++++++++++
 .../data/hooks/useLastApprovedHistoryTableData.ts   | 11 +++++++++++
 .../data/hooks/useLastApprovedOriginalDataPoint.ts  | 12 ++++++++++++
 src/client/store/data/index.ts                      |  3 +++
 7 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx b/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
index b04dee6137..fa3b941c71 100644
--- a/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
+++ b/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
@@ -6,7 +6,11 @@ import { RecordAssessmentData } from 'meta/data'
 import { TooltipId } from 'meta/tooltip'
 
 import { useCycle } from 'client/store/assessment'
-import { useHistoryLastApprovedIsActive, useNodeValueValidation } from 'client/store/data'
+import {
+  useHistoryLastApprovedDataTableFetched,
+  useHistoryLastApprovedIsActive,
+  useNodeValueValidation,
+} from 'client/store/data'
 import { DataCell } from 'client/components/DataGrid'
 
 import { useClassName } from './hooks/useClassName'
@@ -78,9 +82,12 @@ const Cell: React.FC<Props> = (props) => {
   const errorMessages = useErrorMessages({ validation })
   const className = useClassName({ col, cycle, row, validation })
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
   const disabled = disabledProps || !!nodeValue?.odpId || Cols.hasLinkedNodes({ col, cycle })
-  const displayHistory = historyLastApprovedIsActive && !Cols.isPlaceholder(col)
+
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const historyLastApprovedDataTableFetched = useHistoryLastApprovedDataTableFetched()
+  const displayHistory = historyLastApprovedIsActive && historyLastApprovedDataTableFetched && !Cols.isPlaceholder(col)
+
   const Component = displayHistory ? History : Components[col.props.colType]
   const { gridColumn, gridRow, ...style } = Cols.getStyle({ col, cycle })
   const isInput = ![ColType.calculated, ColType.placeholder].includes(col.props.colType)
diff --git a/src/client/pages/Section/Descriptions/CommentableDescription/CommentableDescription.tsx b/src/client/pages/Section/Descriptions/CommentableDescription/CommentableDescription.tsx
index 9629b83c13..7f8ffa3d2b 100644
--- a/src/client/pages/Section/Descriptions/CommentableDescription/CommentableDescription.tsx
+++ b/src/client/pages/Section/Descriptions/CommentableDescription/CommentableDescription.tsx
@@ -3,7 +3,11 @@ import React from 'react'
 
 import { CommentableDescriptionName, CommentableDescriptionValue } from 'meta/assessment'
 
-import { useCommentableDescriptionValue, useHistoryLastApprovedIsActive } from 'client/store/data'
+import {
+  useCommentableDescriptionValue,
+  useHistoryLastApprovedDescriptionFetched,
+  useHistoryLastApprovedIsActive,
+} from 'client/store/data'
 import { useCanEditDescription, useIsDescriptionEditable } from 'client/store/user/hooks'
 import { DataCell, DataGrid, DataRow } from 'client/components/DataGrid'
 import EditorWYSIWYG from 'client/components/EditorWYSIWYG'
@@ -28,7 +32,10 @@ const CommentableDescription: React.FC<Props> = (props) => {
   const { sectionName } = useSectionContext()
   const value = useCommentableDescriptionValue({ name, sectionName, template })
   const { empty } = useDescriptionErrorState({ name, sectionName })
+
   const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const historyLastApprovedDescriptionFetched = useHistoryLastApprovedDescriptionFetched()
+  const displayHistory = historyLastApprovedIsActive && historyLastApprovedDescriptionFetched
 
   const canEdit = useCanEditDescription({ sectionName })
   const editable = useIsDescriptionEditable({ sectionName, name })
@@ -47,7 +54,7 @@ const CommentableDescription: React.FC<Props> = (props) => {
           lastRow
           noBorder={!editable}
         >
-          {historyLastApprovedIsActive ? (
+          {displayHistory ? (
             <DescriptionDiffView name={name} />
           ) : (
             <EditorWYSIWYG
diff --git a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/DataSources.tsx b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/DataSources.tsx
index 7175f391a7..5cd6750e2a 100644
--- a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/DataSources.tsx
+++ b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/DataSources.tsx
@@ -7,6 +7,7 @@ import { Objects } from 'utils/objects'
 import { CommentableDescriptionName } from 'meta/assessment'
 import { NationalDataDescription } from 'meta/assessment/description'
 
+import { useHistoryLastApprovedDescriptionFetched } from 'client/store/data'
 import { useCanEditDescription, useIsDescriptionEditable } from 'client/store/user/hooks'
 import { useCycleRouteParams } from 'client/hooks/useRouteParams'
 import { DataCell, DataGrid } from 'client/components/DataGrid'
@@ -39,9 +40,14 @@ export const DataSources: React.FC<Props> = (props: Props) => {
   const { dataSourcesLinked } = useGetDataSourcesLinked({ nationalData, sectionName })
 
   const historyLastApprovedCompares = useDataSourcesHistoryLastApproved({ dataSources })
+  const historyLastApprovedDescriptionFetched = useHistoryLastApprovedDescriptionFetched()
+
   const historyActivityCompares = useDataSourcesHistoryActivities({ dataSources })
   const historyCompares = historyLastApprovedCompares ?? historyActivityCompares
 
+  const displayHistory =
+    (historyLastApprovedCompares && historyLastApprovedDescriptionFetched) ?? historyActivityCompares
+
   const canEdit = useCanEditDescription({ sectionName })
   const editable = useIsDescriptionEditable({ sectionName, name })
   const { empty } = useDescriptionErrorState({ name, sectionName })
@@ -85,7 +91,7 @@ export const DataSources: React.FC<Props> = (props: Props) => {
                 </React.Fragment>
               ))}
 
-            {historyCompares &&
+            {displayHistory &&
               historyCompares.map((historyCompare, i) => (
                 <HistoryCompare
                   key={`${String(i)}-${historyCompare.dataItem?.uuid ?? historyCompare.historyItem?.uuid}`}
@@ -95,7 +101,7 @@ export const DataSources: React.FC<Props> = (props: Props) => {
                 />
               ))}
 
-            {!historyCompares &&
+            {!displayHistory &&
               dataSources.map((dataSourceValue, i) => {
                 return (
                   <DataSourceRow
diff --git a/src/client/store/data/hooks/useLastApprovedHistoryDescriptions.ts b/src/client/store/data/hooks/useLastApprovedHistoryDescriptions.ts
index 0b05acf27c..d3db880cff 100644
--- a/src/client/store/data/hooks/useLastApprovedHistoryDescriptions.ts
+++ b/src/client/store/data/hooks/useLastApprovedHistoryDescriptions.ts
@@ -1,3 +1,7 @@
+import { useMemo } from 'react'
+
+import { Objects } from 'utils/objects'
+
 import { CountryIso } from 'meta/area'
 import { CommentableDescriptionName, CommentableDescriptionValue } from 'meta/assessment'
 
@@ -20,3 +24,11 @@ export const useLastApprovedHistoryDescriptions = (): Record<
     })
   )
 }
+
+export const useHistoryLastApprovedDescriptionFetched = (): boolean => {
+  const data = useLastApprovedHistoryDescriptions()
+
+  return useMemo<boolean>(() => {
+    return !Objects.isNil(data)
+  }, [data])
+}
diff --git a/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts b/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts
index a214cbe72b..7b47aa5458 100644
--- a/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts
+++ b/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts
@@ -1,5 +1,7 @@
 import { useMemo } from 'react'
 
+import { Objects } from 'utils/objects'
+
 import { CountryIso } from 'meta/area'
 import { AssessmentName, ColName, CycleName, NodeValue, TableName, VariableName } from 'meta/assessment'
 import { RecordAssessmentData, RecordAssessmentDatas } from 'meta/data'
@@ -15,6 +17,7 @@ type PropsNodeValue = {
   colName: ColName
   variableName: VariableName
 }
+
 export const useLastApprovedHistoryTableData = (): RecordAssessmentData => {
   return useAppSelector((state) => DataSelector.History.getLastApprovedTableData(state))
 }
@@ -28,3 +31,11 @@ export const useLastApprovedHistoryNodeValue = (props: PropsNodeValue): NodeValu
     return RecordAssessmentDatas.getNodeValue(nodeValueProps) ?? ({} as NodeValue)
   }, [assessmentName, colName, countryIso, cycleName, data, tableName, variableName])
 }
+
+export const useHistoryLastApprovedDataTableFetched = (): boolean => {
+  const data = useLastApprovedHistoryTableData()
+
+  return useMemo<boolean>(() => {
+    return !Objects.isNil(data)
+  }, [data])
+}
diff --git a/src/client/store/data/hooks/useLastApprovedOriginalDataPoint.ts b/src/client/store/data/hooks/useLastApprovedOriginalDataPoint.ts
index 0fc879a98d..099bba5a53 100644
--- a/src/client/store/data/hooks/useLastApprovedOriginalDataPoint.ts
+++ b/src/client/store/data/hooks/useLastApprovedOriginalDataPoint.ts
@@ -1,3 +1,7 @@
+import { useMemo } from 'react'
+
+import { Objects } from 'utils/objects'
+
 import { OriginalDataPoint } from 'meta/assessment'
 
 import { useAppSelector } from 'client/store'
@@ -16,3 +20,11 @@ export const useLastApprovedOriginalDataPoint = (): OriginalDataPoint => {
     })
   )
 }
+
+export const useHistoryLastApprovedODPFetched = (): boolean => {
+  const data = useLastApprovedOriginalDataPoint()
+
+  return useMemo<boolean>(() => {
+    return !Objects.isNil(data)
+  }, [data])
+}
diff --git a/src/client/store/data/index.ts b/src/client/store/data/index.ts
index 9e48d4134b..06520950f8 100644
--- a/src/client/store/data/index.ts
+++ b/src/client/store/data/index.ts
@@ -11,6 +11,9 @@ export { useIsOdpTableDataFetched } from './hooks/useIsOdpTableDataFetched'
 export { useIsSectionDataEmpty } from './hooks/useIsSectionDataEmpty'
 export { useIsSomeTableDataFetching } from './hooks/useIsSomeTableDataFetching'
 export { useLastApprovedHistoryDescriptions } from './hooks/useLastApprovedHistoryDescriptions'
+export { useHistoryLastApprovedDescriptionFetched } from './hooks/useLastApprovedHistoryDescriptions'
+export { useHistoryLastApprovedDataTableFetched } from './hooks/useLastApprovedHistoryTableData'
+export { useHistoryLastApprovedODPFetched } from './hooks/useLastApprovedOriginalDataPoint'
 export { useNodeValuesEstimation } from './hooks/useNodeValuesEstimation'
 export { useNodeValueValidation, useTableHasErrors } from './hooks/useNodeValueValidations'
 export { useOdpLastUpdatedTimestamp } from './hooks/useOdpLastUpdatedTimestamp'

From d70b1a3f5b3cd7dc04cae9c80dd0a5b878894fed Mon Sep 17 00:00:00 2001
From: Mino Togna <minotogna@users.noreply.github.com>
Date: Tue, 11 Feb 2025 16:36:20 +0100
Subject: [PATCH 29/38] 4306 - 4311 - Data History: ODP Prev Cycle +
 LastAccepted (#4360)

* 4306 - 4311 - Data History: ODP Prev Cycle + LastAccepted

Co-authored-by: sorja <miro.sorja@gmail.com>

* 4306 - 4311 - fix test

* 4306 - 4311 - fix odp logic

---------

Co-authored-by: sorja <miro.sorja@gmail.com>
---
 .../hooks/useOtherLandPercentChange.ts        |  2 +-
 .../ExtentOfForest/hooks/useTotalsChange.ts   |  8 +--
 .../hooks/usePrimaryForestPercentChange.ts    |  2 +-
 .../useForestCharacteristicsTotalsChange.ts   |  8 +--
 .../hooks/useNationalClassForestAreaChange.ts |  2 +-
 .../useNaturalForestPercentAndAreaChange.ts   |  4 +-
 ...NaturalForestPercentAndAreaTotalsChange.ts |  4 +-
 .../hooks/useFieldChanges.ts                  |  8 ++-
 .../api/cycleData/originalDataPoint/getOdp.ts |  4 +-
 .../getOriginalDataPointHistory.ts            | 29 ++++-----
 src/server/controller/cycleData/index.ts      |  5 +-
 .../getOriginalDataPointLastApproved.ts       | 28 +++++++++
 .../originalDataPoint/getLastAccepted.ts      | 62 +++++++++++++++++++
 .../originalDataPoint/getOne.ts               | 14 +++--
 .../originalDataPoint/index.ts                |  2 +
 .../assessment/originalDataPoint.ts           |  2 +-
 16 files changed, 143 insertions(+), 41 deletions(-)
 create mode 100644 src/server/controller/cycleData/originalDataPoint/getOriginalDataPointLastApproved.ts
 create mode 100644 src/server/repository/assessmentCycle/originalDataPoint/getLastAccepted.ts

diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts
index 4c75524df6..2cc4b8009b 100644
--- a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts
@@ -30,6 +30,6 @@ export const useOtherLandPercentChange = (props: Props): Returned => {
 
     const otherLandPercentPrev = canCalculate ? ODPs.calculateNationalClassOtherLandPercent(nationalClass) : null
 
-    return Diff.diffChars(otherLandPercentPrev ?? '', otherLandPercentCurrent ?? '')
+    return Diff.diffLines(otherLandPercentPrev ?? '', otherLandPercentCurrent ?? '')
   }, [historyLastApprovedIsActive, nationalClass, otherLandPercentCurrent])
 }
diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts
index 756337b460..f3d096ef29 100644
--- a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts
@@ -42,24 +42,24 @@ export const useTotalsChange = (props: Props): Returned => {
     const totalAreaPrev = canCalculate
       ? Numbers.format(ODPs.calcTotalArea({ originalDataPoint: originalDataPointHistory }))
       : ''
-    const totalArea = Diff.diffChars(totalAreaPrev ?? '', totalAreaCurrent ?? '')
+    const totalArea = Diff.diffLines(totalAreaPrev ?? '', totalAreaCurrent ?? '')
 
     const totalForestPercentAreaPrev = canCalculate
       ? Numbers.format(ODPs.calcTotalFieldArea({ originalDataPoint: originalDataPointHistory, field: 'forestPercent' }))
       : ''
-    const totalForestPercentArea = Diff.diffChars(totalForestPercentAreaPrev ?? '', totalForestPercentAreaCurrent ?? '')
+    const totalForestPercentArea = Diff.diffLines(totalForestPercentAreaPrev ?? '', totalForestPercentAreaCurrent ?? '')
 
     const totalLandAreaPrev = canCalculate
       ? Numbers.format(ODPs.calcTotalLandArea({ originalDataPoint: originalDataPointHistory }))
       : ''
-    const totalLandArea = Diff.diffChars(totalLandAreaPrev ?? '', totalLandAreaCurrent ?? '')
+    const totalLandArea = Diff.diffLines(totalLandAreaPrev ?? '', totalLandAreaCurrent ?? '')
 
     const totalOtherWoodedLandPercentAreaPrev = canCalculate
       ? Numbers.format(
           ODPs.calcTotalFieldArea({ originalDataPoint: originalDataPointHistory, field: 'otherWoodedLandPercent' })
         )
       : ''
-    const totalOtherWoodedLandPercentArea = Diff.diffChars(
+    const totalOtherWoodedLandPercentArea = Diff.diffLines(
       totalOtherWoodedLandPercentAreaPrev ?? '',
       totalOtherWoodedLandPercentAreaCurrent ?? ''
     )
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/hooks/usePrimaryForestPercentChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/hooks/usePrimaryForestPercentChange.ts
index cc6b99645d..dac4926979 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/hooks/usePrimaryForestPercentChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/hooks/usePrimaryForestPercentChange.ts
@@ -27,6 +27,6 @@ export const usePrimaryForestPercentChange = (props: Props): Returned => {
       3
     )
     const formattedPrimaryForestPercentCurrent = Numbers.toFixed(primaryForestPercentCurrent ?? '', 3)
-    return Diff.diffChars(formattedPrimaryForestTotalPercentPrev ?? '', formattedPrimaryForestPercentCurrent ?? '')
+    return Diff.diffLines(formattedPrimaryForestTotalPercentPrev ?? '', formattedPrimaryForestPercentCurrent ?? '')
   }, [historyLastApprovedIsActive, originalDataPointHistory, primaryForestPercentCurrent])
 }
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useForestCharacteristicsTotalsChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useForestCharacteristicsTotalsChange.ts
index 45ede806e9..082860ecf8 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useForestCharacteristicsTotalsChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useForestCharacteristicsTotalsChange.ts
@@ -42,7 +42,7 @@ export const useForestCharacteristicsTotalsChange = (props: Props): Returned =>
     const totalForestPercentAreaPrev = canCalculate
       ? Numbers.format(ODPs.calcTotalFieldArea({ originalDataPoint: originalDataPointHistory, field: 'forestPercent' }))
       : ''
-    const totalForestPercentArea = Diff.diffChars(totalForestPercentAreaPrev ?? '', totalForestPercentAreaCurrent ?? '')
+    const totalForestPercentArea = Diff.diffLines(totalForestPercentAreaPrev ?? '', totalForestPercentAreaCurrent ?? '')
 
     const totalForestNaturalPercentAreaPrev = canCalculate
       ? Numbers.format(
@@ -53,7 +53,7 @@ export const useForestCharacteristicsTotalsChange = (props: Props): Returned =>
           })
         )
       : ''
-    const totalForestNaturalPercentArea = Diff.diffChars(
+    const totalForestNaturalPercentArea = Diff.diffLines(
       totalForestNaturalPercentAreaPrev ?? '',
       totalForestNaturalPercentAreaCurrent ?? ''
     )
@@ -67,7 +67,7 @@ export const useForestCharacteristicsTotalsChange = (props: Props): Returned =>
           })
         )
       : ''
-    const totalForestPlantationPercentArea = Diff.diffChars(
+    const totalForestPlantationPercentArea = Diff.diffLines(
       totalForestPlantationPercentAreaPrev ?? '',
       totalForestPlantationPercentAreaCurrent ?? ''
     )
@@ -81,7 +81,7 @@ export const useForestCharacteristicsTotalsChange = (props: Props): Returned =>
           })
         )
       : ''
-    const totalOtherPlantedForestPercentArea = Diff.diffChars(
+    const totalOtherPlantedForestPercentArea = Diff.diffLines(
       totalOtherPlantedForestPercentAreaPrev ?? '',
       totalOtherPlantedForestPercentAreaCurrent ?? ''
     )
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNationalClassForestAreaChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNationalClassForestAreaChange.ts
index b8c066f496..0f092cd0ef 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNationalClassForestAreaChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNationalClassForestAreaChange.ts
@@ -30,7 +30,7 @@ export const useNationalClassForestAreaChange = (props: Props): Returned => {
 
     const nationalClassForestAreaPrev = canCalculate ? ODPs.calculateNationalClassForestArea(nationalClass) : null
 
-    return Diff.diffChars(
+    return Diff.diffLines(
       nationalClassForestAreaPrev?.toString() ?? '',
       nationalClassForestAreaCurrent?.toString() ?? ''
     )
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaChange.ts
index 6f77acbdd2..1664d4d45f 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaChange.ts
@@ -45,7 +45,7 @@ export const useNaturalForestPercentAndAreaChange = (props: Props): Returned =>
     const formattedAreaPrev = Numbers.format(naturalForestPercentAreaPrev ?? '')
     const formattedAreaCurrent = Numbers.format(naturalForestPercentAreaCurrent ?? '')
 
-    const naturalForestPercentArea = Diff.diffChars(formattedAreaPrev ?? '', formattedAreaCurrent ?? '')
+    const naturalForestPercentArea = Diff.diffLines(formattedAreaPrev ?? '', formattedAreaCurrent ?? '')
 
     // forestNaturalForestOfWhichPrimaryForestPercent change
     const isZeroOrNullPrimaryForestPrev =
@@ -65,7 +65,7 @@ export const useNaturalForestPercentAndAreaChange = (props: Props): Returned =>
       : forestNaturalForestOfWhichPrimaryForestPercentCurrent
     const formattedNaturalForestPercentCurrent = Numbers.format(naturalForestPercentCurrent ?? '', 3)
 
-    const naturalForestPercent = Diff.diffChars(
+    const naturalForestPercent = Diff.diffLines(
       formattedNaturalForestPercentPrev ?? '',
       formattedNaturalForestPercentCurrent ?? ''
     )
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts
index e8e29032cd..b5ee027761 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts
@@ -44,7 +44,7 @@ export const useNaturalForestPercentAndAreaTotalsChange = (props: Props): Return
         )
       : null
 
-    const forestNaturalPercentArea = Diff.diffChars(
+    const forestNaturalPercentArea = Diff.diffLines(
       totalForestNaturalPercentAreaPrev ?? '',
       totalForestNaturalPercentAreaCurrent ?? ''
     )
@@ -54,7 +54,7 @@ export const useNaturalForestPercentAndAreaTotalsChange = (props: Props): Return
         ? Numbers.format(Numbers.toBigNumber(originalDataPointHistory.values.primaryForest))
         : null
 
-    const primaryForestNaturalPercentArea = Diff.diffChars(
+    const primaryForestNaturalPercentArea = Diff.diffLines(
       totalPrimaryForestNaturalPercentAreaPrev ?? '',
       totalPrimaryForestNaturalPercentAreaCurrent ?? ''
     )
diff --git a/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts b/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
index 1a40a0604d..d7bb8b29f0 100644
--- a/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
+++ b/src/client/pages/OriginalDataPoint/hooks/useFieldChanges.ts
@@ -14,6 +14,7 @@ type Returned = Array<Change>
 
 type FormatFn = (value: string | null) => string
 
+const pathsDiffWords = ['dataSourceReferences', 'dataSourceAdditionalComments', 'description']
 const _formatDecimalFieldFn: FormatFn = (v) => (!Objects.isEmpty(v) ? Numbers.format(v, 2) : '')
 const _formatPercentFieldFn: FormatFn = (v) => (!Objects.isEmpty(v) ? Numbers.format(v, 3) : '')
 
@@ -53,8 +54,9 @@ export const useFieldChanges = (props: ODPDiffTextProps): Returned => {
       textCurrent = formatFn(textCurrent)
     }
 
-    return Diff.diffChars(textPrev, textCurrent, {
-      ignoreCase: false,
-    })
+    if (pathsDiffWords.some((p) => path.includes(p))) {
+      return Diff.diffWords(textPrev, textCurrent, { ignoreCase: false })
+    }
+    return Diff.diffLines(textPrev, textCurrent, { ignoreCase: false })
   }, [format, originalDataPoint, originalDataPointHistory, path, t])
 }
diff --git a/src/server/api/cycleData/originalDataPoint/getOdp.ts b/src/server/api/cycleData/originalDataPoint/getOdp.ts
index a63fc7c106..00128dd8d9 100644
--- a/src/server/api/cycleData/originalDataPoint/getOdp.ts
+++ b/src/server/api/cycleData/originalDataPoint/getOdp.ts
@@ -1,12 +1,12 @@
 import { Response } from 'express'
 
-import { CycleRequest } from 'meta/api/request'
+import { CycleDataRequest } from 'meta/api/request'
 
 import { AssessmentController } from 'server/controller/assessment'
 import { CycleDataController } from 'server/controller/cycleData'
 import { Requests } from 'server/utils'
 
-export const getOriginalDataPoint = async (req: CycleRequest, res: Response) => {
+export const getOriginalDataPoint = async (req: CycleDataRequest<{ year: string }>, res: Response) => {
   try {
     const { assessmentName, cycleName, year, countryIso } = req.query
 
diff --git a/src/server/api/cycleData/originalDataPoint/getOriginalDataPointHistory.ts b/src/server/api/cycleData/originalDataPoint/getOriginalDataPointHistory.ts
index dbefbcb680..a33eabf32f 100644
--- a/src/server/api/cycleData/originalDataPoint/getOriginalDataPointHistory.ts
+++ b/src/server/api/cycleData/originalDataPoint/getOriginalDataPointHistory.ts
@@ -1,25 +1,26 @@
 import { Response } from 'express'
+import { Objects } from 'utils/objects'
 
 import { CycleDataRequest } from 'meta/api/request'
 
+import { AssessmentController } from 'server/controller/assessment'
+import { CycleDataController } from 'server/controller/cycleData'
 import { Requests } from 'server/utils'
 
-export const getOriginalDataPointHistory = async (_req: CycleDataRequest, res: Response) => {
+export const getOriginalDataPointHistory = async (req: CycleDataRequest<{ year: string }>, res: Response) => {
   try {
-    // TODO: Add suport for non-empty last cycle odps
-    const odpHistory = {
-      // Example of the object:
-      // countryIso: 'FIN',
-      // year: '1990',
-      // dataSourceAdditionalComments: '',
-      // dataSourceMethods: [],
-      // dataSourceReferences: '',
-      // description: '',
-      // nationalClasses: [],
-      // values: {},
-    }
+    const { countryIso, assessmentName, cycleName, year } = req.query
+
+    const { assessment, cycle } = await AssessmentController.getOneWithCycle({ assessmentName, cycleName })
+    const info = await CycleDataController.History.LastApproved.getInfo({ assessment, cycle, countryIso })
 
-    Requests.send(res, odpHistory)
+    if (Objects.isNil(info)) {
+      Requests.send(res, {})
+    } else {
+      const _props = { assessment, cycle, countryIso, info, year }
+      const odpLastApproved = await CycleDataController.getOriginalDataPointLastApproved(_props)
+      Requests.send(res, odpLastApproved)
+    }
   } catch (e) {
     Requests.sendErr(res, e)
   }
diff --git a/src/server/controller/cycleData/index.ts b/src/server/controller/cycleData/index.ts
index b67947a005..030f95b4e8 100644
--- a/src/server/controller/cycleData/index.ts
+++ b/src/server/controller/cycleData/index.ts
@@ -11,6 +11,7 @@ import { OriginalDataPointRepository } from 'server/repository/assessmentCycle/o
 
 import { copyOriginalDataPointNationalClasses } from './originalDataPoint/copyOriginalDataPointNationalClasses'
 import { createOriginalDataPoint } from './originalDataPoint/createOriginalDataPoint'
+import { getOriginalDataPointLastApproved } from './originalDataPoint/getOriginalDataPointLastApproved'
 import { removeOriginalDataPoint } from './originalDataPoint/removeOriginalDataPoint'
 import { updateOriginalDataPointDataSources } from './originalDataPoint/updateOriginalDataPointDataSources'
 import { updateOriginalDataPointDescription } from './originalDataPoint/updateOriginalDataPointDescription'
@@ -41,9 +42,11 @@ export const CycleDataController = {
   // ===== original data point
   createOriginalDataPoint,
   getOriginalDataPoint: OriginalDataPointRepository.getOne,
-  getOriginalDataPoints: OriginalDataPointRepository.getMany,
+  getOriginalDataPointLastApproved,
   getOriginalDataPointReservedYears: OriginalDataPointRepository.getReservedYears,
+  getOriginalDataPoints: OriginalDataPointRepository.getMany,
   removeOriginalDataPoint,
+
   // data
   getCountrySummary: CountrySummaryRepository.getOneOrNone,
   updateOriginalDataPointOriginalData,
diff --git a/src/server/controller/cycleData/originalDataPoint/getOriginalDataPointLastApproved.ts b/src/server/controller/cycleData/originalDataPoint/getOriginalDataPointLastApproved.ts
new file mode 100644
index 0000000000..5d2402a36c
--- /dev/null
+++ b/src/server/controller/cycleData/originalDataPoint/getOriginalDataPointLastApproved.ts
@@ -0,0 +1,28 @@
+import { Objects } from 'utils/objects'
+
+import { CountryIso } from 'meta/area'
+import { Assessment, Cycle, OriginalDataPoint } from 'meta/assessment'
+import { HistoryLastApprovedInfo } from 'meta/cycleData/historyLastApproved'
+
+import { OriginalDataPointRepository } from 'server/repository/assessmentCycle/originalDataPoint'
+
+type Props = {
+  assessment: Assessment
+  cycle: Cycle
+  countryIso: CountryIso
+  info: HistoryLastApprovedInfo
+  year: string
+}
+
+export const getOriginalDataPointLastApproved = async (props: Props): Promise<OriginalDataPoint | undefined> => {
+  const { assessment, countryIso, cycle, info, year } = props
+
+  let odp: OriginalDataPoint
+  if (!Objects.isNil(info.lastAccepted)) {
+    odp = await OriginalDataPointRepository.getLastAccepted({ assessment, cycle, countryIso, year })
+  }
+  if (!Objects.isNil(info.prevCycle) && Objects.isNil(odp)) {
+    odp = await OriginalDataPointRepository.getOne({ assessment, cycle: info.prevCycle, countryIso, year })
+  }
+  return odp
+}
diff --git a/src/server/repository/assessmentCycle/originalDataPoint/getLastAccepted.ts b/src/server/repository/assessmentCycle/originalDataPoint/getLastAccepted.ts
new file mode 100644
index 0000000000..9d463dfc4b
--- /dev/null
+++ b/src/server/repository/assessmentCycle/originalDataPoint/getLastAccepted.ts
@@ -0,0 +1,62 @@
+import { Objects } from 'utils/objects'
+
+import { CountryIso } from 'meta/area'
+import { ActivityLogMessage, Assessment, Cycle, OriginalDataPoint } from 'meta/assessment'
+
+import { BaseProtocol, DB, Schemas } from 'server/db'
+
+type Props = {
+  assessment: Assessment
+  cycle: Cycle
+  countryIso: CountryIso
+  year: string
+}
+
+const activityMessages = [
+  ActivityLogMessage.originalDataPointCreate,
+  ActivityLogMessage.originalDataPointRemove,
+  ActivityLogMessage.originalDataPointUpdate,
+  ActivityLogMessage.originalDataPointUpdateDescription,
+  ActivityLogMessage.originalDataPointUpdateDataSources,
+  ActivityLogMessage.originalDataPointUpdateOriginalData,
+  ActivityLogMessage.originalDataPointUpdateNationalClasses,
+]
+
+const getLastAcceptedQuery = (props: Omit<Props, 'year'> & { year?: string }): string => {
+  const { assessment, cycle, countryIso, year } = props
+  const { name: assessmentName } = assessment.props
+  const { name: cycleName } = cycle
+
+  const schemaCycle = Schemas.getNameCycle(assessment, cycle)
+
+  return `with activities as
+                   (select al.country_iso
+                         , al.message
+                         , al.target
+                         , row_number() over (partition by al.target ->> 'year' order by al.time desc) as row_number
+                    from public.activity_log al
+                             left join public.assessment a on al.assessment_uuid = a.uuid
+                             left join public.assessment_cycle ac on a.id = ac.assessment_id and al.cycle_uuid = ac.uuid
+                             left join ${schemaCycle}.country_summary cs on al.country_iso = cs.country_iso
+                    where a.props ->> 'name' = '${assessmentName}'
+                      and ac.name = '${cycleName}'
+                      and al.country_iso = '${countryIso}'
+                      and al.message in (${activityMessages.map((m) => `'${m}'`).join(',')})
+                      and al.time < cs.last_accepted
+                        ${Objects.isEmpty(year) ? '' : `and al.target ->> 'year' = '${year}'`}
+                    order by al.time desc)
+          select a.country_iso
+               , a.target ->> 'year' as year
+               , a.target            as odp
+          from activities a
+          where a.row_number = 1
+  ;
+  `
+}
+
+export const getLastAccepted = async (
+  props: Props,
+  client: BaseProtocol = DB
+): Promise<OriginalDataPoint | undefined> => {
+  return client.oneOrNone<OriginalDataPoint>(getLastAcceptedQuery(props), [], ({ odp }) => odp)
+}
diff --git a/src/server/repository/assessmentCycle/originalDataPoint/getOne.ts b/src/server/repository/assessmentCycle/originalDataPoint/getOne.ts
index 53a55e678d..bd0ad61eac 100644
--- a/src/server/repository/assessmentCycle/originalDataPoint/getOne.ts
+++ b/src/server/repository/assessmentCycle/originalDataPoint/getOne.ts
@@ -5,15 +5,19 @@ import { Assessment, Cycle, OriginalDataPoint } from 'meta/assessment'
 
 import { BaseProtocol, DB, Schemas } from 'server/db'
 
-export const getOne = async (
-  props: { assessment: Assessment; cycle: Cycle; countryIso: CountryIso; year: string },
-  client: BaseProtocol = DB
-): Promise<OriginalDataPoint> => {
+type Props = {
+  assessment: Assessment
+  cycle: Cycle
+  countryIso: CountryIso
+  year: string
+}
+
+export const getOne = async (props: Props, client: BaseProtocol = DB): Promise<OriginalDataPoint | undefined> => {
   const { assessment, cycle, countryIso, year } = props
 
   const schemaName = Schemas.getNameCycle(assessment, cycle)
 
-  return client.one<OriginalDataPoint>(
+  return client.oneOrNone<OriginalDataPoint>(
     `select * from ${schemaName}.original_data_point where country_iso = $1 and year = $2;`,
     [countryIso, year],
     Objects.camelize
diff --git a/src/server/repository/assessmentCycle/originalDataPoint/index.ts b/src/server/repository/assessmentCycle/originalDataPoint/index.ts
index cc6ea2da0e..1f7a49aeaa 100644
--- a/src/server/repository/assessmentCycle/originalDataPoint/index.ts
+++ b/src/server/repository/assessmentCycle/originalDataPoint/index.ts
@@ -1,5 +1,6 @@
 import { create } from './create'
 import { deleteNationalClass } from './deleteNationalClass'
+import { getLastAccepted } from './getLastAccepted'
 import { getMany } from './getMany'
 import { getManyWithDescriptionLinks } from './getManyWithDescriptionLinks'
 import { getManyWithReferenceLinks } from './getManyWithReferenceLinks'
@@ -15,6 +16,7 @@ import { updateYear } from './updateYear'
 export const OriginalDataPointRepository = {
   create,
   deleteNationalClass,
+  getLastAccepted,
   getMany,
   getManyWithDescriptionLinks,
   getManyWithReferenceLinks,
diff --git a/src/test/integration/assessment/originalDataPoint.ts b/src/test/integration/assessment/originalDataPoint.ts
index 7dbe02f3cf..4ab8a6d25a 100644
--- a/src/test/integration/assessment/originalDataPoint.ts
+++ b/src/test/integration/assessment/originalDataPoint.ts
@@ -99,6 +99,6 @@ export default (): void =>
           year: '2299',
           countryIso: 'FIN',
         })
-      ).rejects.toThrowError('No data returned from the query.')
+      ).resolves.toBeNull()
     })
   })

From 06909c75ad4773a1185e6f04f0daf62dbe69f528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Tue, 11 Feb 2025 11:24:24 -0500
Subject: [PATCH 30/38] 4253 - Data History: ODP comparison - Plantation Forest
 row diffs (#4361)

* 4253 - ODP history: Hide validation

* 4253 - ODP history: Add calculateNationalClassPlantationForestPercentArea util

* 4253 - ODP history: Add Plantation forest row calculated diffs

* 4253 - ODP history: Add missing odp values null check
---
 .../ForestCharacteristicsPlantationRow.tsx    | 63 ++++++++++-----
 ...NaturalForestPercentAndAreaTotalsChange.ts |  2 +-
 ...usePlantationForestPercentAndAreaChange.ts | 76 +++++++++++++++++++
 .../originalDataPoint/odps/index.ts           |  2 +
 .../odps/nationalClassUtils.ts                |  6 ++
 5 files changed, 128 insertions(+), 21 deletions(-)
 create mode 100644 src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestPercentAndAreaChange.ts

diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantationRow.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantationRow.tsx
index 5d262c29a3..0c6597e0b8 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantationRow.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantationRow.tsx
@@ -4,11 +4,13 @@ import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import { Numbers } from 'utils/numbers'
 
-import { ODPNationalClass, SectionNames } from 'meta/assessment'
+import { ODPNationalClass, ODPs, SectionNames } from 'meta/assessment'
 import { Topics } from 'meta/messageCenter'
 import { TooltipId } from 'meta/tooltip'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
+import DiffText from 'client/components/DiffText'
 import PercentInput from 'client/components/PercentInput'
 import ReviewIndicator from 'client/components/ReviewIndicator'
 import { Columns, useOnPaste } from 'client/pages/OriginalDataPoint/components/hooks/useOnPaste'
@@ -18,6 +20,7 @@ import { useNationalClassValidations } from 'client/pages/OriginalDataPoint/hook
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
 import { useNationalClassNameComments } from '../../hooks'
+import { usePlantationForestPercentAndAreaChange } from './hooks/usePlantationForestPercentAndAreaChange'
 
 const allowedClass = (nc: ODPNationalClass) =>
   nc.forestPlantationPercent !== null && Number(nc.forestPlantationPercent) > 0 && Number(nc.forestPercent) > 0
@@ -37,19 +40,20 @@ const ForestCharacteristicsPlantationRow: React.FC<Props> = (props) => {
 
   const { nationalClasses, id } = originalDataPoint
   const nationalClass = nationalClasses[index]
-  const { name, area, forestPercent, forestPlantationPercent, forestPlantationIntroducedPercent, uuid } = nationalClass
+  const { name, forestPlantationIntroducedPercent, uuid } = nationalClass
   const target = [id, 'class', `${uuid}`, 'plantation_forest_introduced'] as string[]
   const classNameRowComments = useNationalClassNameComments(target)
 
-  const plantationIntroduced = area
-    ? Numbers.mul(area, Numbers.div(Numbers.mul(forestPlantationPercent, forestPercent), 10000))
-    : null
+  const plantationIntroduced = ODPs.calculateNationalClassPlantationForestPercentArea(nationalClass)
 
-  const validationErrorMessage = useNationalClassValidations({
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  let validationErrorMessage = useNationalClassValidations({
     index,
     originalDataPoint,
     variable: 'validForestPlantationIntroducedPercent',
   })
+  validationErrorMessage = historyLastApprovedIsActive ? null : validationErrorMessage
 
   const _onPaste = useOnPaste({
     columns,
@@ -60,6 +64,12 @@ const ForestCharacteristicsPlantationRow: React.FC<Props> = (props) => {
 
   const showReviewIndicator = useShowReviewIndicator(SectionNames.forestCharacteristics)
 
+  const changes = usePlantationForestPercentAndAreaChange({
+    forestPlantationIntroducedPercent,
+    nationalClassIndex: index,
+    plantationIntroducedArea: plantationIntroduced,
+  })
+
   if (!allowedClass(nationalClass)) {
     return null
   }
@@ -69,7 +79,13 @@ const ForestCharacteristicsPlantationRow: React.FC<Props> = (props) => {
   return (
     <tr className={classNameRowComments}>
       <th className="fra-table__category-cell">{name}</th>
-      <th className="fra-table__calculated-sub-cell fra-table__divider">{Numbers.format(plantationIntroduced)}</th>
+      <th className="fra-table__calculated-sub-cell fra-table__divider">
+        {historyLastApprovedIsActive ? (
+          <DiffText changes={changes?.plantationIntroducedArea} />
+        ) : (
+          Numbers.format(plantationIntroduced)
+        )}
+      </th>
       <td
         className={classNames('fra-table__cell', {
           error: Boolean(validationErrorMessage),
@@ -77,19 +93,26 @@ const ForestCharacteristicsPlantationRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        <PercentInput
-          disabled={!canEditData || isZeroOrNullPlantationIntroduced}
-          numberValue={forestPlantationIntroducedPercent}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-            const { value } = event.target
-            const updateProps = { field: columns[0].name, index, precision: columns[0].precision, value }
-            updateOriginalDataField(updateProps)
-          }}
-          onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
-            const updatedODP = _onPaste({ event, colIndex: 0 })
-            updateOriginalData(updatedODP)
-          }}
-        />
+        {historyLastApprovedIsActive ? (
+          <div className="odp-percent-diff">
+            <DiffText changes={changes?.forestPlantationIntroducedPercent} />
+            <span>%</span>
+          </div>
+        ) : (
+          <PercentInput
+            disabled={!canEditData || isZeroOrNullPlantationIntroduced}
+            numberValue={forestPlantationIntroducedPercent}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              const { value } = event.target
+              const updateProps = { field: columns[0].name, index, precision: columns[0].precision, value }
+              updateOriginalDataField(updateProps)
+            }}
+            onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
+              const updatedODP = _onPaste({ event, colIndex: 0 })
+              updateOriginalData(updatedODP)
+            }}
+          />
+        )}
       </td>
 
       {showReviewIndicator && (
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts
index b5ee027761..8d3b1bd156 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts
@@ -50,7 +50,7 @@ export const useNaturalForestPercentAndAreaTotalsChange = (props: Props): Return
     )
 
     const totalPrimaryForestNaturalPercentAreaPrev =
-      canCalculate && originalDataPointHistory.values.primaryForest
+      canCalculate && originalDataPointHistory.values?.primaryForest
         ? Numbers.format(Numbers.toBigNumber(originalDataPointHistory.values.primaryForest))
         : null
 
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestPercentAndAreaChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestPercentAndAreaChange.ts
new file mode 100644
index 0000000000..dec2f637a7
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestPercentAndAreaChange.ts
@@ -0,0 +1,76 @@
+import { useMemo } from 'react'
+
+import BigNumber from 'bignumber.js'
+import * as Diff from 'diff'
+import { Change } from 'diff'
+import { Numbers } from 'utils/numbers'
+import { Objects } from 'utils/objects'
+
+import { ODPs } from 'meta/assessment'
+
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+
+type Props = {
+  forestPlantationIntroducedPercent: string | null
+  nationalClassIndex: number
+  plantationIntroducedArea: BigNumber | null
+}
+
+type Returned = {
+  forestPlantationIntroducedPercent: Array<Change>
+  plantationIntroducedArea: Array<Change>
+}
+
+export const usePlantationForestPercentAndAreaChange = (props: Props): Returned => {
+  const {
+    forestPlantationIntroducedPercent: forestPlantationIntroducedPercentCurrent,
+    nationalClassIndex,
+    plantationIntroducedArea: plantationIntroducedAreaCurrent,
+  } = props
+
+  const originalDataPointHistory = useLastApprovedOriginalDataPoint()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const nationalClass = originalDataPointHistory?.nationalClasses?.[nationalClassIndex]
+
+  return useMemo<Returned>(() => {
+    if (!historyLastApprovedIsActive) return undefined
+
+    const canCalculate = !Objects.isEmpty(nationalClass)
+
+    const forestPlantationIntroducedPercentPrev = canCalculate ? nationalClass.forestPlantationIntroducedPercent : null
+    const formattedForestPlantationIntroducedPercentPrev = Numbers.format(forestPlantationIntroducedPercentPrev, 3)
+
+    const formattedForestPlantationIntroducedPercentCurrent = Numbers.format(
+      forestPlantationIntroducedPercentCurrent,
+      3
+    )
+
+    const forestPlantationIntroducedPercent = Diff.diffLines(
+      formattedForestPlantationIntroducedPercentPrev ?? '',
+      formattedForestPlantationIntroducedPercentCurrent ?? ''
+    )
+
+    const plantationIntroducedAreaPrev = canCalculate
+      ? ODPs.calculateNationalClassPlantationForestPercentArea(nationalClass)
+      : null
+    const formattedPlantationIntroducedAreaPrev = Numbers.format(plantationIntroducedAreaPrev)
+
+    const formattedPlantationIntroducedAreaCurrent = Numbers.format(plantationIntroducedAreaCurrent)
+
+    const plantationIntroducedArea = Diff.diffLines(
+      formattedPlantationIntroducedAreaPrev ?? '',
+      formattedPlantationIntroducedAreaCurrent ?? ''
+    )
+
+    return {
+      forestPlantationIntroducedPercent,
+      plantationIntroducedArea,
+    }
+  }, [
+    forestPlantationIntroducedPercentCurrent,
+    historyLastApprovedIsActive,
+    nationalClass,
+    plantationIntroducedAreaCurrent,
+  ])
+}
diff --git a/src/meta/assessment/originalDataPoint/odps/index.ts b/src/meta/assessment/originalDataPoint/odps/index.ts
index 7308f3d7c1..568fa4b1a6 100644
--- a/src/meta/assessment/originalDataPoint/odps/index.ts
+++ b/src/meta/assessment/originalDataPoint/odps/index.ts
@@ -14,6 +14,7 @@ import {
   calculateNationalClassForestArea,
   calculateNationalClassNaturalForestPercentArea,
   calculateNationalClassOtherLandPercent,
+  calculateNationalClassPlantationForestPercentArea,
   hasNaturallyRegenerating,
 } from './nationalClassUtils'
 import { removeNationalClassPlaceHolder } from './removeNationalClassPlaceHolder'
@@ -30,6 +31,7 @@ export const ODPs = {
   calculateNationalClassForestArea,
   calculateNationalClassNaturalForestPercentArea,
   calculateNationalClassOtherLandPercent,
+  calculateNationalClassPlantationForestPercentArea,
   calculateValues,
   canCopyPreviousValues,
   deleteNationalClass,
diff --git a/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts b/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts
index 1ac3d3ae85..cf34e2e618 100644
--- a/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts
+++ b/src/meta/assessment/originalDataPoint/odps/nationalClassUtils.ts
@@ -22,6 +22,12 @@ export const calculateNationalClassOtherLandPercent = (nc: ODPNationalClass): st
   return null
 }
 
+export const calculateNationalClassPlantationForestPercentArea = (nc: ODPNationalClass): BigNumber | null => {
+  return nc.area
+    ? Numbers.mul(nc.area, Numbers.div(Numbers.mul(nc.forestPlantationPercent, nc.forestPercent), 10000))
+    : null
+}
+
 export const hasNaturallyRegenerating = (nc: ODPNationalClass): boolean => {
   return (
     !Objects.isEmpty(nc.forestNaturalPercent) && Number(nc.forestNaturalPercent) > 0 && Number(nc.forestPercent) > 0

From 10bc98f62bac2fde0214e9179e96141b030c2440 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Tue, 11 Feb 2025 12:17:23 -0500
Subject: [PATCH 31/38] 4253 - Data History: ODP comparison - Plantation Forest
 totals diffs  (#4362)

* 4253 - ODP history: Add plantation totals vars

* 4253 - ODP history: Add plantation totals diffs
---
 .../ForestCharacteristicsPlantation.tsx       | 58 ++++++++++----
 .../hooks/usePlantationForestTotalsChange.ts  | 78 +++++++++++++++++++
 2 files changed, 119 insertions(+), 17 deletions(-)
 create mode 100644 src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestTotalsChange.ts

diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantation.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantation.tsx
index d45f204140..aa81860c64 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantation.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantation.tsx
@@ -5,8 +5,11 @@ import { Numbers } from 'utils/numbers'
 
 import { ODPs } from 'meta/assessment'
 
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
+import DiffText from 'client/components/DiffText'
 
+import { usePlantationForestTotalsChange } from './hooks/usePlantationForestTotalsChange'
 import ForestCharacteristicsPlantationRow from './ForestCharacteristicsPlantationRow'
 
 type Props = {
@@ -20,6 +23,34 @@ const ForestCharacteristicsPlantation: React.FC<Props> = (props) => {
 
   const nationalClasses = originalDataPoint?.nationalClasses.filter((nationalClass) => !nationalClass.placeHolder)
 
+  const totalForestPlantationPercentArea =
+    originalDataPoint &&
+    Numbers.format(
+      ODPs.calcTotalSubFieldArea({
+        originalDataPoint,
+        field: 'forestPercent',
+        subField: 'forestPlantationPercent',
+      })
+    )
+
+  const totalForestPlantationIntroducedPercentArea =
+    originalDataPoint &&
+    Numbers.format(
+      ODPs.calcTotalSubSubFieldArea({
+        originalDataPoint,
+        field: 'forestPercent',
+        subField: 'forestPlantationPercent',
+        subSubField: 'forestPlantationIntroducedPercent',
+      })
+    )
+
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  const totalsChange = usePlantationForestTotalsChange({
+    totalForestPlantationIntroducedPercentArea,
+    totalForestPlantationPercentArea,
+  })
+
   return (
     <div className="fra-table__container">
       <div className="fra-table__scroll-wrapper">
@@ -42,25 +73,18 @@ const ForestCharacteristicsPlantation: React.FC<Props> = (props) => {
             <tr>
               <th className="fra-table__header-cell-left">{t('nationalDataPoint.total')}</th>
               <th className="fra-table__calculated-cell fra-table__divider">
-                {originalDataPoint &&
-                  Numbers.format(
-                    ODPs.calcTotalSubFieldArea({
-                      originalDataPoint,
-                      field: 'forestPercent',
-                      subField: 'forestPlantationPercent',
-                    })
-                  )}
+                {historyLastApprovedIsActive ? (
+                  <DiffText changes={totalsChange?.totalForestPlantationPercentArea} />
+                ) : (
+                  totalForestPlantationPercentArea
+                )}
               </th>
               <td className="fra-table__calculated-cell">
-                {originalDataPoint &&
-                  Numbers.format(
-                    ODPs.calcTotalSubSubFieldArea({
-                      originalDataPoint,
-                      field: 'forestPercent',
-                      subField: 'forestPlantationPercent',
-                      subSubField: 'forestPlantationIntroducedPercent',
-                    })
-                  )}
+                {historyLastApprovedIsActive ? (
+                  <DiffText changes={totalsChange?.totalForestPlantationIntroducedPercentArea} />
+                ) : (
+                  totalForestPlantationIntroducedPercentArea
+                )}
               </td>
             </tr>
           </tfoot>
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestTotalsChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestTotalsChange.ts
new file mode 100644
index 0000000000..d793c27524
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestTotalsChange.ts
@@ -0,0 +1,78 @@
+import { useMemo } from 'react'
+
+import * as Diff from 'diff'
+import { Change } from 'diff'
+import { Numbers } from 'utils/numbers'
+import { Objects } from 'utils/objects'
+
+import { ODPs } from 'meta/assessment'
+
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+
+type Props = {
+  totalForestPlantationIntroducedPercentArea: string | null
+  totalForestPlantationPercentArea: string | null
+}
+
+type Returned =
+  | {
+      [K in keyof Props]: Array<Change>
+    }
+  | undefined
+
+export const usePlantationForestTotalsChange = (props: Props): Returned => {
+  const {
+    totalForestPlantationIntroducedPercentArea: totalForestPlantationIntroducedPercentAreaCurrent,
+    totalForestPlantationPercentArea: totalForestPlantationPercentAreaCurrent,
+  } = props
+
+  const originalDataPointHistory = useLastApprovedOriginalDataPoint()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  return useMemo<Returned>(() => {
+    if (!historyLastApprovedIsActive) return undefined
+
+    const canCalculate = !Objects.isEmpty(originalDataPointHistory)
+
+    const totalForestPlantationPercentAreaPrev = canCalculate
+      ? Numbers.format(
+          ODPs.calcTotalSubFieldArea({
+            originalDataPoint: originalDataPointHistory,
+            field: 'forestPercent',
+            subField: 'forestPlantationPercent',
+          })
+        )
+      : ''
+    const totalForestPlantationPercentArea = Diff.diffLines(
+      totalForestPlantationPercentAreaPrev ?? '',
+      totalForestPlantationPercentAreaCurrent ?? ''
+    )
+
+    const totalForestPlantationIntroducedPercentAreaPrev = canCalculate
+      ? Numbers.format(
+          ODPs.calcTotalSubSubFieldArea({
+            originalDataPoint: originalDataPointHistory,
+            field: 'forestPercent',
+            subField: 'forestPlantationPercent',
+            subSubField: 'forestPlantationIntroducedPercent',
+          })
+        )
+      : ''
+
+    const totalForestPlantationIntroducedPercentArea = Diff.diffLines(
+      totalForestPlantationIntroducedPercentAreaPrev ?? '',
+      totalForestPlantationIntroducedPercentAreaCurrent ?? ''
+    )
+
+    return {
+      totalForestPlantationIntroducedPercentArea,
+      totalForestPlantationPercentArea,
+    }
+  }, [
+    historyLastApprovedIsActive,
+    originalDataPointHistory,
+    totalForestPlantationIntroducedPercentAreaCurrent,
+    totalForestPlantationPercentAreaCurrent,
+  ])
+}

From a0faec1b0a7b46c238091c8a69022948a0daa581 Mon Sep 17 00:00:00 2001
From: Mino Togna <minotogna@users.noreply.github.com>
Date: Wed, 12 Feb 2025 15:22:03 +0100
Subject: [PATCH 32/38] 4206 - Data History: Data Table w/ ODP Last Approved
 preparation (#4368)

* 4206 - Data History: Data Table w/ ODP Last Approved preparation

* code clen up
---
 src/meta/area/country.ts                      |  2 +
 src/meta/area/index.ts                        |  2 +-
 .../controller/cycleData/getTableData.ts      | 14 ++--
 .../tableData/_lastApproved/_lastApproved.ts  | 25 +++++++
 .../tableData/_lastApproved/_prevCycle.ts     | 47 +++++++++++++
 .../tableData/_lastApproved/_types.ts         |  7 ++
 .../_lastApproved/getTableDataLastApproved.ts | 28 ++++++++
 ...TablesCondition.ts => _tablesCondition.ts} |  0
 .../tableData/getAggregatedTableData.ts       |  2 +-
 .../tableData/getTableDataLastApproved.ts     | 69 -------------------
 .../controller/cycleData/tableData/index.ts   |  2 +-
 .../assessmentCycle/country/getMany.ts        | 11 ++-
 .../assessmentCycle/country/index.ts          |  3 +-
 .../originalDataPoint/getLastAccepted.ts      | 64 ++++-------------
 .../queries/_lastAcceptedActivity.ts          | 47 +++++++++++++
 .../originalDataPoint/queries/index.ts        |  5 ++
 16 files changed, 196 insertions(+), 132 deletions(-)
 create mode 100644 src/server/controller/cycleData/tableData/_lastApproved/_lastApproved.ts
 create mode 100644 src/server/controller/cycleData/tableData/_lastApproved/_prevCycle.ts
 create mode 100644 src/server/controller/cycleData/tableData/_lastApproved/_types.ts
 create mode 100644 src/server/controller/cycleData/tableData/_lastApproved/getTableDataLastApproved.ts
 rename src/server/controller/cycleData/tableData/{getTablesCondition.ts => _tablesCondition.ts} (100%)
 delete mode 100644 src/server/controller/cycleData/tableData/getTableDataLastApproved.ts
 create mode 100644 src/server/repository/assessmentCycle/originalDataPoint/queries/_lastAcceptedActivity.ts
 create mode 100644 src/server/repository/assessmentCycle/originalDataPoint/queries/index.ts

diff --git a/src/meta/area/country.ts b/src/meta/area/country.ts
index 537936e2d4..734ac2d16c 100644
--- a/src/meta/area/country.ts
+++ b/src/meta/area/country.ts
@@ -16,3 +16,5 @@ export type Country = {
   props?: CountryProps
   regionCodes?: Array<RegionCode>
 } & Pick<CountrySummary, 'lastAccepted' | 'lastEdit' | 'lastForApproval' | 'lastInReview' | 'lastUpdate'>
+
+export type RecordCountries = Record<CountryIso, Country>
diff --git a/src/meta/area/index.ts b/src/meta/area/index.ts
index ee0e0b8b7f..21b3af1042 100644
--- a/src/meta/area/index.ts
+++ b/src/meta/area/index.ts
@@ -1,6 +1,6 @@
 export type { AreaCode } from './area'
 export { Areas } from './areas'
-export type { Country, CountryProps } from './country'
+export type { Country, CountryProps, RecordCountries } from './country'
 export type { CountryIso } from './countryIso'
 export type { CountrySummary } from './countrySummary'
 export { Global } from './global'
diff --git a/src/server/controller/cycleData/getTableData.ts b/src/server/controller/cycleData/getTableData.ts
index 79ef6b6c08..3e65347dc4 100644
--- a/src/server/controller/cycleData/getTableData.ts
+++ b/src/server/controller/cycleData/getTableData.ts
@@ -1,14 +1,14 @@
 import { Objects } from 'utils/objects'
 
-import { Country, CountryIso } from 'meta/area'
+import { CountryIso } from 'meta/area'
 import { TableName, TableNames } from 'meta/assessment'
 import { RecordAssessmentData, RecordCountryData } from 'meta/data'
 
-import { getTablesCondition } from 'server/controller/cycleData/tableData/getTablesCondition'
 import { BaseProtocol, DB } from 'server/db'
 import { CountryRepository } from 'server/repository/assessmentCycle/country'
 import { DataRedisRepository } from 'server/repository/redis/data'
 
+import { getTablesCondition } from './tableData/_tablesCondition'
 import { PropsGetTableData } from './tableData/props'
 
 const _mergeODPTable = (props: {
@@ -36,15 +36,11 @@ export const getTableData = async (
   const tableData = await DataRedisRepository.getCountriesData({ assessment, cycle, tables, countryISOs })
 
   if (mergeOdp) {
-    // TODO: add country cache and add AreaRedisRepository.getCountriesMap()
-    const countries = await CountryRepository.getMany({ assessment, cycle }, client)
-    const countryMap = countries.reduce<Record<CountryIso, Country>>(
-      (acc, country) => ({ ...acc, [country.countryIso]: country }),
-      {} as Record<CountryIso, Country>
-    )
+    // TODO: add country cache and add AreaRedisRepository.getCountriesRecord()
+    const countries = await CountryRepository.getManyRecord({ assessment, cycle }, client)
 
     countryISOs.forEach((countryIso) => {
-      const country = countryMap[countryIso]
+      const country = countries[countryIso]
       if (tables[TableNames.extentOfForest]) {
         _mergeODPTable({ countryIso, tableData, tableName: TableNames.extentOfForest })
       }
diff --git a/src/server/controller/cycleData/tableData/_lastApproved/_lastApproved.ts b/src/server/controller/cycleData/tableData/_lastApproved/_lastApproved.ts
new file mode 100644
index 0000000000..9b4b736464
--- /dev/null
+++ b/src/server/controller/cycleData/tableData/_lastApproved/_lastApproved.ts
@@ -0,0 +1,25 @@
+import { Objects } from 'utils/objects'
+
+import { RecordAssessmentData } from 'meta/data'
+
+import { BaseProtocol } from 'server/db'
+import { DataRepository } from 'server/repository/assessmentCycle/data'
+
+import { PropsGetLastApproved } from './_types'
+
+type Props = PropsGetLastApproved & {
+  data: RecordAssessmentData
+}
+
+export const mergeWithLastApproved = async (props: Props, client: BaseProtocol): Promise<RecordAssessmentData> => {
+  const { assessment, cycle, data } = props
+  const { name: assessmentName } = assessment.props
+  const { name: cycleName } = cycle
+
+  const countryData = await DataRepository.getTableDataLastApproved(props, client)
+  const lastApprovedData = { [assessmentName]: { [cycleName]: countryData } }
+
+  // TODO: merge with odp
+
+  return Objects.merge(data, lastApprovedData)
+}
diff --git a/src/server/controller/cycleData/tableData/_lastApproved/_prevCycle.ts b/src/server/controller/cycleData/tableData/_lastApproved/_prevCycle.ts
new file mode 100644
index 0000000000..6f862e5a39
--- /dev/null
+++ b/src/server/controller/cycleData/tableData/_lastApproved/_prevCycle.ts
@@ -0,0 +1,47 @@
+import { Objects } from 'utils/objects'
+
+import { TableName } from 'meta/assessment'
+import { RecordAssessmentData, RecordAssessmentDatas } from 'meta/data'
+
+import { getTableData } from 'server/controller/cycleData/getTableData'
+import { PropsGetTableData } from 'server/controller/cycleData/tableData/props'
+import { BaseProtocol, DB } from 'server/db'
+import { TableRedisRepository } from 'server/repository/redis/table'
+
+import { PropsGetLastApproved } from './_types'
+
+type Props = PropsGetLastApproved & Pick<PropsGetTableData, 'mergeOdp'>
+
+export const getTableDataPrevCycle = async (props: Props, client: BaseProtocol = DB): Promise<RecordAssessmentData> => {
+  const { assessment, cycle, countryISOs, info, mergeOdp, tableNames } = props
+  const { name: assessmentName } = assessment.props
+  const { name: cycleName } = cycle
+  const { prevCycle } = info
+
+  if (!Objects.isNil(prevCycle)) {
+    const tablesPrevCycle = await Promise.all(
+      (tableNames ?? []).map((tableName) => TableRedisRepository.getOne({ assessment, cycle: prevCycle, tableName }))
+    )
+    const tableNamesPrevCycle = tablesPrevCycle?.reduce<Array<TableName>>(
+      (acc, table) => (Objects.isNil(table) ? acc : [...acc, table.props.name]),
+      []
+    )
+
+    if (!Objects.isEmpty(tableNamesPrevCycle)) {
+      const data = await getTableData({ ...props, tableNames: tableNamesPrevCycle, mergeOdp, cycle: prevCycle }, client)
+
+      // replace prev cycle entry key with current cycle
+      return {
+        [assessmentName]: {
+          [cycleName]: countryISOs.reduce((acc, countryIso) => {
+            const _props = { assessmentName, cycleName: prevCycle.name, countryIso, data }
+            const countryData = RecordAssessmentDatas.getCountryData(_props)
+            return { ...acc, [countryIso]: countryData }
+          }, {}),
+        },
+      }
+    }
+  }
+
+  return {}
+}
diff --git a/src/server/controller/cycleData/tableData/_lastApproved/_types.ts b/src/server/controller/cycleData/tableData/_lastApproved/_types.ts
new file mode 100644
index 0000000000..de5cf46928
--- /dev/null
+++ b/src/server/controller/cycleData/tableData/_lastApproved/_types.ts
@@ -0,0 +1,7 @@
+import { HistoryLastApprovedInfo } from 'meta/cycleData/historyLastApproved'
+
+import { PropsGetTableData } from 'server/controller/cycleData/tableData/props'
+
+export type PropsGetLastApproved = Omit<PropsGetTableData, 'mergeOdp'> & {
+  info: HistoryLastApprovedInfo
+}
diff --git a/src/server/controller/cycleData/tableData/_lastApproved/getTableDataLastApproved.ts b/src/server/controller/cycleData/tableData/_lastApproved/getTableDataLastApproved.ts
new file mode 100644
index 0000000000..f03ac25d46
--- /dev/null
+++ b/src/server/controller/cycleData/tableData/_lastApproved/getTableDataLastApproved.ts
@@ -0,0 +1,28 @@
+import { Objects } from 'utils/objects'
+
+import { RecordAssessmentData } from 'meta/data'
+
+import { mergeWithLastApproved } from 'server/controller/cycleData/tableData/_lastApproved/_lastApproved'
+import { BaseProtocol, DB } from 'server/db'
+
+import { getTableDataPrevCycle } from './_prevCycle'
+import { PropsGetLastApproved } from './_types'
+
+export const getTableDataLastApproved = async (
+  props: PropsGetLastApproved,
+  client: BaseProtocol = DB
+): Promise<RecordAssessmentData> => {
+  const { info } = props
+  const { lastAccepted } = info
+
+  const hasLastAccepted = !Objects.isNil(lastAccepted)
+
+  // when has last accepted, odp gets manually merged later in mergeWithLastApproved
+  const data = await getTableDataPrevCycle({ ...props, mergeOdp: !hasLastAccepted }, client)
+
+  if (hasLastAccepted) {
+    return mergeWithLastApproved({ ...props, data }, client)
+  }
+
+  return data
+}
diff --git a/src/server/controller/cycleData/tableData/getTablesCondition.ts b/src/server/controller/cycleData/tableData/_tablesCondition.ts
similarity index 100%
rename from src/server/controller/cycleData/tableData/getTablesCondition.ts
rename to src/server/controller/cycleData/tableData/_tablesCondition.ts
diff --git a/src/server/controller/cycleData/tableData/getAggregatedTableData.ts b/src/server/controller/cycleData/tableData/getAggregatedTableData.ts
index f50ef89dc8..0a8d5c7488 100644
--- a/src/server/controller/cycleData/tableData/getAggregatedTableData.ts
+++ b/src/server/controller/cycleData/tableData/getAggregatedTableData.ts
@@ -1,11 +1,11 @@
 import { RegionCode } from 'meta/area'
 import { RecordAssessmentData } from 'meta/data'
 
-import { getTablesCondition } from 'server/controller/cycleData/tableData/getTablesCondition'
 import { BaseProtocol, DB } from 'server/db'
 import { CountryRepository } from 'server/repository/assessmentCycle/country'
 import { DataRepository } from 'server/repository/assessmentCycle/data'
 
+import { getTablesCondition } from './_tablesCondition'
 import { PropsGetTableData } from './props'
 
 export const getAggregatedTableData = async (
diff --git a/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts b/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts
deleted file mode 100644
index 759f0afd9d..0000000000
--- a/src/server/controller/cycleData/tableData/getTableDataLastApproved.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Objects } from 'utils/objects'
-
-import { TableName } from 'meta/assessment'
-import { HistoryLastApprovedInfo } from 'meta/cycleData/historyLastApproved'
-import { RecordAssessmentData, RecordAssessmentDatas } from 'meta/data'
-
-import { BaseProtocol, DB } from 'server/db'
-import { DataRepository } from 'server/repository/assessmentCycle/data'
-import { TableRedisRepository } from 'server/repository/redis/table'
-
-import { getTableData } from '../getTableData'
-import { PropsGetTableData } from './props'
-
-type Props = Omit<PropsGetTableData, 'mergeOdp'> & { info: HistoryLastApprovedInfo }
-
-export const getTableDataLastApproved = async (
-  props: Props,
-  client: BaseProtocol = DB
-): Promise<RecordAssessmentData> => {
-  const { assessment, countryISOs, cycle, info, tableNames } = props
-  const { prevCycle, lastAccepted } = info
-  const prevCycleName = prevCycle?.name
-
-  const hasPrevCycle = !Objects.isNil(prevCycle)
-  const hasLastAccepted = !Objects.isNil(lastAccepted)
-
-  let data = {}
-  if (hasPrevCycle) {
-    const tablesPrevCycle = await Promise.all(
-      (tableNames ?? []).map((tableName) => TableRedisRepository.getOne({ assessment, cycle: prevCycle, tableName }))
-    )
-    const tableNamesPrevCycle = tablesPrevCycle?.reduce<Array<TableName>>(
-      (acc, table) => (Objects.isNil(table) ? acc : [...acc, table.props.name]),
-      []
-    )
-
-    if (!Objects.isEmpty(tableNamesPrevCycle)) {
-      const mergeOdp = !hasLastAccepted // when has last accepted, odp gets manually merged later
-      data = await getTableData({ ...props, tableNames: tableNamesPrevCycle, mergeOdp, cycle: prevCycle }, client)
-    }
-  }
-
-  if (!Objects.isEmpty(data)) {
-    const { name: assessmentName } = assessment.props
-    const cycleName = prevCycleName
-    data = {
-      [assessmentName]: {
-        [cycle.name]: countryISOs.reduce((acc, countryIso) => {
-          const countryData = RecordAssessmentDatas.getCountryData({ assessmentName, cycleName, countryIso, data })
-          return { ...acc, [countryIso]: countryData }
-        }, {}),
-      },
-    }
-  }
-
-  if (hasLastAccepted) {
-    const assessmentName = assessment.props.name
-    const cycleName = cycle.name
-    const lastApprovedData = {
-      [assessmentName]: {
-        [cycleName]: await DataRepository.getTableDataLastApproved(props, client),
-      },
-    }
-
-    data = Objects.merge(data, lastApprovedData)
-  }
-
-  return data
-}
diff --git a/src/server/controller/cycleData/tableData/index.ts b/src/server/controller/cycleData/tableData/index.ts
index 894695eb05..9fe52672a1 100644
--- a/src/server/controller/cycleData/tableData/index.ts
+++ b/src/server/controller/cycleData/tableData/index.ts
@@ -1,5 +1,5 @@
+import { getTableDataLastApproved } from './_lastApproved/getTableDataLastApproved'
 import { getAggregatedTableData } from './getAggregatedTableData'
-import { getTableDataLastApproved } from './getTableDataLastApproved'
 import { refreshViews } from './refreshViews'
 
 export const TableData = {
diff --git a/src/server/repository/assessmentCycle/country/getMany.ts b/src/server/repository/assessmentCycle/country/getMany.ts
index 87706163d2..46f44063ab 100644
--- a/src/server/repository/assessmentCycle/country/getMany.ts
+++ b/src/server/repository/assessmentCycle/country/getMany.ts
@@ -1,6 +1,6 @@
 import { Objects } from 'utils/objects'
 
-import { Country } from 'meta/area'
+import { Country, CountryIso, RecordCountries } from 'meta/area'
 import { Assessment, Cycle } from 'meta/assessment'
 
 import { BaseProtocol, DB, Schemas } from 'server/db'
@@ -36,3 +36,12 @@ export const getMany = async (props: Props, client: BaseProtocol = DB): Promise<
     (row) => Objects.camelize(row)
   )
 }
+
+export const getManyRecord = async (props: Props, client: BaseProtocol = DB): Promise<RecordCountries> => {
+  const countries = await getMany(props, client)
+
+  return countries.reduce<RecordCountries>(
+    (acc, country) => ({ ...acc, [country.countryIso]: country }),
+    {} as Record<CountryIso, Country>
+  )
+}
diff --git a/src/server/repository/assessmentCycle/country/index.ts b/src/server/repository/assessmentCycle/country/index.ts
index 9f505dee3c..97b204fcfa 100644
--- a/src/server/repository/assessmentCycle/country/index.ts
+++ b/src/server/repository/assessmentCycle/country/index.ts
@@ -1,10 +1,11 @@
 import { getCountryIsos } from './getCountryIsos'
-import { getMany } from './getMany'
+import { getMany, getManyRecord } from './getMany'
 import { getOne } from './getOne'
 import { update } from './update'
 
 export const CountryRepository = {
   getMany,
+  getManyRecord,
   getOne,
   update,
   getCountryIsos,
diff --git a/src/server/repository/assessmentCycle/originalDataPoint/getLastAccepted.ts b/src/server/repository/assessmentCycle/originalDataPoint/getLastAccepted.ts
index 9d463dfc4b..4776a69866 100644
--- a/src/server/repository/assessmentCycle/originalDataPoint/getLastAccepted.ts
+++ b/src/server/repository/assessmentCycle/originalDataPoint/getLastAccepted.ts
@@ -1,9 +1,8 @@
-import { Objects } from 'utils/objects'
-
 import { CountryIso } from 'meta/area'
-import { ActivityLogMessage, Assessment, Cycle, OriginalDataPoint } from 'meta/assessment'
+import { Assessment, Cycle, OriginalDataPoint } from 'meta/assessment'
 
-import { BaseProtocol, DB, Schemas } from 'server/db'
+import { BaseProtocol, DB } from 'server/db'
+import { OriginalDataPointQueries } from 'server/repository/assessmentCycle/originalDataPoint/queries'
 
 type Props = {
   assessment: Assessment
@@ -12,51 +11,18 @@ type Props = {
   year: string
 }
 
-const activityMessages = [
-  ActivityLogMessage.originalDataPointCreate,
-  ActivityLogMessage.originalDataPointRemove,
-  ActivityLogMessage.originalDataPointUpdate,
-  ActivityLogMessage.originalDataPointUpdateDescription,
-  ActivityLogMessage.originalDataPointUpdateDataSources,
-  ActivityLogMessage.originalDataPointUpdateOriginalData,
-  ActivityLogMessage.originalDataPointUpdateNationalClasses,
-]
-
-const getLastAcceptedQuery = (props: Omit<Props, 'year'> & { year?: string }): string => {
+export const getLastAccepted = async (props: Props, client: BaseProtocol = DB): Promise<OriginalDataPoint | null> => {
   const { assessment, cycle, countryIso, year } = props
-  const { name: assessmentName } = assessment.props
-  const { name: cycleName } = cycle
-
-  const schemaCycle = Schemas.getNameCycle(assessment, cycle)
-
-  return `with activities as
-                   (select al.country_iso
-                         , al.message
-                         , al.target
-                         , row_number() over (partition by al.target ->> 'year' order by al.time desc) as row_number
-                    from public.activity_log al
-                             left join public.assessment a on al.assessment_uuid = a.uuid
-                             left join public.assessment_cycle ac on a.id = ac.assessment_id and al.cycle_uuid = ac.uuid
-                             left join ${schemaCycle}.country_summary cs on al.country_iso = cs.country_iso
-                    where a.props ->> 'name' = '${assessmentName}'
-                      and ac.name = '${cycleName}'
-                      and al.country_iso = '${countryIso}'
-                      and al.message in (${activityMessages.map((m) => `'${m}'`).join(',')})
-                      and al.time < cs.last_accepted
-                        ${Objects.isEmpty(year) ? '' : `and al.target ->> 'year' = '${year}'`}
-                    order by al.time desc)
-          select a.country_iso
-               , a.target ->> 'year' as year
-               , a.target            as odp
-          from activities a
-          where a.row_number = 1
-  ;
-  `
-}
 
-export const getLastAccepted = async (
-  props: Props,
-  client: BaseProtocol = DB
-): Promise<OriginalDataPoint | undefined> => {
-  return client.oneOrNone<OriginalDataPoint>(getLastAcceptedQuery(props), [], ({ odp }) => odp)
+  const _props = { assessment, cycle, countryISOs: [countryIso], year }
+
+  return client.oneOrNone<OriginalDataPoint>(
+    `with activities as (${OriginalDataPointQueries.getLastAcceptedActivity(_props)})
+     select a.target as odp
+     from activities a
+     where a.row_number = 1
+    `,
+    [],
+    ({ odp }) => odp
+  )
 }
diff --git a/src/server/repository/assessmentCycle/originalDataPoint/queries/_lastAcceptedActivity.ts b/src/server/repository/assessmentCycle/originalDataPoint/queries/_lastAcceptedActivity.ts
new file mode 100644
index 0000000000..ffb4c2e85d
--- /dev/null
+++ b/src/server/repository/assessmentCycle/originalDataPoint/queries/_lastAcceptedActivity.ts
@@ -0,0 +1,47 @@
+import { Objects } from 'utils/objects'
+
+import { CountryIso } from 'meta/area'
+import { ActivityLogMessage, Assessment, Cycle } from 'meta/assessment'
+
+import { Schemas } from 'server/db'
+
+const activityMessages = [
+  ActivityLogMessage.originalDataPointCreate,
+  ActivityLogMessage.originalDataPointRemove,
+  ActivityLogMessage.originalDataPointUpdate,
+  ActivityLogMessage.originalDataPointUpdateDescription,
+  ActivityLogMessage.originalDataPointUpdateDataSources,
+  ActivityLogMessage.originalDataPointUpdateOriginalData,
+  ActivityLogMessage.originalDataPointUpdateNationalClasses,
+]
+
+type Props = {
+  assessment: Assessment
+  cycle: Cycle
+  countryISOs: Array<CountryIso>
+  year?: string
+}
+
+export const getLastAcceptedActivity = (props: Props): string => {
+  const { assessment, cycle, countryISOs, year } = props
+  const { name: assessmentName } = assessment.props
+  const { name: cycleName } = cycle
+
+  const schemaCycle = Schemas.getNameCycle(assessment, cycle)
+
+  return `select al.country_iso
+               , al.message
+               , al.target
+               , row_number() over (partition by al.target ->> 'year' order by al.time desc) as row_number
+          from public.activity_log al
+                   left join public.assessment a on al.assessment_uuid = a.uuid
+                   left join public.assessment_cycle ac on a.id = ac.assessment_id and al.cycle_uuid = ac.uuid
+                   left join ${schemaCycle}.country_summary cs on al.country_iso = cs.country_iso
+          where a.props ->> 'name' = '${assessmentName}'
+            and ac.name = '${cycleName}'
+            and al.country_iso in (${countryISOs.map((c) => `'${c}'`).join(',')})
+            and al.message in (${activityMessages.map((m) => `'${m}'`).join(',')})
+            and al.time < cs.last_accepted
+              ${Objects.isEmpty(year) ? '' : `and al.target ->> 'year' = '${year}'`}
+          order by al.time desc`
+}
diff --git a/src/server/repository/assessmentCycle/originalDataPoint/queries/index.ts b/src/server/repository/assessmentCycle/originalDataPoint/queries/index.ts
new file mode 100644
index 0000000000..87fd7b4c3b
--- /dev/null
+++ b/src/server/repository/assessmentCycle/originalDataPoint/queries/index.ts
@@ -0,0 +1,5 @@
+import { getLastAcceptedActivity } from './_lastAcceptedActivity'
+
+export const OriginalDataPointQueries = {
+  getLastAcceptedActivity,
+}

From 03028335128f2dd8bf463b95b3cb6fff725afcd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Thu, 13 Feb 2025 00:30:08 -0500
Subject: [PATCH 33/38] 4253 - ODP history: Forest characteristics history:
 conditional table renders (#4370)

---
 .../ForestCharacteristics.tsx                 | 14 ++++--
 ...aturallyRegeneratingAndPlantationForest.ts | 50 +++++++++++++++++++
 2 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useHistoryHasNaturallyRegeneratingAndPlantationForest.ts

diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx
index 3079834b69..07c7fdf8bf 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx
@@ -13,6 +13,7 @@ import DefinitionLink from 'client/components/DefinitionLink'
 import DiffText from 'client/components/DiffText'
 
 import { useForestCharacteristicsTotalsChange } from './hooks/useForestCharacteristicsTotalsChange'
+import { useHistoryHasNaturallyRegeneratingAndPlantationForest } from './hooks/useHistoryHasNaturallyRegeneratingAndPlantationForest'
 import ForestCharacteristicsNaturallyRegenerating from './ForestCharacteristicsNaturallyRegenerating'
 import ForestCharacteristicsPlantation from './ForestCharacteristicsPlantation'
 import ForestCharacteristicsRow from './ForestCharacteristicsRow'
@@ -65,6 +66,9 @@ const ForestCharacteristics: React.FC<Props> = (props) => {
     totalOtherPlantedForestPercentArea,
   })
 
+  const { historyHasNaturallyRegeneratingForest, historyHasPlantationForest } =
+    useHistoryHasNaturallyRegeneratingAndPlantationForest()
+
   const nationalClasses = originalDataPoint.nationalClasses.filter((nationalClass) => !nationalClass.placeHolder)
   const plantationTotal = ODPs.calcTotalSubFieldArea({
     originalDataPoint,
@@ -77,7 +81,7 @@ const ForestCharacteristics: React.FC<Props> = (props) => {
     subField: 'forestNaturalPercent',
   })
 
-  const hasPlantation = plantationTotal && Numbers.greaterThanOrEqualTo(plantationTotal, 0)
+  const hasPlantationForest = plantationTotal && Numbers.greaterThanOrEqualTo(plantationTotal, 0)
   //  naturally regenerating forest is not available in Cycle 2020
   const hasNaturallyRegeneratingForest =
     cycleName !== '2020' &&
@@ -178,8 +182,12 @@ const ForestCharacteristics: React.FC<Props> = (props) => {
           </table>
         </div>
       </div>
-      {hasNaturallyRegeneratingForest && <ForestCharacteristicsNaturallyRegenerating canEditData={canEditData} />}
-      {hasPlantation && <ForestCharacteristicsPlantation canEditData={canEditData} />}
+      {(hasNaturallyRegeneratingForest || historyHasNaturallyRegeneratingForest) && (
+        <ForestCharacteristicsNaturallyRegenerating canEditData={canEditData} />
+      )}
+      {(hasPlantationForest || historyHasPlantationForest) && (
+        <ForestCharacteristicsPlantation canEditData={canEditData} />
+      )}
     </div>
   )
 }
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useHistoryHasNaturallyRegeneratingAndPlantationForest.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useHistoryHasNaturallyRegeneratingAndPlantationForest.ts
new file mode 100644
index 0000000000..1ad93506a7
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useHistoryHasNaturallyRegeneratingAndPlantationForest.ts
@@ -0,0 +1,50 @@
+import { useMemo } from 'react'
+
+import { Numbers } from 'utils/numbers'
+import { Objects } from 'utils/objects'
+
+import { ODPs } from 'meta/assessment'
+
+import { useHistoryLastApprovedIsActive } from 'client/store/data'
+import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+
+type Returned = {
+  historyHasNaturallyRegeneratingForest: boolean
+  historyHasPlantationForest: boolean
+}
+
+export const useHistoryHasNaturallyRegeneratingAndPlantationForest = (): Returned => {
+  const originalDataPointHistory = useLastApprovedOriginalDataPoint()
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  return useMemo<Returned>(() => {
+    const canCalculate = !Objects.isEmpty(originalDataPointHistory)
+
+    if (!historyLastApprovedIsActive || !canCalculate) {
+      return {
+        historyHasNaturallyRegeneratingForest: false,
+        historyHasPlantationForest: false,
+      }
+    }
+
+    const plantationTotal = ODPs.calcTotalSubFieldArea({
+      originalDataPoint: originalDataPointHistory,
+      field: 'forestPercent',
+      subField: 'forestPlantationPercent',
+    })
+    const historyHasPlantationForest = plantationTotal && Numbers.greaterThanOrEqualTo(plantationTotal, 0)
+
+    const naturallyRegeneratingForestTotal = ODPs.calcTotalSubFieldArea({
+      originalDataPoint: originalDataPointHistory,
+      field: 'forestPercent',
+      subField: 'forestNaturalPercent',
+    })
+    const historyHasNaturallyRegeneratingForest =
+      naturallyRegeneratingForestTotal && Numbers.greaterThanOrEqualTo(naturallyRegeneratingForestTotal, 0)
+
+    return {
+      historyHasNaturallyRegeneratingForest,
+      historyHasPlantationForest,
+    }
+  }, [historyLastApprovedIsActive, originalDataPointHistory])
+}

From ad1748616bdec1627ca0e0e8d886f23dd352c8bb Mon Sep 17 00:00:00 2001
From: Mino Togna <minotogna@users.noreply.github.com>
Date: Thu, 13 Feb 2025 13:45:49 +0100
Subject: [PATCH 34/38] 4312 - Data History: Data table (with ODP) comparison
 (Last approved) (#4374)

---
 .../DataTable/Table/RowData/Cell/Cell.tsx     |  2 +-
 .../controller/cycleData/getTableData.ts      | 46 ++--------
 .../tableData/_lastApproved/_lastApproved.ts  | 18 ++--
 .../tableData/_mergeOdpCountryData.ts         | 49 +++++++++++
 .../assessment/getCreateSchemaDDL.ts          | 21 +----
 .../data/getOriginalDataPointData.ts          | 32 +------
 .../getOriginalDataPointDataLastApproved.ts   | 86 +++++++++++++++++++
 .../repository/assessmentCycle/data/index.ts  |  2 +
 .../nodeExt/queries/_totalLandArea.ts         | 13 +++
 .../assessmentCycle/nodeExt/queries/index.ts  |  5 ++
 .../queries/_originalDataPointData.ts         | 58 +++++++++++++
 .../originalDataPoint/queries/_otherLand.ts   |  9 ++
 .../originalDataPoint/queries/index.ts        |  4 +
 13 files changed, 255 insertions(+), 90 deletions(-)
 create mode 100644 src/server/controller/cycleData/tableData/_mergeOdpCountryData.ts
 create mode 100644 src/server/repository/assessmentCycle/data/getOriginalDataPointDataLastApproved.ts
 create mode 100644 src/server/repository/assessmentCycle/nodeExt/queries/_totalLandArea.ts
 create mode 100644 src/server/repository/assessmentCycle/nodeExt/queries/index.ts
 create mode 100644 src/server/repository/assessmentCycle/originalDataPoint/queries/_originalDataPointData.ts
 create mode 100644 src/server/repository/assessmentCycle/originalDataPoint/queries/_otherLand.ts

diff --git a/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx b/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
index fa3b941c71..b60b055ca1 100644
--- a/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
+++ b/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
@@ -124,7 +124,7 @@ const Cell: React.FC<Props> = (props) => {
         table={table}
       />
 
-      <Flags col={col} nodeValue={nodeValue} row={row} sectionName={sectionName} />
+      {!displayHistory && <Flags col={col} nodeValue={nodeValue} row={row} sectionName={sectionName} />}
     </DataCell>
   )
 }
diff --git a/src/server/controller/cycleData/getTableData.ts b/src/server/controller/cycleData/getTableData.ts
index 3e65347dc4..a6cac353cc 100644
--- a/src/server/controller/cycleData/getTableData.ts
+++ b/src/server/controller/cycleData/getTableData.ts
@@ -1,58 +1,26 @@
-import { Objects } from 'utils/objects'
-
-import { CountryIso } from 'meta/area'
-import { TableName, TableNames } from 'meta/assessment'
-import { RecordAssessmentData, RecordCountryData } from 'meta/data'
+import { RecordAssessmentData } from 'meta/data'
 
 import { BaseProtocol, DB } from 'server/db'
-import { CountryRepository } from 'server/repository/assessmentCycle/country'
 import { DataRedisRepository } from 'server/repository/redis/data'
 
+import { mergeOdpCountryData } from './tableData/_mergeOdpCountryData'
 import { getTablesCondition } from './tableData/_tablesCondition'
 import { PropsGetTableData } from './tableData/props'
 
-const _mergeODPTable = (props: {
-  countryIso: CountryIso
-  tableData: RecordCountryData
-  tableName: TableName
-}): void => {
-  const { countryIso, tableData, tableName } = props
-
-  const odpData = tableData?.[countryIso]?.[TableNames.originalDataPointValue]
-  if (odpData) {
-    const dataMerged = { ...tableData[countryIso][tableName], ...odpData }
-    Objects.setInPath({ obj: tableData, path: [countryIso, tableName], value: dataMerged })
-  }
-}
-
 export const getTableData = async (
   props: PropsGetTableData,
   client: BaseProtocol = DB
 ): Promise<RecordAssessmentData> => {
   const { assessment, columns, countryISOs, cycle, mergeOdp, tableNames, variables } = props
+  const { name: assessmentName } = assessment.props
+  const { name: cycleName } = cycle
 
   const tables = getTablesCondition({ tableNames, columns, variables, mergeOdp })
-
-  const tableData = await DataRedisRepository.getCountriesData({ assessment, cycle, tables, countryISOs })
+  const data = await DataRedisRepository.getCountriesData({ assessment, cycle, tables, countryISOs })
 
   if (mergeOdp) {
-    // TODO: add country cache and add AreaRedisRepository.getCountriesRecord()
-    const countries = await CountryRepository.getManyRecord({ assessment, cycle }, client)
-
-    countryISOs.forEach((countryIso) => {
-      const country = countries[countryIso]
-      if (tables[TableNames.extentOfForest]) {
-        _mergeODPTable({ countryIso, tableData, tableName: TableNames.extentOfForest })
-      }
-      if (tables[TableNames.forestCharacteristics] && country.props.forestCharacteristics.useOriginalDataPoint) {
-        _mergeODPTable({ countryIso, tableData, tableName: TableNames.forestCharacteristics })
-      }
-    })
+    await mergeOdpCountryData({ assessment, cycle, countryISOs, data, tables }, client)
   }
 
-  return {
-    [assessment.props.name]: {
-      [cycle.name]: tableData,
-    },
-  }
+  return { [assessmentName]: { [cycleName]: data } }
 }
diff --git a/src/server/controller/cycleData/tableData/_lastApproved/_lastApproved.ts b/src/server/controller/cycleData/tableData/_lastApproved/_lastApproved.ts
index 9b4b736464..857a1ae217 100644
--- a/src/server/controller/cycleData/tableData/_lastApproved/_lastApproved.ts
+++ b/src/server/controller/cycleData/tableData/_lastApproved/_lastApproved.ts
@@ -1,10 +1,13 @@
 import { Objects } from 'utils/objects'
 
+import { TableNames } from 'meta/assessment'
 import { RecordAssessmentData } from 'meta/data'
 
 import { BaseProtocol } from 'server/db'
 import { DataRepository } from 'server/repository/assessmentCycle/data'
 
+import { mergeOdpCountryData } from '../_mergeOdpCountryData'
+import { getTablesCondition } from '../_tablesCondition'
 import { PropsGetLastApproved } from './_types'
 
 type Props = PropsGetLastApproved & {
@@ -12,14 +15,19 @@ type Props = PropsGetLastApproved & {
 }
 
 export const mergeWithLastApproved = async (props: Props, client: BaseProtocol): Promise<RecordAssessmentData> => {
-  const { assessment, cycle, data } = props
+  const { assessment, cycle, countryISOs, data, tableNames } = props
   const { name: assessmentName } = assessment.props
   const { name: cycleName } = cycle
 
-  const countryData = await DataRepository.getTableDataLastApproved(props, client)
-  const lastApprovedData = { [assessmentName]: { [cycleName]: countryData } }
+  let dataLastApproved = await DataRepository.getTableDataLastApproved(props, client)
 
-  // TODO: merge with odp
+  const tables = getTablesCondition({ tableNames, mergeOdp: true })
+  if (tables[TableNames.originalDataPointValue]) {
+    const odpDataLastApproved = await DataRepository.getOriginalDataPointDataLastApproved(props, client)
+    dataLastApproved = Objects.merge(dataLastApproved, odpDataLastApproved)
 
-  return Objects.merge(data, lastApprovedData)
+    await mergeOdpCountryData({ assessment, cycle, countryISOs, data: dataLastApproved, tables }, client)
+  }
+
+  return Objects.merge(data, { [assessmentName]: { [cycleName]: dataLastApproved } })
 }
diff --git a/src/server/controller/cycleData/tableData/_mergeOdpCountryData.ts b/src/server/controller/cycleData/tableData/_mergeOdpCountryData.ts
new file mode 100644
index 0000000000..b3ef7f432f
--- /dev/null
+++ b/src/server/controller/cycleData/tableData/_mergeOdpCountryData.ts
@@ -0,0 +1,49 @@
+import { Objects } from 'utils/objects'
+
+import { CountryIso } from 'meta/area'
+import { Assessment, Cycle, TableNames } from 'meta/assessment'
+import { RecordCountryData, TablesCondition } from 'meta/data'
+
+import { BaseProtocol } from 'server/db'
+import { CountryRepository } from 'server/repository/assessmentCycle/country'
+
+type Props = {
+  assessment: Assessment
+  cycle: Cycle
+  countryISOs: Array<CountryIso>
+  data: RecordCountryData
+  tables: TablesCondition
+}
+
+type PropsInnerMerge = {
+  countryIso: CountryIso
+  data: RecordCountryData
+  tableName: TableNames.extentOfForest | TableNames.forestCharacteristics
+}
+
+const _mergeODPTable = (props: PropsInnerMerge): void => {
+  const { countryIso, data, tableName } = props
+
+  const odpData = data?.[countryIso]?.[TableNames.originalDataPointValue]
+  if (odpData) {
+    const dataMerged = { ...data[countryIso][tableName], ...odpData }
+    Objects.setInPath({ obj: data, path: [countryIso, tableName], value: dataMerged })
+  }
+}
+
+export const mergeOdpCountryData = async (props: Props, client: BaseProtocol): Promise<void> => {
+  const { assessment, countryISOs, cycle, data, tables } = props
+
+  // TODO: add country cache and add AreaRedisRepository.getCountriesRecord()
+  const countries = await CountryRepository.getManyRecord({ assessment, cycle }, client)
+
+  countryISOs.forEach((countryIso) => {
+    const country = countries[countryIso]
+    if (tables[TableNames.extentOfForest]) {
+      _mergeODPTable({ countryIso, data, tableName: TableNames.extentOfForest })
+    }
+    if (tables[TableNames.forestCharacteristics] && country.props.forestCharacteristics.useOriginalDataPoint) {
+      _mergeODPTable({ countryIso, data, tableName: TableNames.forestCharacteristics })
+    }
+  })
+}
diff --git a/src/server/repository/assessment/assessment/getCreateSchemaDDL.ts b/src/server/repository/assessment/assessment/getCreateSchemaDDL.ts
index cc685cde90..38801bf7ab 100644
--- a/src/server/repository/assessment/assessment/getCreateSchemaDDL.ts
+++ b/src/server/repository/assessment/assessment/getCreateSchemaDDL.ts
@@ -1,6 +1,8 @@
 import { Assessment, Cycle } from 'meta/assessment'
 
 import { Schemas } from 'server/db'
+import { NodeExtQueries } from 'server/repository/assessmentCycle/nodeExt/queries'
+import { OriginalDataPointQueries } from 'server/repository/assessmentCycle/originalDataPoint/queries'
 
 export const getCreateSchemaDDL = (schemaName: string): string => {
   const query = `
@@ -301,25 +303,10 @@ export const getCreateSchemaCycleDDL = (assessmentSchemaName: string, assessment
 export const getCreateSchemaCycleOriginalDataPointViewDDL = (assessmentCycleSchemaName: string): string => {
   return `
       create or replace view ${assessmentCycleSchemaName}.original_data_point_data as
-      with total_land_area as (select country_iso,
-                                      r.props ->> 'variableName' as variable_name,
-                                      r.props ->> 'tableName'    as table_name,
-                                      r.props ->> 'colName'      as col_name,
-                                      r.value ->> 'raw'          as value
-                               from ${assessmentCycleSchemaName}.node_ext r
-                               where type = 'node'
-                                 and r.props ->> 'variableName' = 'totalLandArea'
-                                 and r.props ->> 'tableName' = 'extentOfForest'),
+      with total_land_area as (${NodeExtQueries.getTotalLandArea(assessmentCycleSchemaName)}),
            other_land as (select odp.country_iso,
                                  odp.year,
-                                 case
-                                     when (odp.values ->> 'forestArea')::numeric is not null or
-                                          (odp.values ->> 'otherWoodedLand')::numeric is not null then
-                                         (tla.value)::double precision -
-                                         coalesce((odp.values ->> 'forestArea')::numeric, 0)::double precision -
-                                         coalesce((odp.values ->> 'otherWoodedLand')::numeric, 0)::double precision
-                                     else null
-                                     end as other_land
+                                 ${OriginalDataPointQueries.getOtherLand(`odp.values`)}
                           from ${assessmentCycleSchemaName}.original_data_point odp
                                    left join total_land_area tla
                                              on odp.country_iso = tla.country_iso and odp.year::text = tla.col_name)
diff --git a/src/server/repository/assessmentCycle/data/getOriginalDataPointData.ts b/src/server/repository/assessmentCycle/data/getOriginalDataPointData.ts
index 672b2295da..ee07c44f54 100644
--- a/src/server/repository/assessmentCycle/data/getOriginalDataPointData.ts
+++ b/src/server/repository/assessmentCycle/data/getOriginalDataPointData.ts
@@ -5,6 +5,7 @@ import { Assessment, Cycle } from 'meta/assessment'
 import { RecordCountryData } from 'meta/data'
 
 import { BaseProtocol, DB, Schemas } from 'server/db'
+import { OriginalDataPointQueries } from 'server/repository/assessmentCycle/originalDataPoint/queries'
 
 type Props = {
   assessment: Assessment
@@ -14,37 +15,12 @@ type Props = {
 
 export const getOriginalDataPointData = (props: Props, client: BaseProtocol = DB): Promise<RecordCountryData> => {
   const { assessment, cycle, countryISOs } = props
+
   const schemaCycle = Schemas.getNameCycle(assessment, cycle)
+  const selectFrom = `${schemaCycle}.original_data_point_data`
 
   return client.one<RecordCountryData>(
-    `
-        with data as (
-            select o.country_iso,
-                   jsonb_object_agg(
-                           o.year,
-                           json_build_object(
-                                   'forest_area', json_build_object('raw', o.forest_area::varchar, 'odp', true, 'odpId', o.id::numeric),
-                                   'other_wooded_land', json_build_object('raw', o.other_wooded_land::varchar, 'odp', true, 'odpId', o.id::numeric),
-                                   'natural_forest_area', json_build_object('raw', o.natural_forest_area::varchar, 'odp', true, 'odpId', o.id::numeric),
-                                   'plantation_forest_area', json_build_object('raw', o.plantation_forest_area::varchar, 'odp', true, 'odpId', o.id::numeric),
-                                   'plantation_forest_introduced_area', json_build_object('raw', o.plantation_forest_introduced_area::varchar, 'odp', true, 'odpId', o.id::numeric),
-                                   'other_planted_forest_area', json_build_object('raw', o.other_planted_forest_area::varchar, 'odp', true, 'odpId', o.id::numeric),
-                                   'planted_forest', json_build_object('raw', o.planted_forest::varchar, 'odp', true, 'odpId', o.id::numeric),
-                                   'total', json_build_object('raw', o.total::varchar, 'odp', true, 'odpId', o.id::numeric),
-                                   'total_land_area', json_build_object('raw', o.total_land_area::varchar, 'odp', true, 'odpId', o.id::numeric),
-                                   'other_land', json_build_object('raw', o.other_land::varchar, 'odp', true, 'odpId', o.id::numeric),
-                                   'total_forest_area', json_build_object('raw', o.total_forest_area::varchar, 'odp', true, 'odpId', o.id::numeric),
-                                   'primary_forest', json_build_object('raw', o.primary_forest::varchar, 'odp', true, 'odpId', o.id::numeric)
-                               )
-                       ) as values
-        from ${schemaCycle}.original_data_point_data o
-        where o.year is not null
-          and o.country_iso in ($1:list)
-        group by o.country_iso
-            )
-        select jsonb_object_agg(d.country_iso, json_build_object('original_data_point_value', d.values)) as data
-        from data d;
-    `,
+    OriginalDataPointQueries.getOriginalDataPointData({ countryISOs, selectFrom }),
     [countryISOs],
     ({ data }) => Objects.camelize(data)
   )
diff --git a/src/server/repository/assessmentCycle/data/getOriginalDataPointDataLastApproved.ts b/src/server/repository/assessmentCycle/data/getOriginalDataPointDataLastApproved.ts
new file mode 100644
index 0000000000..33b89683c9
--- /dev/null
+++ b/src/server/repository/assessmentCycle/data/getOriginalDataPointDataLastApproved.ts
@@ -0,0 +1,86 @@
+import { Objects } from 'utils/objects'
+
+import { CountryIso } from 'meta/area'
+import { ActivityLogMessage, Assessment, Cycle, Cycles } from 'meta/assessment'
+import { RecordAssessmentData } from 'meta/data'
+
+import { BaseProtocol, DB, Schemas } from 'server/db'
+import { NodeExtQueries } from 'server/repository/assessmentCycle/nodeExt/queries'
+import { OriginalDataPointQueries } from 'server/repository/assessmentCycle/originalDataPoint/queries'
+
+type Props = {
+  assessment: Assessment
+  countryISOs: Array<CountryIso>
+  cycle: Cycle
+}
+
+const _getPrevCycleODPData = (props: Props): string => {
+  const { assessment, countryISOs, cycle } = props
+  const previousCycle = Cycles.getPreviousCycle({ assessment, cycle })
+
+  if (Objects.isNil(previousCycle)) return ``
+
+  return `union
+      select odpd.country_iso
+           , odpd.year
+           , odpd.forest_area
+           , odpd.other_wooded_land
+           , odpd.natural_forest_area
+           , odpd.plantation_forest_area
+           , odpd.plantation_forest_introduced_area
+           , odpd.other_planted_forest_area
+           , odpd.planted_forest
+           , odpd.total
+           , odpd.total_land_area
+           , odpd.other_land
+           , odpd.total_forest_area
+           , odpd.primary_forest
+           , odpd.id
+      from ${Schemas.getNameCycle(assessment, previousCycle)}.original_data_point_data odpd
+      where country_iso in ('${countryISOs.map((c) => `${c}`).join(',')}')
+        -- exclude modified odp from history
+        and odpd.year not in (select distinct (ao.target ->> 'year')::integer from activities_odp ao)`
+}
+
+export const getOriginalDataPointDataLastApproved = async (
+  props: Props,
+  client: BaseProtocol = DB
+): Promise<RecordAssessmentData> => {
+  const { assessment, cycle } = props
+  const schemaCycle = Schemas.getNameCycle(assessment, cycle)
+
+  const activities = `
+      with activities as (${OriginalDataPointQueries.getLastAcceptedActivity(props)})
+         , activities_odp as
+          (select *
+           from activities a
+           where a.row_number = 1)
+         , total_land_area as (${NodeExtQueries.getTotalLandArea(schemaCycle)})
+-- create original_data_point_data table format from activities
+      select ao.country_iso
+           , (ao.target ->> 'year')::integer                                       as year
+           , (ao.target -> 'values' ->> 'forestArea')::numeric                     as forest_area
+           , (ao.target -> 'values' ->> 'otherWoodedLand')::numeric                as other_wooded_land
+           , (ao.target -> 'values' ->> 'naturalForestArea')::numeric              as natural_forest_area
+           , (ao.target -> 'values' ->> 'plantationForestArea')::numeric           as plantation_forest_area
+           , (ao.target -> 'values' ->> 'plantationForestIntroducedArea')::numeric as plantation_forest_introduced_area
+           , (ao.target -> 'values' ->> 'otherPlantedForestArea')::numeric         as other_planted_forest_area
+           , (ao.target -> 'values' ->> 'plantedForest')::numeric                  as planted_forest
+           , (ao.target -> 'values' ->> 'total')::numeric                          as total
+           , tla.value                                                             as total_land_area
+           , ${OriginalDataPointQueries.getOtherLand(`ao.target -> 'values'`)}
+           , (ao.target -> 'values' ->> 'totalForestArea')::numeric                as total_forest_area
+           , (ao.target -> 'values' ->> 'primaryForest')::numeric                  as primary_forest
+           , (ao.target ->> 'id')::integer                                         as id
+      from activities_odp ao
+               left join total_land_area tla on ao.country_iso = tla.country_iso and ao.target ->> 'year' = tla.col_name
+      -- excluding removed ODPs
+      where ao.message <> '${ActivityLogMessage.originalDataPointRemove}'
+-- merge with prev cycle ODPs
+          ${_getPrevCycleODPData(props)}
+  `
+
+  const query = OriginalDataPointQueries.getOriginalDataPointData({ selectFrom: `(${activities})` })
+
+  return client.one<RecordAssessmentData>(query, [], ({ data }) => Objects.camelize(data))
+}
diff --git a/src/server/repository/assessmentCycle/data/index.ts b/src/server/repository/assessmentCycle/data/index.ts
index c9b45e8175..cae46a8819 100644
--- a/src/server/repository/assessmentCycle/data/index.ts
+++ b/src/server/repository/assessmentCycle/data/index.ts
@@ -2,6 +2,7 @@ import { clearTableData } from './clearTableData'
 import { createOrReplaceTableDataView } from './createOrReplaceTableDataView'
 import { getFaoEstimateData } from './getFaoEstimateData'
 import { getOriginalDataPointData } from './getOriginalDataPointData'
+import { getOriginalDataPointDataLastApproved } from './getOriginalDataPointDataLastApproved'
 import { getTableData } from './getTableData'
 import { getTableDataLastApproved } from './getTableDataLastApproved'
 
@@ -10,6 +11,7 @@ export const DataRepository = {
   createOrReplaceTableDataView,
   getFaoEstimateData,
   getOriginalDataPointData,
+  getOriginalDataPointDataLastApproved,
   getTableData,
   getTableDataLastApproved,
 }
diff --git a/src/server/repository/assessmentCycle/nodeExt/queries/_totalLandArea.ts b/src/server/repository/assessmentCycle/nodeExt/queries/_totalLandArea.ts
new file mode 100644
index 0000000000..0103310132
--- /dev/null
+++ b/src/server/repository/assessmentCycle/nodeExt/queries/_totalLandArea.ts
@@ -0,0 +1,13 @@
+import { TableNames } from 'meta/assessment'
+
+export const getTotalLandArea = (schema: string): string => {
+  return `select country_iso,
+          r.props ->> 'variableName' as variable_name,
+          r.props ->> 'tableName'    as table_name,
+          r.props ->> 'colName'      as col_name,
+          r.value ->> 'raw'          as value
+   from ${schema}.node_ext r
+   where type = 'node'
+     and r.props ->> 'variableName' = 'totalLandArea'
+     and r.props ->> 'tableName' = '${TableNames.extentOfForest}'`
+}
diff --git a/src/server/repository/assessmentCycle/nodeExt/queries/index.ts b/src/server/repository/assessmentCycle/nodeExt/queries/index.ts
new file mode 100644
index 0000000000..cf740c83bf
--- /dev/null
+++ b/src/server/repository/assessmentCycle/nodeExt/queries/index.ts
@@ -0,0 +1,5 @@
+import { getTotalLandArea } from './_totalLandArea'
+
+export const NodeExtQueries = {
+  getTotalLandArea,
+}
diff --git a/src/server/repository/assessmentCycle/originalDataPoint/queries/_originalDataPointData.ts b/src/server/repository/assessmentCycle/originalDataPoint/queries/_originalDataPointData.ts
new file mode 100644
index 0000000000..f291a292bd
--- /dev/null
+++ b/src/server/repository/assessmentCycle/originalDataPoint/queries/_originalDataPointData.ts
@@ -0,0 +1,58 @@
+import { Objects } from 'utils/objects'
+
+import { CountryIso } from 'meta/area'
+
+export const getOriginalDataPointData = (props: { selectFrom: string; countryISOs?: Array<CountryIso> }): string => {
+  const { selectFrom, countryISOs } = props
+
+  return `
+      with data as
+               (select o.country_iso,
+                       jsonb_object_agg(
+                               o.year,
+                               json_build_object(
+                                       'forest_area',
+                                       json_build_object('raw', o.forest_area::varchar, 'odp', true, 'odpId',
+                                                         o.id::numeric),
+                                       'other_wooded_land',
+                                       json_build_object('raw', o.other_wooded_land::varchar, 'odp', true, 'odpId',
+                                                         o.id::numeric),
+                                       'natural_forest_area',
+                                       json_build_object('raw', o.natural_forest_area::varchar, 'odp', true, 'odpId',
+                                                         o.id::numeric),
+                                       'plantation_forest_area',
+                                       json_build_object('raw', o.plantation_forest_area::varchar, 'odp', true, 'odpId',
+                                                         o.id::numeric),
+                                       'plantation_forest_introduced_area',
+                                       json_build_object('raw', o.plantation_forest_introduced_area::varchar, 'odp',
+                                                         true, 'odpId', o.id::numeric),
+                                       'other_planted_forest_area',
+                                       json_build_object('raw', o.other_planted_forest_area::varchar, 'odp', true,
+                                                         'odpId', o.id::numeric),
+                                       'planted_forest',
+                                       json_build_object('raw', o.planted_forest::varchar, 'odp', true, 'odpId',
+                                                         o.id::numeric),
+                                       'total',
+                                       json_build_object('raw', o.total::varchar, 'odp', true, 'odpId', o.id::numeric),
+                                       'total_land_area',
+                                       json_build_object('raw', o.total_land_area::varchar, 'odp', true, 'odpId',
+                                                         o.id::numeric),
+                                       'other_land',
+                                       json_build_object('raw', o.other_land::varchar, 'odp', true, 'odpId',
+                                                         o.id::numeric),
+                                       'total_forest_area',
+                                       json_build_object('raw', o.total_forest_area::varchar, 'odp', true, 'odpId',
+                                                         o.id::numeric),
+                                       'primary_forest',
+                                       json_build_object('raw', o.primary_forest::varchar, 'odp', true, 'odpId',
+                                                         o.id::numeric)
+                               )
+                       ) as values
+                from ${selectFrom} o
+                where o.year is not null
+                  ${Objects.isEmpty(countryISOs) ? `` : `and o.country_iso in ($1:list)`}
+                group by o.country_iso)
+      select jsonb_object_agg(d.country_iso, json_build_object('original_data_point_value', d.values)) as data
+      from data d
+  `
+}
diff --git a/src/server/repository/assessmentCycle/originalDataPoint/queries/_otherLand.ts b/src/server/repository/assessmentCycle/originalDataPoint/queries/_otherLand.ts
new file mode 100644
index 0000000000..5a6ec12a0b
--- /dev/null
+++ b/src/server/repository/assessmentCycle/originalDataPoint/queries/_otherLand.ts
@@ -0,0 +1,9 @@
+export const getOtherLand = (colValue: string): string => {
+  return `case
+                 when (${colValue} ->> 'forestArea')::numeric is not null or
+                      (${colValue} ->> 'otherWoodedLand')::numeric is not null then
+                     (tla.value)::double precision -
+                     coalesce((${colValue} ->> 'forestArea')::numeric, 0)::double precision -
+                     coalesce((${colValue} ->> 'otherWoodedLand')::numeric, 0)::double precision
+          end                                                                      as other_land`
+}
diff --git a/src/server/repository/assessmentCycle/originalDataPoint/queries/index.ts b/src/server/repository/assessmentCycle/originalDataPoint/queries/index.ts
index 87fd7b4c3b..5904fad51a 100644
--- a/src/server/repository/assessmentCycle/originalDataPoint/queries/index.ts
+++ b/src/server/repository/assessmentCycle/originalDataPoint/queries/index.ts
@@ -1,5 +1,9 @@
 import { getLastAcceptedActivity } from './_lastAcceptedActivity'
+import { getOriginalDataPointData } from './_originalDataPointData'
+import { getOtherLand } from './_otherLand'
 
 export const OriginalDataPointQueries = {
   getLastAcceptedActivity,
+  getOtherLand,
+  getOriginalDataPointData,
 }

From e62cb08e5b2553328402eb640c50e05b376da053 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Sorja?= <ping@mirosorja.com>
Date: Thu, 13 Feb 2025 15:48:18 +0200
Subject: [PATCH 35/38] 4342 - Show diffs after table loaded (#4366)

* 4342 - useHistoryLastApprovedDataTableFetched: accept tableName

* 4342 - API: getTableDataHistory: default to {}

* 4342 - move getInfo to controller

* 4342 - useHistoryLastApprovedDataTableFetched: check if object path is nil

* 4342 - fix description history default value
---
 .../DataTable/Table/RowData/Cell/Cell.tsx     |  2 +-
 .../hooks/useLastApprovedHistoryTableData.ts  |  9 +++--
 src/meta/assessment/commentableDescription.ts |  2 +-
 .../descriptions/getDescriptionsHistory.ts    |  9 +----
 .../cycleData/table/getTableDataHistory.ts    |  9 +----
 .../getDescriptionsLastApproved.ts            | 10 +++--
 .../tableData/_lastApproved/_prevCycle.ts     |  3 +-
 .../tableData/_lastApproved/_types.ts         |  6 +--
 .../_lastApproved/getTableDataLastApproved.ts | 40 ++++++++++++++++---
 9 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx b/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
index b60b055ca1..e6db6dd2a6 100644
--- a/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
+++ b/src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.tsx
@@ -85,7 +85,7 @@ const Cell: React.FC<Props> = (props) => {
   const disabled = disabledProps || !!nodeValue?.odpId || Cols.hasLinkedNodes({ col, cycle })
 
   const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
-  const historyLastApprovedDataTableFetched = useHistoryLastApprovedDataTableFetched()
+  const historyLastApprovedDataTableFetched = useHistoryLastApprovedDataTableFetched(table.props.name)
   const displayHistory = historyLastApprovedIsActive && historyLastApprovedDataTableFetched && !Cols.isPlaceholder(col)
 
   const Component = displayHistory ? History : Components[col.props.colType]
diff --git a/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts b/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts
index 7b47aa5458..0440049def 100644
--- a/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts
+++ b/src/client/store/data/hooks/useLastApprovedHistoryTableData.ts
@@ -8,6 +8,7 @@ import { RecordAssessmentData, RecordAssessmentDatas } from 'meta/data'
 
 import { useAppSelector } from 'client/store'
 import { DataSelector } from 'client/store/data/selectors'
+import { useCountryRouteParams } from 'client/hooks/useRouteParams'
 
 type PropsNodeValue = {
   assessmentName: AssessmentName
@@ -32,10 +33,12 @@ export const useLastApprovedHistoryNodeValue = (props: PropsNodeValue): NodeValu
   }, [assessmentName, colName, countryIso, cycleName, data, tableName, variableName])
 }
 
-export const useHistoryLastApprovedDataTableFetched = (): boolean => {
+export const useHistoryLastApprovedDataTableFetched = (tableName: TableName): boolean => {
+  const { assessmentName, cycleName, countryIso } = useCountryRouteParams<CountryIso>()
   const data = useLastApprovedHistoryTableData()
 
   return useMemo<boolean>(() => {
-    return !Objects.isNil(data)
-  }, [data])
+    const path = [assessmentName, cycleName, countryIso, tableName]
+    return !Objects.isNil(Objects.getInPath(data, path))
+  }, [assessmentName, countryIso, cycleName, data, tableName])
 }
diff --git a/src/meta/assessment/commentableDescription.ts b/src/meta/assessment/commentableDescription.ts
index 108fe53514..b05c5f4a4e 100644
--- a/src/meta/assessment/commentableDescription.ts
+++ b/src/meta/assessment/commentableDescription.ts
@@ -44,4 +44,4 @@ export interface CommentableDescription {
 
 export type DescriptionValues = Record<CommentableDescriptionName, CommentableDescriptionValue>
 export type DescriptionSectionValues = Record<SectionName, DescriptionValues>
-export type DescriptionCountryValues = Record<CountryIso, DescriptionSectionValues>
+export type DescriptionCountryValues = { [key in CountryIso]?: DescriptionSectionValues }
diff --git a/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts b/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
index cd4bf4890c..86d734202d 100644
--- a/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
+++ b/src/server/api/cycleData/descriptions/getDescriptionsHistory.ts
@@ -1,5 +1,4 @@
 import { Response } from 'express'
-import { Objects } from 'utils/objects'
 
 import { CycleDataRequest } from 'meta/api/request'
 import { CommentableDescriptionName } from 'meta/assessment'
@@ -14,13 +13,9 @@ export const getDescriptionsHistory = async (req: Request, res: Response) => {
   try {
     const { assessmentName, cycleName, countryIso, sectionName } = req.query
     const { assessment, cycle } = await AssessmentController.getOneWithCycle({ assessmentName, cycleName })
-    const info = await CycleDataController.History.LastApproved.getInfo({ assessment, cycle, countryIso })
 
-    let descriptions = {}
-    if (!Objects.isNil(info)) {
-      const props = { assessment, cycle, countryIso, sectionName, info }
-      descriptions = await CycleDataController.Description.getDescriptionsLastApproved(props)
-    }
+    const props = { assessment, cycle, countryIso, sectionName }
+    const descriptions = await CycleDataController.Description.getDescriptionsLastApproved(props)
 
     Requests.send(res, descriptions)
   } catch (e) {
diff --git a/src/server/api/cycleData/table/getTableDataHistory.ts b/src/server/api/cycleData/table/getTableDataHistory.ts
index d08fb8458b..1092bdf430 100644
--- a/src/server/api/cycleData/table/getTableDataHistory.ts
+++ b/src/server/api/cycleData/table/getTableDataHistory.ts
@@ -1,5 +1,4 @@
 import { Response } from 'express'
-import { Objects } from 'utils/objects'
 
 import { CycleDataRequest } from 'meta/api/request'
 
@@ -15,13 +14,9 @@ export const getTableDataHistory = async (req: GetTableDataRequest, res: Respons
   try {
     const { countryIso, assessmentName, cycleName, tableNames } = req.query
     const { assessment, cycle } = await AssessmentController.getOneWithCycle({ assessmentName, cycleName })
-    const info = await CycleDataController.History.LastApproved.getInfo({ assessment, cycle, countryIso })
 
-    let tableData = {}
-    if (!Objects.isNil(info)) {
-      const props = { assessment, cycle, info, countryISOs: [countryIso], tableNames }
-      tableData = await CycleDataController.TableData.getTableDataLastApproved(props)
-    }
+    const props = { assessment, cycle, countryISOs: [countryIso], tableNames }
+    const tableData = await CycleDataController.TableData.getTableDataLastApproved(props)
 
     Requests.send(res, tableData)
   } catch (e) {
diff --git a/src/server/controller/cycleData/description/getDescriptionsLastApproved.ts b/src/server/controller/cycleData/description/getDescriptionsLastApproved.ts
index f413a84898..8e372f4a2e 100644
--- a/src/server/controller/cycleData/description/getDescriptionsLastApproved.ts
+++ b/src/server/controller/cycleData/description/getDescriptionsLastApproved.ts
@@ -2,8 +2,8 @@ import { Objects } from 'utils/objects'
 
 import { CountryIso } from 'meta/area'
 import { Assessment, Cycle, DescriptionCountryValues } from 'meta/assessment'
-import { HistoryLastApprovedInfo } from 'meta/cycleData/historyLastApproved'
 
+import { getInfo } from 'server/controller/cycleData/history/lastApproved'
 import { BaseProtocol, DB } from 'server/db'
 import { DescriptionRepository } from 'server/repository/assessmentCycle/descriptions'
 
@@ -11,15 +11,17 @@ type Props = {
   assessment: Assessment
   cycle: Cycle
   countryIso: CountryIso
-  sectionName?: string
-  info: HistoryLastApprovedInfo
+  sectionName: string
 }
 
 export const getDescriptionsLastApproved = async (
   props: Props,
   client: BaseProtocol = DB
 ): Promise<DescriptionCountryValues> => {
-  const { assessment, cycle, countryIso, sectionName, info } = props
+  const { assessment, cycle, countryIso, sectionName } = props
+  const info = await getInfo(props)
+
+  if (Objects.isNil(info)) return { [countryIso]: { [sectionName]: {} } }
   const { prevCycle, lastAccepted } = info
 
   let data: DescriptionCountryValues = {} as DescriptionCountryValues
diff --git a/src/server/controller/cycleData/tableData/_lastApproved/_prevCycle.ts b/src/server/controller/cycleData/tableData/_lastApproved/_prevCycle.ts
index 6f862e5a39..11c22c0e27 100644
--- a/src/server/controller/cycleData/tableData/_lastApproved/_prevCycle.ts
+++ b/src/server/controller/cycleData/tableData/_lastApproved/_prevCycle.ts
@@ -1,6 +1,7 @@
 import { Objects } from 'utils/objects'
 
 import { TableName } from 'meta/assessment'
+import { HistoryLastApprovedInfo } from 'meta/cycleData/historyLastApproved'
 import { RecordAssessmentData, RecordAssessmentDatas } from 'meta/data'
 
 import { getTableData } from 'server/controller/cycleData/getTableData'
@@ -10,7 +11,7 @@ import { TableRedisRepository } from 'server/repository/redis/table'
 
 import { PropsGetLastApproved } from './_types'
 
-type Props = PropsGetLastApproved & Pick<PropsGetTableData, 'mergeOdp'>
+type Props = PropsGetLastApproved & Pick<PropsGetTableData, 'mergeOdp'> & { info: HistoryLastApprovedInfo }
 
 export const getTableDataPrevCycle = async (props: Props, client: BaseProtocol = DB): Promise<RecordAssessmentData> => {
   const { assessment, cycle, countryISOs, info, mergeOdp, tableNames } = props
diff --git a/src/server/controller/cycleData/tableData/_lastApproved/_types.ts b/src/server/controller/cycleData/tableData/_lastApproved/_types.ts
index de5cf46928..e0ba5e6987 100644
--- a/src/server/controller/cycleData/tableData/_lastApproved/_types.ts
+++ b/src/server/controller/cycleData/tableData/_lastApproved/_types.ts
@@ -1,7 +1,3 @@
-import { HistoryLastApprovedInfo } from 'meta/cycleData/historyLastApproved'
-
 import { PropsGetTableData } from 'server/controller/cycleData/tableData/props'
 
-export type PropsGetLastApproved = Omit<PropsGetTableData, 'mergeOdp'> & {
-  info: HistoryLastApprovedInfo
-}
+export type PropsGetLastApproved = Omit<PropsGetTableData, 'mergeOdp'>
diff --git a/src/server/controller/cycleData/tableData/_lastApproved/getTableDataLastApproved.ts b/src/server/controller/cycleData/tableData/_lastApproved/getTableDataLastApproved.ts
index f03ac25d46..fef1923536 100644
--- a/src/server/controller/cycleData/tableData/_lastApproved/getTableDataLastApproved.ts
+++ b/src/server/controller/cycleData/tableData/_lastApproved/getTableDataLastApproved.ts
@@ -1,28 +1,58 @@
 import { Objects } from 'utils/objects'
 
-import { RecordAssessmentData } from 'meta/data'
+import { RecordAssessmentData, RecordAssessmentDatas } from 'meta/data'
 
+import { getInfo } from 'server/controller/cycleData/history/lastApproved'
 import { mergeWithLastApproved } from 'server/controller/cycleData/tableData/_lastApproved/_lastApproved'
 import { BaseProtocol, DB } from 'server/db'
 
 import { getTableDataPrevCycle } from './_prevCycle'
 import { PropsGetLastApproved } from './_types'
 
+// Sets default values for tableData
+const _withDefaults = (props: PropsGetLastApproved & { data: RecordAssessmentData }) => {
+  const { assessment, countryISOs, cycle, tableNames, data } = props
+  const [countryIso] = countryISOs
+
+  const { name: assessmentName } = assessment.props
+  const { name: cycleName } = cycle
+
+  tableNames.forEach((tableName) => {
+    const tableData = RecordAssessmentDatas.getTableData({ assessmentName, cycleName, countryIso, tableName, data })
+    if (Objects.isEmpty(tableData)) {
+      const path = [assessmentName, cycleName, countryIso, tableName]
+      const value = {}
+      Objects.setInPath({ path, obj: data, value })
+    }
+  })
+
+  return data
+}
+
 export const getTableDataLastApproved = async (
   props: PropsGetLastApproved,
   client: BaseProtocol = DB
 ): Promise<RecordAssessmentData> => {
-  const { info } = props
+  const { assessment, cycle, countryISOs } = props
+  const [countryIso] = countryISOs
+
+  const info = await getInfo({ assessment, cycle, countryIso })
+
+  if (Objects.isNil(info)) {
+    return _withDefaults({ ...props, data: {} })
+  }
+
   const { lastAccepted } = info
 
   const hasLastAccepted = !Objects.isNil(lastAccepted)
 
   // when has last accepted, odp gets manually merged later in mergeWithLastApproved
-  const data = await getTableDataPrevCycle({ ...props, mergeOdp: !hasLastAccepted }, client)
+  const data = await getTableDataPrevCycle({ ...props, info, mergeOdp: !hasLastAccepted }, client)
 
   if (hasLastAccepted) {
-    return mergeWithLastApproved({ ...props, data }, client)
+    const _data = await mergeWithLastApproved({ ...props, data }, client)
+    return _withDefaults({ ...props, data: _data })
   }
 
-  return data
+  return _withDefaults({ ...props, data })
 }

From 6aec02534a6c1988b4a45a6554cd92d4ee46cc60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Thu, 13 Feb 2025 11:49:34 -0500
Subject: [PATCH 36/38] 4350 - Data history: UI ODP diffs - Render logic
 (#4376)

* 4350 - Show odp diffs when data is fetched

* 4350 - Calculate diffs when data is fetched
---
 .../components/Comments/Comments.tsx             |  6 +++---
 .../AdditionalComments/AdditionalComments.tsx    |  6 +++---
 .../DataSources/MethodsUsed/MethodsUsed.tsx      |  6 +++---
 .../DataSources/References/References.tsx        |  6 +++---
 .../components/ExtentOfForest/ExtentOfForest.tsx | 12 ++++++------
 .../ExtentOfForest/ExtentOfForestRow.tsx         | 16 ++++++++--------
 .../hooks/useOtherLandPercentChange.ts           |  8 ++++----
 .../ExtentOfForest/hooks/useTotalsChange.ts      |  8 ++++----
 .../ForestCharacteristics.tsx                    | 12 ++++++------
 ...orestCharacteristicsNaturallyRegenerating.tsx |  8 ++++----
 ...stCharacteristicsNaturallyRegeneratingRow.tsx | 16 ++++++----------
 .../ForestCharacteristicsPlantation.tsx          |  8 ++++----
 .../ForestCharacteristicsPlantationRow.tsx       | 10 +++++-----
 .../ForestCharacteristicsRow.tsx                 | 16 ++++++++--------
 .../PrimaryForestPercent.tsx                     | 10 +++++-----
 .../hooks/usePrimaryForestPercentChange.ts       |  8 ++++----
 .../useForestCharacteristicsTotalsChange.ts      |  8 ++++----
 ...asNaturallyRegeneratingAndPlantationForest.ts |  8 ++++----
 .../hooks/useNationalClassForestAreaChange.ts    |  8 ++++----
 .../useNaturalForestPercentAndAreaChange.ts      |  8 ++++----
 ...useNaturalForestPercentAndAreaTotalsChange.ts |  8 ++++----
 .../usePlantationForestPercentAndAreaChange.ts   | 13 ++++---------
 .../hooks/usePlantationForestTotalsChange.ts     |  8 ++++----
 .../NationalClasses/components/NationalClass.tsx |  8 ++++----
 .../components/hooks/useODPDisplayHistory.ts     |  7 +++++++
 25 files changed, 115 insertions(+), 117 deletions(-)
 create mode 100644 src/client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory.ts

diff --git a/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx b/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx
index 89dde5feed..35b4da8300 100644
--- a/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx
+++ b/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx
@@ -3,12 +3,12 @@ import { useTranslation } from 'react-i18next'
 
 import classNames from 'classnames'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useIsDataLocked } from 'client/store/ui/dataLock'
 import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
 import Button, { ButtonSize } from 'client/components/Buttons/Button'
 import { DataCell, DataGrid, DataRow } from 'client/components/DataGrid'
 import EditorWYSIWYG from 'client/components/EditorWYSIWYG'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 
 import { useUpdateDescription } from './hooks/useUpdateDescription'
@@ -27,7 +27,7 @@ const Comments: React.FC<Props> = (props) => {
   const updateDescription = useUpdateDescription()
   const actions = useCommentsActions()
   const [open, setOpen] = useState<boolean>(false)
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   useEffect(() => {
     if (open && isDataLocked) {
@@ -55,7 +55,7 @@ const Comments: React.FC<Props> = (props) => {
       </DataRow>
 
       <DataCell editable={open} gridColumn={canEditData ? `1/-1` : undefined} lastCol lastRow noBorder={!open}>
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText originalDataPoint={originalDataPoint} path={['description']} />
         ) : (
           <div className={classNames('description__editor-container', { editable: open })}>
diff --git a/src/client/pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx b/src/client/pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx
index 55d876f86d..81d90ee37a 100644
--- a/src/client/pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx
+++ b/src/client/pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx
@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next'
 import { OriginalDataPoint } from 'meta/assessment'
 import { Topics } from 'meta/messageCenter'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { DataCell, DataRow, DataRowAction, DataRowActionType } from 'client/components/DataGrid'
 import TextArea from 'client/components/Inputs/TextArea'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
@@ -25,7 +25,7 @@ const AdditionalComments: React.FC<Props> = (props: Props) => {
   const disabled = useIsDisabled()
   const updateOriginalDataPoint = useUpdateDataSources()
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const onChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(
     (event) => {
@@ -62,7 +62,7 @@ const AdditionalComments: React.FC<Props> = (props: Props) => {
         {t('nationalDataPoint.additionalComments')}
       </DataCell>
       <DataCell lastCol lastRow>
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText
             className="input-text disabled"
             originalDataPoint={originalDataPoint}
diff --git a/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx b/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx
index 647932babd..b298b1cd13 100644
--- a/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx
+++ b/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx
@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next'
 import { ODPDataSourceMethod, OriginalDataPoint } from 'meta/assessment/originalDataPoint'
 import { Topics } from 'meta/messageCenter'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { DataCell, DataRow, DataRowAction, DataRowActionType } from 'client/components/DataGrid'
 import Select, { Option } from 'client/components/Inputs/Select'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
@@ -26,7 +26,7 @@ const MethodsUsed: React.FC<Props> = (props: Props) => {
   const reviewIndicator = useShowReviewIndicator()
   const disabled = useIsDisabled()
   const updateOriginalDataPoint = useUpdateDataSources()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const options = useMemo<Array<Option>>(
     () =>
@@ -61,7 +61,7 @@ const MethodsUsed: React.FC<Props> = (props: Props) => {
     <DataRow actions={actions}>
       <DataCell header>{t('nationalDataPoint.methodsUsed')}</DataCell>
       <DataCell lastCol>
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText
             className="input-text disabled"
             originalDataPoint={originalDataPoint}
diff --git a/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx b/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx
index 777d9c389f..42c29ceca4 100644
--- a/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx
+++ b/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx
@@ -6,9 +6,9 @@ import { Objects } from 'utils/objects'
 import { OriginalDataPoint } from 'meta/assessment'
 import { Topics } from 'meta/messageCenter'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { DataCell, DataRow, DataRowAction, DataRowActionType } from 'client/components/DataGrid'
 import { EditorWYSIWYGLinks } from 'client/components/EditorWYSIWYG'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
@@ -27,7 +27,7 @@ const References: React.FC<Props> = (props: Props) => {
 
   const reviewIndicator = useShowReviewIndicator()
   const disabled = useIsDisabled()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const updateOriginalDataPoint = useUpdateDataSources()
 
@@ -56,7 +56,7 @@ const References: React.FC<Props> = (props: Props) => {
     <DataRow actions={actions}>
       <DataCell header>{t('nationalDataPoint.references')}</DataCell>
       <DataCell lastCol>
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText
             className="input-text disabled"
             originalDataPoint={originalDataPoint}
diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx
index 053f85821c..dba9c83406 100644
--- a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx
@@ -5,12 +5,12 @@ import { Numbers } from 'utils/numbers'
 
 import { ODPs, OriginalDataPoint } from 'meta/assessment/originalDataPoint'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useIsPrintRoute } from 'client/hooks/useIsRoute'
 import { useCycleRouteParams } from 'client/hooks/useRouteParams'
 import ButtonTableExport from 'client/components/ButtonTableExport'
 import DefinitionLink from 'client/components/DefinitionLink'
 import DiffText from 'client/components/DiffText'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 import { useTotalsChange } from './hooks/useTotalsChange'
 import ExtentOfForestRow from './ExtentOfForestRow'
@@ -44,7 +44,7 @@ const ExtentOfForest: React.FC<Props> = (props) => {
   )
   const totalLandArea = Numbers.format(ODPs.calcTotalLandArea({ originalDataPoint }))
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const _totals = { totalArea, totalForestPercentArea, totalLandArea, totalOtherWoodedLandPercentArea }
   const totalsChange = useTotalsChange(_totals)
@@ -112,24 +112,24 @@ const ExtentOfForest: React.FC<Props> = (props) => {
               <tr>
                 <th className="fra-table__header-cell-left">{t('nationalDataPoint.total')}</th>
                 <td className="fra-table__calculated-cell fra-table__divider">
-                  {historyLastApprovedIsActive ? <DiffText changes={totalsChange?.totalArea} /> : totalArea}
+                  {displayHistory ? <DiffText changes={totalsChange?.totalArea} /> : totalArea}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {historyLastApprovedIsActive ? (
+                  {displayHistory ? (
                     <DiffText changes={totalsChange?.totalForestPercentArea} />
                   ) : (
                     totalForestPercentArea
                   )}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {historyLastApprovedIsActive ? (
+                  {displayHistory ? (
                     <DiffText changes={totalsChange?.totalOtherWoodedLandPercentArea} />
                   ) : (
                     totalOtherWoodedLandPercentArea
                   )}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {historyLastApprovedIsActive ? <DiffText changes={totalsChange?.totalLandArea} /> : totalLandArea}
+                  {displayHistory ? <DiffText changes={totalsChange?.totalLandArea} /> : totalLandArea}
                 </td>
               </tr>
             </tbody>
diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
index 3e0ca86005..086181b809 100644
--- a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
@@ -9,11 +9,11 @@ import { Topics } from 'meta/messageCenter'
 import { TooltipId } from 'meta/tooltip'
 
 import { useCycle } from 'client/store/assessment'
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import DiffText from 'client/components/DiffText'
 import PercentInput from 'client/components/PercentInput'
 import ReviewIndicator from 'client/components/ReviewIndicator'
 import ThousandSeparatedDecimalInput from 'client/components/ThousandSeparatedDecimalInput'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import { Columns, useOnPaste } from 'client/pages/OriginalDataPoint/components/hooks/useOnPaste'
 import { useUpdateOriginalData } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalData'
 import { useUpdateOriginalDataField } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalDataField'
@@ -49,7 +49,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
   const target = [originalDataPoint.id, 'class', `${uuid}`, 'value'] as string[]
   const classNameRowComments = useNationalClassNameComments(target)
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   let validationErrorMessage = useNationalClassValidations({
     index,
@@ -57,7 +57,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
     variable: 'validExtentOfForestPercentage',
   })
 
-  validationErrorMessage = historyLastApprovedIsActive ? null : validationErrorMessage
+  validationErrorMessage = displayHistory ? null : validationErrorMessage
 
   const otherLandPercent = ODPs.calculateNationalClassOtherLandPercent(nationalClass)
 
@@ -75,7 +75,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
   return (
     <tr className={classNameRowComments}>
       <th className="fra-table__category-cell">
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText originalDataPoint={originalDataPoint} path={['nationalClasses', index, 'name']} />
         ) : (
           name
@@ -86,7 +86,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
           error: !nationalClassValidation.validArea,
         })}
       >
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText
             className="odp-data-input-diff"
             format="decimal"
@@ -117,7 +117,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <div className="odp-percent-diff">
             <ODPDiffText
               format="percent"
@@ -148,7 +148,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <div className="odp-percent-diff">
             <ODPDiffText
               format="percent"
@@ -175,7 +175,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
       </td>
 
       <td className="fra-table__calculated-cell">
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <div className="odp-calculated-percent-diff">
             <DiffText changes={otherLandPercentChange} />
             <span>%</span>
diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts
index 2cc4b8009b..cc1d8cbbfd 100644
--- a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts
@@ -6,8 +6,8 @@ import { Objects } from 'utils/objects'
 
 import { ODPs } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 type Props = {
   nationalClassIndex: number
@@ -20,16 +20,16 @@ export const useOtherLandPercentChange = (props: Props): Returned => {
   const { nationalClassIndex, otherLandPercent: otherLandPercentCurrent } = props
 
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
   const nationalClass = originalDataPointHistory?.nationalClasses?.[nationalClassIndex]
 
   return useMemo<Returned>(() => {
-    if (!historyLastApprovedIsActive) return undefined
+    if (!displayHistory) return undefined
 
     const canCalculate = !Objects.isEmpty(nationalClass)
 
     const otherLandPercentPrev = canCalculate ? ODPs.calculateNationalClassOtherLandPercent(nationalClass) : null
 
     return Diff.diffLines(otherLandPercentPrev ?? '', otherLandPercentCurrent ?? '')
-  }, [historyLastApprovedIsActive, nationalClass, otherLandPercentCurrent])
+  }, [displayHistory, nationalClass, otherLandPercentCurrent])
 }
diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts
index f3d096ef29..ea13af3d7d 100644
--- a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts
@@ -7,8 +7,8 @@ import { Objects } from 'utils/objects'
 
 import { ODPs } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 type Props = {
   totalArea: string | null
@@ -32,10 +32,10 @@ export const useTotalsChange = (props: Props): Returned => {
   } = props
 
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   return useMemo<Returned>(() => {
-    if (!historyLastApprovedIsActive) return undefined
+    if (!displayHistory) return undefined
 
     const canCalculate = !Objects.isEmpty(originalDataPointHistory)
 
@@ -66,7 +66,7 @@ export const useTotalsChange = (props: Props): Returned => {
 
     return { totalArea, totalForestPercentArea, totalLandArea, totalOtherWoodedLandPercentArea }
   }, [
-    historyLastApprovedIsActive,
+    displayHistory,
     originalDataPointHistory,
     totalAreaCurrent,
     totalForestPercentAreaCurrent,
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx
index 07c7fdf8bf..1a204b014b 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx
@@ -5,12 +5,12 @@ import { Numbers } from 'utils/numbers'
 
 import { ODPs, OriginalDataPoint } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useIsPrintRoute } from 'client/hooks/useIsRoute'
 import { useCycleRouteParams } from 'client/hooks/useRouteParams'
 import ButtonTableExport from 'client/components/ButtonTableExport'
 import DefinitionLink from 'client/components/DefinitionLink'
 import DiffText from 'client/components/DiffText'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 import { useForestCharacteristicsTotalsChange } from './hooks/useForestCharacteristicsTotalsChange'
 import { useHistoryHasNaturallyRegeneratingAndPlantationForest } from './hooks/useHistoryHasNaturallyRegeneratingAndPlantationForest'
@@ -57,7 +57,7 @@ const ForestCharacteristics: React.FC<Props> = (props) => {
     })
   )
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const totalsChange = useForestCharacteristicsTotalsChange({
     totalForestNaturalPercentArea,
@@ -150,28 +150,28 @@ const ForestCharacteristics: React.FC<Props> = (props) => {
               <tr>
                 <th className="fra-table__header-cell-left">{t('nationalDataPoint.total')}</th>
                 <th className="fra-table__calculated-cell fra-table__divider">
-                  {historyLastApprovedIsActive ? (
+                  {displayHistory ? (
                     <DiffText changes={totalsChange?.totalForestPercentArea} />
                   ) : (
                     totalForestPercentArea
                   )}
                 </th>
                 <td className="fra-table__calculated-cell">
-                  {historyLastApprovedIsActive ? (
+                  {displayHistory ? (
                     <DiffText changes={totalsChange?.totalForestNaturalPercentArea} />
                   ) : (
                     totalForestNaturalPercentArea
                   )}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {historyLastApprovedIsActive ? (
+                  {displayHistory ? (
                     <DiffText changes={totalsChange?.totalForestPlantationPercentArea} />
                   ) : (
                     totalForestPlantationPercentArea
                   )}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {historyLastApprovedIsActive ? (
+                  {displayHistory ? (
                     <DiffText changes={totalsChange?.totalOtherPlantedForestPercentArea} />
                   ) : (
                     totalOtherPlantedForestPercentArea
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegenerating.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegenerating.tsx
index 170646e202..9e58cc1e61 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegenerating.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegenerating.tsx
@@ -5,9 +5,9 @@ import { Numbers } from 'utils/numbers'
 
 import { ODPs } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
 import DiffText from 'client/components/DiffText'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 import { useNaturalForestPercentAndAreaTotalsChange } from './hooks/useNaturalForestPercentAndAreaTotalsChange'
 import ForestCharacteristicsNaturallyRegeneratingRow from './ForestCharacteristicsNaturallyRegeneratingRow'
@@ -38,7 +38,7 @@ const ForestCharacteristicsNaturallyRegenerating: React.FC<Props> = (props) => {
     originalDataPoint?.values.primaryForest &&
     Numbers.format(Numbers.toBigNumber(originalDataPoint.values.primaryForest))
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const totalsChange = useNaturalForestPercentAndAreaTotalsChange({
     totalForestNaturalPercentArea,
@@ -74,14 +74,14 @@ const ForestCharacteristicsNaturallyRegenerating: React.FC<Props> = (props) => {
             <tr>
               <th className="fra-table__header-cell-left">{t('nationalDataPoint.total')}</th>
               <th className="fra-table__calculated-cell fra-table__divider">
-                {historyLastApprovedIsActive ? (
+                {displayHistory ? (
                   <DiffText changes={totalsChange?.forestNaturalPercentArea} />
                 ) : (
                   totalForestNaturalPercentArea
                 )}
               </th>
               <td className="fra-table__calculated-cell">
-                {historyLastApprovedIsActive ? (
+                {displayHistory ? (
                   <DiffText changes={totalsChange?.primaryForestNaturalPercentArea} />
                 ) : (
                   totalPrimaryForestNaturalPercentArea
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegeneratingRow.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegeneratingRow.tsx
index 454be39a33..8b440f2e47 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegeneratingRow.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegeneratingRow.tsx
@@ -8,11 +8,11 @@ import { ODPs, SectionNames } from 'meta/assessment'
 import { Topics } from 'meta/messageCenter'
 import { TooltipId } from 'meta/tooltip'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
 import DiffText from 'client/components/DiffText'
 import PercentInput from 'client/components/PercentInput'
 import ReviewIndicator from 'client/components/ReviewIndicator'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import { Columns, useOnPaste } from 'client/pages/OriginalDataPoint/components/hooks/useOnPaste'
 import { useUpdateOriginalData } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalData'
 import { useUpdateOriginalDataField } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalDataField'
@@ -50,14 +50,14 @@ const ForestCharacteristicsNaturallyRegeneratingRow: React.FC<Props> = (props) =
     naturalForestPercentArea: ofWhichPrimary,
   })
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   let validationErrorMessage = useNationalClassValidations({
     index,
     originalDataPoint,
     variable: 'validPrimaryForest',
   })
-  validationErrorMessage = historyLastApprovedIsActive ? null : validationErrorMessage
+  validationErrorMessage = displayHistory ? null : validationErrorMessage
 
   const _onPaste = useOnPaste({
     columns,
@@ -77,18 +77,14 @@ const ForestCharacteristicsNaturallyRegeneratingRow: React.FC<Props> = (props) =
   return (
     <tr className={classNameRowComments}>
       <th className="fra-table__category-cell">
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText originalDataPoint={originalDataPoint} path={['nationalClasses', index, 'name']} />
         ) : (
           name
         )}
       </th>
       <th className="fra-table__calculated-sub-cell fra-table__divider">
-        {historyLastApprovedIsActive ? (
-          <DiffText changes={changes?.naturalForestPercentArea} />
-        ) : (
-          Numbers.format(ofWhichPrimary)
-        )}
+        {displayHistory ? <DiffText changes={changes?.naturalForestPercentArea} /> : Numbers.format(ofWhichPrimary)}
       </th>
       <td
         className={classNames(`fra-table__cell`, {
@@ -97,7 +93,7 @@ const ForestCharacteristicsNaturallyRegeneratingRow: React.FC<Props> = (props) =
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <div className="odp-percent-diff">
             <DiffText changes={changes?.naturalForestPercent} />
             <span>%</span>
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantation.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantation.tsx
index aa81860c64..7c25383aee 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantation.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantation.tsx
@@ -5,9 +5,9 @@ import { Numbers } from 'utils/numbers'
 
 import { ODPs } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
 import DiffText from 'client/components/DiffText'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 import { usePlantationForestTotalsChange } from './hooks/usePlantationForestTotalsChange'
 import ForestCharacteristicsPlantationRow from './ForestCharacteristicsPlantationRow'
@@ -44,7 +44,7 @@ const ForestCharacteristicsPlantation: React.FC<Props> = (props) => {
       })
     )
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const totalsChange = usePlantationForestTotalsChange({
     totalForestPlantationIntroducedPercentArea,
@@ -73,14 +73,14 @@ const ForestCharacteristicsPlantation: React.FC<Props> = (props) => {
             <tr>
               <th className="fra-table__header-cell-left">{t('nationalDataPoint.total')}</th>
               <th className="fra-table__calculated-cell fra-table__divider">
-                {historyLastApprovedIsActive ? (
+                {displayHistory ? (
                   <DiffText changes={totalsChange?.totalForestPlantationPercentArea} />
                 ) : (
                   totalForestPlantationPercentArea
                 )}
               </th>
               <td className="fra-table__calculated-cell">
-                {historyLastApprovedIsActive ? (
+                {displayHistory ? (
                   <DiffText changes={totalsChange?.totalForestPlantationIntroducedPercentArea} />
                 ) : (
                   totalForestPlantationIntroducedPercentArea
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantationRow.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantationRow.tsx
index 0c6597e0b8..d264f478b3 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantationRow.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantationRow.tsx
@@ -8,11 +8,11 @@ import { ODPNationalClass, ODPs, SectionNames } from 'meta/assessment'
 import { Topics } from 'meta/messageCenter'
 import { TooltipId } from 'meta/tooltip'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
 import DiffText from 'client/components/DiffText'
 import PercentInput from 'client/components/PercentInput'
 import ReviewIndicator from 'client/components/ReviewIndicator'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import { Columns, useOnPaste } from 'client/pages/OriginalDataPoint/components/hooks/useOnPaste'
 import { useUpdateOriginalData } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalData'
 import { useUpdateOriginalDataField } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalDataField'
@@ -46,14 +46,14 @@ const ForestCharacteristicsPlantationRow: React.FC<Props> = (props) => {
 
   const plantationIntroduced = ODPs.calculateNationalClassPlantationForestPercentArea(nationalClass)
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   let validationErrorMessage = useNationalClassValidations({
     index,
     originalDataPoint,
     variable: 'validForestPlantationIntroducedPercent',
   })
-  validationErrorMessage = historyLastApprovedIsActive ? null : validationErrorMessage
+  validationErrorMessage = displayHistory ? null : validationErrorMessage
 
   const _onPaste = useOnPaste({
     columns,
@@ -80,7 +80,7 @@ const ForestCharacteristicsPlantationRow: React.FC<Props> = (props) => {
     <tr className={classNameRowComments}>
       <th className="fra-table__category-cell">{name}</th>
       <th className="fra-table__calculated-sub-cell fra-table__divider">
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <DiffText changes={changes?.plantationIntroducedArea} />
         ) : (
           Numbers.format(plantationIntroduced)
@@ -93,7 +93,7 @@ const ForestCharacteristicsPlantationRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <div className="odp-percent-diff">
             <DiffText changes={changes?.forestPlantationIntroducedPercent} />
             <span>%</span>
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsRow.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsRow.tsx
index 36c0e794f6..d3173664e5 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsRow.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsRow.tsx
@@ -7,10 +7,10 @@ import { ODPNationalClass, ODPs, OriginalDataPoint, SectionNames } from 'meta/as
 import { Topics } from 'meta/messageCenter'
 import { TooltipId } from 'meta/tooltip'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import DiffText from 'client/components/DiffText'
 import PercentInput from 'client/components/PercentInput'
 import ReviewIndicator from 'client/components/ReviewIndicator'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import { Columns, useOnPaste } from 'client/pages/OriginalDataPoint/components/hooks/useOnPaste'
 import { useUpdateOriginalData } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalData'
 import { useUpdateOriginalDataField } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalDataField'
@@ -54,14 +54,14 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
   const updateOriginalDataField = useUpdateOriginalDataField()
   const updateOriginalData = useUpdateOriginalData()
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   let validationErrorMessage = useNationalClassValidations({
     index,
     originalDataPoint,
     variable: 'validForestCharacteristicsPercentage',
   })
-  validationErrorMessage = historyLastApprovedIsActive ? null : validationErrorMessage
+  validationErrorMessage = displayHistory ? null : validationErrorMessage
 
   const nationalClassForestArea = ODPs.calculateNationalClassForestArea(nationalClass)
   const nationalClassForestAreaChange = useNationalClassForestAreaChange({
@@ -78,7 +78,7 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
   return (
     <tr className={classNameRowComments}>
       <th className="fra-table__category-cell">
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText originalDataPoint={originalDataPoint} path={['nationalClasses', index, 'name']} />
         ) : (
           name
@@ -86,7 +86,7 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
       </th>
 
       <th className="fra-table__calculated-sub-cell fra-table__divider">
-        {historyLastApprovedIsActive ? <DiffText changes={nationalClassForestAreaChange} /> : nationalClassForestArea}
+        {displayHistory ? <DiffText changes={nationalClassForestAreaChange} /> : nationalClassForestArea}
       </th>
 
       <td
@@ -96,7 +96,7 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <div className="odp-percent-diff">
             <ODPDiffText
               format="percent"
@@ -129,7 +129,7 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <div className="odp-percent-diff">
             <ODPDiffText
               format="percent"
@@ -162,7 +162,7 @@ const ForestCharacteristicsRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <div className="odp-percent-diff">
             <ODPDiffText
               format="percent"
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/PrimaryForestPercent.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/PrimaryForestPercent.tsx
index 359f350f13..b307a5c52f 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/PrimaryForestPercent.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/PrimaryForestPercent.tsx
@@ -4,10 +4,10 @@ import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import { Numbers } from 'utils/numbers'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
 import DiffText from 'client/components/DiffText'
 import PercentInput from 'client/components/PercentInput'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 import { usePrimaryForestPercentChange } from './hooks/usePrimaryForestPercentChange'
 import { useShouldUseTotal } from './hooks/useShouldUseTotal'
@@ -26,7 +26,7 @@ const PrimaryForestPercent: React.FC<Props> = (props) => {
 
   const field = 'primaryForestPercent'
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const primaryForestPercentChange = usePrimaryForestPercentChange({
     primaryForestPercent: originalDataPoint?.values?.primaryForestPercent,
@@ -39,11 +39,11 @@ const PrimaryForestPercent: React.FC<Props> = (props) => {
       </th>
       <td
         className={classNames({
-          'fra-table__calculated-cell': !useTotal && !historyLastApprovedIsActive,
-          'fra-table__cell': useTotal || historyLastApprovedIsActive,
+          'fra-table__calculated-cell': !useTotal && !displayHistory,
+          'fra-table__cell': useTotal || displayHistory,
         })}
       >
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <div className="odp-percent-diff">
             <DiffText changes={primaryForestPercentChange} />
             <span>%</span>
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/hooks/usePrimaryForestPercentChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/hooks/usePrimaryForestPercentChange.ts
index dac4926979..c3a9f30756 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/hooks/usePrimaryForestPercentChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/PrimaryForestPercent/hooks/usePrimaryForestPercentChange.ts
@@ -4,8 +4,8 @@ import * as Diff from 'diff'
 import { Change } from 'diff'
 import { Numbers } from 'utils/numbers'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 type Props = {
   primaryForestPercent?: string
@@ -17,10 +17,10 @@ export const usePrimaryForestPercentChange = (props: Props): Returned => {
   const { primaryForestPercent: primaryForestPercentCurrent } = props
 
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   return useMemo<Returned>(() => {
-    if (!historyLastApprovedIsActive) return undefined
+    if (!displayHistory) return undefined
 
     const formattedPrimaryForestTotalPercentPrev = Numbers.toFixed(
       originalDataPointHistory?.values?.primaryForestPercent ?? '',
@@ -28,5 +28,5 @@ export const usePrimaryForestPercentChange = (props: Props): Returned => {
     )
     const formattedPrimaryForestPercentCurrent = Numbers.toFixed(primaryForestPercentCurrent ?? '', 3)
     return Diff.diffLines(formattedPrimaryForestTotalPercentPrev ?? '', formattedPrimaryForestPercentCurrent ?? '')
-  }, [historyLastApprovedIsActive, originalDataPointHistory, primaryForestPercentCurrent])
+  }, [displayHistory, originalDataPointHistory, primaryForestPercentCurrent])
 }
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useForestCharacteristicsTotalsChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useForestCharacteristicsTotalsChange.ts
index 082860ecf8..2f93fa1a1f 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useForestCharacteristicsTotalsChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useForestCharacteristicsTotalsChange.ts
@@ -7,8 +7,8 @@ import { Objects } from 'utils/objects'
 
 import { ODPs } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 type Props = {
   totalForestNaturalPercentArea: string | null
@@ -32,10 +32,10 @@ export const useForestCharacteristicsTotalsChange = (props: Props): Returned =>
   } = props
 
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   return useMemo<Returned>(() => {
-    if (!historyLastApprovedIsActive) return undefined
+    if (!displayHistory) return undefined
 
     const canCalculate = !Objects.isEmpty(originalDataPointHistory)
 
@@ -93,7 +93,7 @@ export const useForestCharacteristicsTotalsChange = (props: Props): Returned =>
       totalOtherPlantedForestPercentArea,
     }
   }, [
-    historyLastApprovedIsActive,
+    displayHistory,
     originalDataPointHistory,
     totalForestNaturalPercentAreaCurrent,
     totalForestPercentAreaCurrent,
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useHistoryHasNaturallyRegeneratingAndPlantationForest.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useHistoryHasNaturallyRegeneratingAndPlantationForest.ts
index 1ad93506a7..35b74e177e 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useHistoryHasNaturallyRegeneratingAndPlantationForest.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useHistoryHasNaturallyRegeneratingAndPlantationForest.ts
@@ -5,8 +5,8 @@ import { Objects } from 'utils/objects'
 
 import { ODPs } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 type Returned = {
   historyHasNaturallyRegeneratingForest: boolean
@@ -15,12 +15,12 @@ type Returned = {
 
 export const useHistoryHasNaturallyRegeneratingAndPlantationForest = (): Returned => {
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   return useMemo<Returned>(() => {
     const canCalculate = !Objects.isEmpty(originalDataPointHistory)
 
-    if (!historyLastApprovedIsActive || !canCalculate) {
+    if (!displayHistory || !canCalculate) {
       return {
         historyHasNaturallyRegeneratingForest: false,
         historyHasPlantationForest: false,
@@ -46,5 +46,5 @@ export const useHistoryHasNaturallyRegeneratingAndPlantationForest = (): Returne
       historyHasNaturallyRegeneratingForest,
       historyHasPlantationForest,
     }
-  }, [historyLastApprovedIsActive, originalDataPointHistory])
+  }, [displayHistory, originalDataPointHistory])
 }
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNationalClassForestAreaChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNationalClassForestAreaChange.ts
index 0f092cd0ef..db8464cee2 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNationalClassForestAreaChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNationalClassForestAreaChange.ts
@@ -6,8 +6,8 @@ import { Objects } from 'utils/objects'
 
 import { ODPs } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 type Props = {
   nationalClassForestArea: string | null
@@ -20,11 +20,11 @@ export const useNationalClassForestAreaChange = (props: Props): Returned => {
   const { nationalClassForestArea: nationalClassForestAreaCurrent, nationalClassIndex } = props
 
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
   const nationalClass = originalDataPointHistory?.nationalClasses?.[nationalClassIndex]
 
   return useMemo<Returned>(() => {
-    if (!historyLastApprovedIsActive) return undefined
+    if (!displayHistory) return undefined
 
     const canCalculate = !Objects.isEmpty(nationalClass)
 
@@ -34,5 +34,5 @@ export const useNationalClassForestAreaChange = (props: Props): Returned => {
       nationalClassForestAreaPrev?.toString() ?? '',
       nationalClassForestAreaCurrent?.toString() ?? ''
     )
-  }, [historyLastApprovedIsActive, nationalClass, nationalClassForestAreaCurrent])
+  }, [displayHistory, nationalClass, nationalClassForestAreaCurrent])
 }
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaChange.ts
index 1664d4d45f..e67c2e0396 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaChange.ts
@@ -8,8 +8,8 @@ import { Objects } from 'utils/objects'
 
 import { ODPs } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 type Props = {
   forestNaturalForestOfWhichPrimaryForestPercent?: string
@@ -30,11 +30,11 @@ export const useNaturalForestPercentAndAreaChange = (props: Props): Returned =>
   } = props
 
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
   const nationalClass = originalDataPointHistory?.nationalClasses?.[nationalClassIndex]
 
   return useMemo<Returned>(() => {
-    if (!historyLastApprovedIsActive) return undefined
+    if (!displayHistory) return undefined
 
     const canCalculate = !Objects.isEmpty(nationalClass)
 
@@ -75,8 +75,8 @@ export const useNaturalForestPercentAndAreaChange = (props: Props): Returned =>
       naturalForestPercentArea,
     }
   }, [
+    displayHistory,
     forestNaturalForestOfWhichPrimaryForestPercentCurrent,
-    historyLastApprovedIsActive,
     nationalClass,
     naturalForestPercentAreaCurrent,
   ])
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts
index 8d3b1bd156..3454f5c8e5 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/useNaturalForestPercentAndAreaTotalsChange.ts
@@ -7,8 +7,8 @@ import { Objects } from 'utils/objects'
 
 import { ODPs } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 type Props = {
   totalForestNaturalPercentArea: string | null
@@ -27,10 +27,10 @@ export const useNaturalForestPercentAndAreaTotalsChange = (props: Props): Return
   } = props
 
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   return useMemo<Returned>(() => {
-    if (!historyLastApprovedIsActive) return undefined
+    if (!displayHistory) return undefined
 
     const canCalculate = !Objects.isEmpty(originalDataPointHistory)
 
@@ -64,7 +64,7 @@ export const useNaturalForestPercentAndAreaTotalsChange = (props: Props): Return
       primaryForestNaturalPercentArea,
     }
   }, [
-    historyLastApprovedIsActive,
+    displayHistory,
     originalDataPointHistory,
     totalForestNaturalPercentAreaCurrent,
     totalPrimaryForestNaturalPercentAreaCurrent,
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestPercentAndAreaChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestPercentAndAreaChange.ts
index dec2f637a7..678e942922 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestPercentAndAreaChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestPercentAndAreaChange.ts
@@ -8,8 +8,8 @@ import { Objects } from 'utils/objects'
 
 import { ODPs } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 type Props = {
   forestPlantationIntroducedPercent: string | null
@@ -30,11 +30,11 @@ export const usePlantationForestPercentAndAreaChange = (props: Props): Returned
   } = props
 
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
   const nationalClass = originalDataPointHistory?.nationalClasses?.[nationalClassIndex]
 
   return useMemo<Returned>(() => {
-    if (!historyLastApprovedIsActive) return undefined
+    if (!displayHistory) return undefined
 
     const canCalculate = !Objects.isEmpty(nationalClass)
 
@@ -67,10 +67,5 @@ export const usePlantationForestPercentAndAreaChange = (props: Props): Returned
       forestPlantationIntroducedPercent,
       plantationIntroducedArea,
     }
-  }, [
-    forestPlantationIntroducedPercentCurrent,
-    historyLastApprovedIsActive,
-    nationalClass,
-    plantationIntroducedAreaCurrent,
-  ])
+  }, [displayHistory, forestPlantationIntroducedPercentCurrent, nationalClass, plantationIntroducedAreaCurrent])
 }
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestTotalsChange.ts b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestTotalsChange.ts
index d793c27524..76bb81d03c 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestTotalsChange.ts
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/hooks/usePlantationForestTotalsChange.ts
@@ -7,8 +7,8 @@ import { Objects } from 'utils/objects'
 
 import { ODPs } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 type Props = {
   totalForestPlantationIntroducedPercentArea: string | null
@@ -28,10 +28,10 @@ export const usePlantationForestTotalsChange = (props: Props): Returned => {
   } = props
 
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   return useMemo<Returned>(() => {
-    if (!historyLastApprovedIsActive) return undefined
+    if (!displayHistory) return undefined
 
     const canCalculate = !Objects.isEmpty(originalDataPointHistory)
 
@@ -70,7 +70,7 @@ export const usePlantationForestTotalsChange = (props: Props): Returned => {
       totalForestPlantationPercentArea,
     }
   }, [
-    historyLastApprovedIsActive,
+    displayHistory,
     originalDataPointHistory,
     totalForestPlantationIntroducedPercentAreaCurrent,
     totalForestPlantationPercentAreaCurrent,
diff --git a/src/client/pages/OriginalDataPoint/components/NationalClasses/components/NationalClass.tsx b/src/client/pages/OriginalDataPoint/components/NationalClasses/components/NationalClass.tsx
index 67a77a95fc..e89f2d9c2c 100644
--- a/src/client/pages/OriginalDataPoint/components/NationalClasses/components/NationalClass.tsx
+++ b/src/client/pages/OriginalDataPoint/components/NationalClasses/components/NationalClass.tsx
@@ -3,11 +3,11 @@ import { useTranslation } from 'react-i18next'
 
 import { ODPs, OriginalDataPoint } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useIsPrintRoute } from 'client/hooks/useIsRoute'
 import { DataCell, DataRow } from 'client/components/DataGrid'
 import InputText from 'client/components/Inputs/InputText'
 import TextArea from 'client/components/Inputs/TextArea'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 // import { useNationalClassNameComments } from 'client/pages/OriginalDataPoint/hooks'
 import { useIsEditODPEnabled } from 'client/pages/OriginalDataPoint/hooks/useIsEditODPEnabled'
@@ -33,7 +33,7 @@ const NationalClass: React.FC<Props> = (props) => {
   const actions = useRowActions({ canEdit: canEditData && !placeHolder, index, originalDataPoint })
   const { onChangeDefinition, onChangeName, onPasteDefinition, onPasteName } = useOnChangeNationalClass({ index })
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const lastRow = canEditData && !print ? placeHolder : index === nationalClasses.length - (print ? 1 : 2)
   // TODO next pr
@@ -50,7 +50,7 @@ const NationalClass: React.FC<Props> = (props) => {
   return (
     <DataRow actions={actions}>
       <DataCell error={error} lastRow={lastRow}>
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText
             className="input-text disabled"
             originalDataPoint={originalDataPoint}
@@ -68,7 +68,7 @@ const NationalClass: React.FC<Props> = (props) => {
       </DataCell>
 
       <DataCell lastCol lastRow={lastRow}>
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText
             className="input-text disabled"
             originalDataPoint={originalDataPoint}
diff --git a/src/client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory.ts b/src/client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory.ts
new file mode 100644
index 0000000000..65dd6de002
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory.ts
@@ -0,0 +1,7 @@
+import { useHistoryLastApprovedIsActive, useHistoryLastApprovedODPFetched } from 'client/store/data'
+
+export const useODPDisplayHistory = (): boolean => {
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const historyLastApprovedODPFetched = useHistoryLastApprovedODPFetched()
+  return historyLastApprovedIsActive && historyLastApprovedODPFetched
+}

From 40fd05ccba8e3a68a0d02dd0408824b53e33cabc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Thu, 20 Feb 2025 10:19:58 -0500
Subject: [PATCH 37/38] 4375 - Always show 1a odps when history is active
 (#4389)

---
 .../Section/Title/ExtentOfForest/ExtentOfForest.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/client/pages/Section/Title/ExtentOfForest/ExtentOfForest.tsx b/src/client/pages/Section/Title/ExtentOfForest/ExtentOfForest.tsx
index 5586a2d558..a8c8222a4f 100644
--- a/src/client/pages/Section/Title/ExtentOfForest/ExtentOfForest.tsx
+++ b/src/client/pages/Section/Title/ExtentOfForest/ExtentOfForest.tsx
@@ -1,5 +1,5 @@
 import './ExtentOfForest.scss'
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import classNames from 'classnames'
@@ -9,7 +9,7 @@ import { Users } from 'meta/user'
 
 import { useAppDispatch } from 'client/store'
 import { useCycle } from 'client/store/assessment'
-import { useOriginalDataPointYears } from 'client/store/data'
+import { useHistoryLastApprovedIsActive, useOriginalDataPointYears } from 'client/store/data'
 import { AssessmentSectionActions, useShowOriginalDatapoints } from 'client/store/ui/assessmentSection'
 import { useUser } from 'client/store/user'
 import { useIsPrintRoute } from 'client/hooks/useIsRoute'
@@ -33,6 +33,14 @@ const ExtentOfForest: React.FC<Props> = (props) => {
   const hasOdps = Array.isArray(odpYears)
   const withToggleODPs = Users.isAdministrator(user) && hasOdps
 
+  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+
+  useEffect(() => {
+    if (historyLastApprovedIsActive && !showOdps) {
+      dispatch(AssessmentSectionActions.toggleShowOriginalDataPoint())
+    }
+  }, [dispatch, historyLastApprovedIsActive, showOdps])
+
   const onClick = useCallback(() => {
     dispatch(AssessmentSectionActions.toggleShowOriginalDataPoint())
   }, [dispatch])
@@ -43,6 +51,7 @@ const ExtentOfForest: React.FC<Props> = (props) => {
         <h2 className="headline no-print">{Labels.getCycleLabel({ cycle, labels: subSection.props.labels, t })}</h2>
         {withToggleODPs && (
           <Button
+            disabled={historyLastApprovedIsActive}
             inverse={showOdps}
             label={t(`extentOfForest.${showOdps ? 'hideNDPs' : 'showNDPs'}`)}
             onClick={onClick}

From 54f73d14fcd35329cf7c53dc39ea2771cd7e39a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Thu, 20 Feb 2025 14:02:20 -0500
Subject: [PATCH 38/38] 4307 - Data History: DiffDOM (#4385)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 4307 - Data History: Descriptions html diffs - Initial DiffDOM (#4381)

* 4307 - Add diff-dom

* 4307 - Add initial DiffDOM component

* 4307 - Add DiffDom DescriptionDiffView

* 4307 - Remove class prop

* 4307 - Add useMemo

* 4307 - Update DescriptionDiffView

* 4307 - Add inner preDiffApply functions

* 4307 - Add library types

* 4307 - Add diff class to all child nodes

* 4307 - Show old and new diffs while replacing

* 4307 - Data History: Descriptions html diffs - Initial DiffDOM - Fix … (#4384)

* 4307 - Data History: Descriptions html diffs - Initial DiffDOM - Fix space

* Fix bug

* deepscan

---------

Co-authored-by: Mino Togna <minotogna@users.noreply.github.com>

* 4307 - Data History: DiffDOM - Modify text element (#4386)

* 4307 - Hanlde modifyTextElement via textDiff

* 4307 - Remove addElement div wrapper

* 4307 - Remove values equal check

* 4307 - Use diffLines instead of diffChars

* 4307 - HTML Diffs -> Remove element (#4388)

* 4307 - HTML Diffs -> Remove element

* 4307 - HTML Diffs -> Remove element

* fix parent route

* parent null check

* 4307 - Add Strings.nbspToUnicode (#4390)

* 4307 - Add ODPCommentsDiffView (#4392)

---------

Co-authored-by: Mino Togna <minotogna@users.noreply.github.com>
---
 package.json                                  |  1 +
 src/client/components/DiffDOM/DiffDOM.tsx     | 17 +++++
 .../components/DiffDOM/hooks/_addElement.ts   |  8 +++
 .../DiffDOM/hooks/_getTextDiffNode.ts         | 26 ++++++++
 .../DiffDOM/hooks/_postApplyRemoveElements.ts | 49 ++++++++++++++
 .../DiffDOM/hooks/_replaceElement.ts          | 19 ++++++
 .../components/DiffDOM/hooks/useDOMChanges.ts | 65 +++++++++++++++++++
 src/client/components/DiffDOM/hooks/utils.ts  | 39 +++++++++++
 src/client/components/DiffDOM/index.ts        |  1 +
 src/client/components/DiffDOM/types.ts        | 49 ++++++++++++++
 .../components/Comments/Comments.tsx          |  4 +-
 .../ODPCommentsDiffView.tsx                   | 17 +++++
 .../DescriptionDiffView.tsx                   | 12 ++--
 .../hooks/useChanges.ts                       | 36 ----------
 .../HistoryCompare/CellDiff/CellDiff.tsx      |  4 --
 src/utils/strings.ts                          |  5 ++
 yarn.lock                                     |  5 ++
 17 files changed, 307 insertions(+), 50 deletions(-)
 create mode 100644 src/client/components/DiffDOM/DiffDOM.tsx
 create mode 100644 src/client/components/DiffDOM/hooks/_addElement.ts
 create mode 100644 src/client/components/DiffDOM/hooks/_getTextDiffNode.ts
 create mode 100644 src/client/components/DiffDOM/hooks/_postApplyRemoveElements.ts
 create mode 100644 src/client/components/DiffDOM/hooks/_replaceElement.ts
 create mode 100644 src/client/components/DiffDOM/hooks/useDOMChanges.ts
 create mode 100644 src/client/components/DiffDOM/hooks/utils.ts
 create mode 100644 src/client/components/DiffDOM/index.ts
 create mode 100644 src/client/components/DiffDOM/types.ts
 create mode 100644 src/client/pages/OriginalDataPoint/components/ODPCommentsDiffView/ODPCommentsDiffView.tsx
 delete mode 100644 src/client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges.ts

diff --git a/package.json b/package.json
index 5cf8c089d0..bb534faca6 100644
--- a/package.json
+++ b/package.json
@@ -193,6 +193,7 @@
     "d3-tip": "^0.9.1",
     "date-fns": "^2.28.0",
     "diff": "^5.2.0",
+    "diff-dom": "^5.1.4",
     "dotenv": "^16.0.0",
     "emoji-mart-lite": "^0.6.1",
     "express": "^4.17.3",
diff --git a/src/client/components/DiffDOM/DiffDOM.tsx b/src/client/components/DiffDOM/DiffDOM.tsx
new file mode 100644
index 0000000000..c9164ccc58
--- /dev/null
+++ b/src/client/components/DiffDOM/DiffDOM.tsx
@@ -0,0 +1,17 @@
+import React, { useMemo, useRef } from 'react'
+
+import { useDOMChanges } from './hooks/useDOMChanges'
+import { cleanDOM } from './hooks/utils'
+import { DiffDOMProps } from './types'
+
+const DiffDOM: React.FC<DiffDOMProps> = (props) => {
+  const { current = '', prev = '' } = props
+
+  const ref = useRef<HTMLDivElement>()
+  const __html = useMemo<string>(() => cleanDOM(prev), [prev])
+  useDOMChanges({ current, prev, ref })
+
+  return <div ref={ref} className="editorWYSIWYG jodit-wysiwyg diff-text" dangerouslySetInnerHTML={{ __html }} />
+}
+
+export default DiffDOM
diff --git a/src/client/components/DiffDOM/hooks/_addElement.ts b/src/client/components/DiffDOM/hooks/_addElement.ts
new file mode 100644
index 0000000000..4ec99fe2d3
--- /dev/null
+++ b/src/client/components/DiffDOM/hooks/_addElement.ts
@@ -0,0 +1,8 @@
+import { DiffInfoAddElement, DiffType } from 'client/components/DiffDOM/types'
+
+import { applyDiffClassToElement } from './utils'
+
+export const addElement = (info: DiffInfoAddElement) => {
+  // eslint-disable-next-line no-param-reassign
+  info.diff.element = applyDiffClassToElement(info.diff.element, DiffType.added)
+}
diff --git a/src/client/components/DiffDOM/hooks/_getTextDiffNode.ts b/src/client/components/DiffDOM/hooks/_getTextDiffNode.ts
new file mode 100644
index 0000000000..19388f8419
--- /dev/null
+++ b/src/client/components/DiffDOM/hooks/_getTextDiffNode.ts
@@ -0,0 +1,26 @@
+import * as Diff from 'diff'
+import { Strings } from 'utils/strings'
+
+export const getTextDiffNode = (currentValue: string, newValue: string): HTMLDivElement => {
+  const changes = Diff.diffLines(Strings.nbspToUnicode(currentValue), Strings.nbspToUnicode(newValue))
+
+  const newNode = document.createElement('div')
+
+  changes.forEach((change, i) => {
+    const { added, removed, value } = change
+
+    value.split('\n\r').forEach((text) => {
+      const span = document.createElement('span')
+      if (added) span.classList.add('added')
+      if (removed) span.classList.add('removed')
+      span.textContent = text
+      newNode.appendChild(span)
+
+      if (i < changes.length - 1) {
+        newNode.appendChild(document.createElement('br'))
+      }
+    })
+  })
+
+  return newNode
+}
diff --git a/src/client/components/DiffDOM/hooks/_postApplyRemoveElements.ts b/src/client/components/DiffDOM/hooks/_postApplyRemoveElements.ts
new file mode 100644
index 0000000000..d7d4f822fd
--- /dev/null
+++ b/src/client/components/DiffDOM/hooks/_postApplyRemoveElements.ts
@@ -0,0 +1,49 @@
+import { MutableRefObject } from 'react'
+
+import { DiffDOM } from 'diff-dom'
+import { objToNode } from 'diff-dom/src/diffDOM/dom/fromVirtual'
+
+import { applyDiffClassToElement } from 'client/components/DiffDOM/hooks/utils'
+import { DiffInfoRemoveElement, DiffType } from 'client/components/DiffDOM/types'
+
+type Props = {
+  diffDOM: DiffDOM
+  diffs: Array<DiffInfoRemoveElement>
+  ref: MutableRefObject<HTMLDivElement>
+}
+
+export const postApplyRemoveElements = (props: Props): void => {
+  const { diffDOM, diffs, ref } = props
+  // record of deleted nodes count by parent route
+  const removedCounts: Record<string, number> = {}
+
+  diffs.forEach((diffInfo) => {
+    const { diff } = diffInfo
+    const { element, route } = diff
+
+    // 1. add 'removed' class and convert removed element to node
+    const obj = applyDiffClassToElement(element, DiffType.removed)
+    const node = objToNode(obj, false, diffDOM.options)
+
+    // 2. get parent node from route
+    const parentRoute = route.slice(0, -1)
+    let parentNode: ChildNode = ref.current
+    parentRoute.forEach((routeIndex, iterationIndex) => {
+      const _parentRoute = route.slice(0, iterationIndex)
+      const _removedKey = JSON.stringify(_parentRoute)
+      const _removedCount = removedCounts[_removedKey] ?? 0
+      parentNode = parentNode?.childNodes?.[routeIndex + _removedCount]
+    })
+
+    // 3. insert removed node at new index
+    const removedKey = JSON.stringify(parentRoute)
+    const removedCount = removedCounts[removedKey] ?? 0
+    if (parentNode) {
+      const childIndex = route.slice(-1)?.at(0)
+      parentNode.insertBefore(node, parentNode.childNodes[childIndex + removedCount])
+    }
+
+    // 4. update parent route removed counts
+    removedCounts[removedKey] = removedCount + 1
+  })
+}
diff --git a/src/client/components/DiffDOM/hooks/_replaceElement.ts b/src/client/components/DiffDOM/hooks/_replaceElement.ts
new file mode 100644
index 0000000000..af317698b0
--- /dev/null
+++ b/src/client/components/DiffDOM/hooks/_replaceElement.ts
@@ -0,0 +1,19 @@
+import { DiffElementNode, DiffInfoReplaceElement, DiffType } from 'client/components/DiffDOM/types'
+
+import { applyDiffClassToElement } from './utils'
+
+export const replaceElement = (info: DiffInfoReplaceElement) => {
+  const { oldValue } = info.diff
+  const { newValue } = info.diff
+
+  const newValueUpdated: DiffElementNode = {
+    nodeName: 'div',
+    attributes: { class: 'diff-text' },
+    childNodes: [
+      applyDiffClassToElement(oldValue, DiffType.removed),
+      applyDiffClassToElement(newValue, DiffType.added),
+    ],
+  }
+  // eslint-disable-next-line no-param-reassign
+  info.diff.newValue = newValueUpdated
+}
diff --git a/src/client/components/DiffDOM/hooks/useDOMChanges.ts b/src/client/components/DiffDOM/hooks/useDOMChanges.ts
new file mode 100644
index 0000000000..8964a679d1
--- /dev/null
+++ b/src/client/components/DiffDOM/hooks/useDOMChanges.ts
@@ -0,0 +1,65 @@
+import { useLayoutEffect } from 'react'
+
+import { DiffDOM, stringToObj } from 'diff-dom'
+
+import {
+  DiffAction,
+  DiffDOMProps,
+  DiffInfo,
+  DiffInfoAddElement,
+  DiffInfoRemoveElement,
+  DiffInfoReplaceElement,
+} from 'client/components/DiffDOM/types'
+
+import { addElement } from './_addElement'
+import { getTextDiffNode } from './_getTextDiffNode'
+import { postApplyRemoveElements } from './_postApplyRemoveElements'
+import { replaceElement } from './_replaceElement'
+import { normalizeDiffDOM } from './utils'
+
+type Props = DiffDOMProps & {
+  ref: React.MutableRefObject<HTMLDivElement>
+}
+
+export const useDOMChanges = (props: Props) => {
+  const { current, prev, ref } = props
+
+  useLayoutEffect(() => {
+    const removedDiffs: Array<DiffInfoRemoveElement> = []
+
+    const diffDOM = new DiffDOM({
+      caseSensitive: true,
+      preDiffApply: (info: DiffInfo<DiffAction, unknown>): boolean => {
+        switch (info.diff.action) {
+          case DiffAction.replaceElement:
+            replaceElement(info as DiffInfoReplaceElement)
+            return false
+          case DiffAction.addElement:
+            addElement(info as DiffInfoAddElement)
+            return false
+          case DiffAction.removeElement:
+            removedDiffs.push(info as DiffInfoRemoveElement)
+            return false
+          default:
+            return false
+        }
+      },
+      textDiff(node, currentValue, _expectedValue, newValue) {
+        if (node instanceof Text) {
+          node.replaceWith(getTextDiffNode(currentValue, newValue))
+        }
+      },
+    })
+
+    const normalizedPrev = normalizeDiffDOM(prev)
+    const normalizedCurrent = normalizeDiffDOM(current)
+
+    const objDiffPrev = stringToObj(normalizedPrev)
+    const objDiffCurrent = stringToObj(normalizedCurrent)
+    const diff = diffDOM.diff(objDiffPrev, objDiffCurrent)
+    diffDOM.apply(ref.current, diff)
+
+    // add removed nodes to dom
+    postApplyRemoveElements({ diffDOM, diffs: removedDiffs, ref })
+  }, [current, prev, ref])
+}
diff --git a/src/client/components/DiffDOM/hooks/utils.ts b/src/client/components/DiffDOM/hooks/utils.ts
new file mode 100644
index 0000000000..d6c793c1c5
--- /dev/null
+++ b/src/client/components/DiffDOM/hooks/utils.ts
@@ -0,0 +1,39 @@
+import { Strings } from 'utils/strings'
+
+import { DiffElement, DiffElementNode, DiffElementText, DiffType } from 'client/components/DiffDOM/types'
+
+export const cleanDOM = (value: string): string => {
+  return (
+    value
+      .replace(/[\n\t\r]/g, '')
+      // .replace(/\u00a0|&nbsp;/g, ' ')
+      .toString()
+  )
+}
+
+export const normalizeDiffDOM = (value: string): string => {
+  const cleanedValue = cleanDOM(value)
+
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(`<div>${cleanedValue}</div>`, 'text/html')
+  const element = doc.body.firstElementChild as HTMLElement
+  element?.normalize()
+
+  return element ? `<div class="___diff">${element.innerHTML}</div>` : ''
+}
+
+export const applyDiffClassToElement = (element: DiffElement, type: DiffType): DiffElementNode => {
+  if (['#comment', '#text'].includes(element.nodeName)) {
+    // replace space with Unicode char
+    const data = Strings.nbspToUnicode((element as DiffElementText).data)
+    const textNode = { nodeName: element.nodeName, data }
+
+    return { nodeName: 'span', attributes: { class: type }, childNodes: [textNode] }
+  }
+
+  const elementNode = element as DiffElementNode
+  return {
+    ...elementNode,
+    childNodes: elementNode.childNodes?.map((child) => applyDiffClassToElement(child, type)) || [],
+  }
+}
diff --git a/src/client/components/DiffDOM/index.ts b/src/client/components/DiffDOM/index.ts
new file mode 100644
index 0000000000..cd55525ca6
--- /dev/null
+++ b/src/client/components/DiffDOM/index.ts
@@ -0,0 +1 @@
+export { default } from './DiffDOM'
diff --git a/src/client/components/DiffDOM/types.ts b/src/client/components/DiffDOM/types.ts
new file mode 100644
index 0000000000..a57d772947
--- /dev/null
+++ b/src/client/components/DiffDOM/types.ts
@@ -0,0 +1,49 @@
+export type DiffDOMProps = {
+  current: string
+  prev: string
+}
+
+export enum DiffType {
+  added = 'added',
+  removed = 'removed',
+}
+
+export type DiffElement = { nodeName: string }
+
+export type DiffElementNode = DiffElement & {
+  attributes?: Record<string, string>
+  checked?: boolean
+  childNodes?: DiffElement[]
+  selected?: boolean
+  value?: string | number
+}
+
+export type DiffElementText = DiffElement & {
+  data: string
+}
+
+export enum DiffAction {
+  addElement = 'addElement',
+  removeElement = 'removeElement',
+  replaceElement = 'replaceElement',
+}
+
+type Diff<Action extends DiffAction, Props> = {
+  action: Action
+  route: Array<number>
+} & Props
+
+export type DiffInfo<
+  Action extends DiffAction = DiffAction,
+  Props extends Record<string, unknown> | void | unknown = void
+> = {
+  diff: Diff<Action, Props>
+  node: HTMLElement
+}
+
+export type DiffInfoAddElement = DiffInfo<DiffAction.addElement, { element: DiffElement }>
+export type DiffInfoRemoveElement = DiffInfo<DiffAction.removeElement, { element: DiffElement }>
+export type DiffInfoReplaceElement = DiffInfo<
+  DiffAction.replaceElement,
+  { newValue: DiffElement; oldValue: DiffElement }
+>
diff --git a/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx b/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx
index 35b4da8300..d11fee685b 100644
--- a/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx
+++ b/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx
@@ -9,7 +9,7 @@ import Button, { ButtonSize } from 'client/components/Buttons/Button'
 import { DataCell, DataGrid, DataRow } from 'client/components/DataGrid'
 import EditorWYSIWYG from 'client/components/EditorWYSIWYG'
 import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
-import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
+import ODPCommentsDiffView from 'client/pages/OriginalDataPoint/components/ODPCommentsDiffView/ODPCommentsDiffView'
 
 import { useUpdateDescription } from './hooks/useUpdateDescription'
 import { useCommentsActions } from './useCommentsActions'
@@ -56,7 +56,7 @@ const Comments: React.FC<Props> = (props) => {
 
       <DataCell editable={open} gridColumn={canEditData ? `1/-1` : undefined} lastCol lastRow noBorder={!open}>
         {displayHistory ? (
-          <ODPDiffText originalDataPoint={originalDataPoint} path={['description']} />
+          <ODPCommentsDiffView />
         ) : (
           <div className={classNames('description__editor-container', { editable: open })}>
             <EditorWYSIWYG
diff --git a/src/client/pages/OriginalDataPoint/components/ODPCommentsDiffView/ODPCommentsDiffView.tsx b/src/client/pages/OriginalDataPoint/components/ODPCommentsDiffView/ODPCommentsDiffView.tsx
new file mode 100644
index 0000000000..e47e1fc9ad
--- /dev/null
+++ b/src/client/pages/OriginalDataPoint/components/ODPCommentsDiffView/ODPCommentsDiffView.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
+import DiffDOM from 'client/components/DiffDOM'
+
+const ODPCommentsDiffView: React.FC = () => {
+  const originalDataPoint = useOriginalDataPoint()
+  const originalDataPointHistory = useLastApprovedOriginalDataPoint()
+
+  const current = originalDataPoint?.description ?? ''
+  const prev = originalDataPointHistory?.description ?? ''
+
+  return <DiffDOM current={current} prev={prev} />
+}
+
+export default ODPCommentsDiffView
diff --git a/src/client/pages/Section/Descriptions/CommentableDescription/DescriptionDiffView/DescriptionDiffView.tsx b/src/client/pages/Section/Descriptions/CommentableDescription/DescriptionDiffView/DescriptionDiffView.tsx
index 5d746beda3..8fbff85fa1 100644
--- a/src/client/pages/Section/Descriptions/CommentableDescription/DescriptionDiffView/DescriptionDiffView.tsx
+++ b/src/client/pages/Section/Descriptions/CommentableDescription/DescriptionDiffView/DescriptionDiffView.tsx
@@ -3,9 +3,8 @@ import React from 'react'
 import { CommentableDescriptionName } from 'meta/assessment'
 
 import { useCommentableDescriptionValue, useLastApprovedHistoryDescriptions } from 'client/store/data'
-import DiffText from 'client/components/DiffText'
+import DiffDOM from 'client/components/DiffDOM'
 import { useSectionContext } from 'client/pages/Section/context'
-import useChanges from 'client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges'
 
 type Props = { name: CommentableDescriptionName }
 
@@ -14,13 +13,10 @@ const DescriptionDiffView: React.FC<Props> = (props) => {
   const { sectionName } = useSectionContext()
 
   const descriptions = useLastApprovedHistoryDescriptions()
-  // TODO: Support data sources after 2020
-  const descriptionA = descriptions?.[name]?.text || ''
-  const descriptionB = useCommentableDescriptionValue({ name, sectionName })?.text || ''
+  const prev = descriptions?.[name]?.text || ''
+  const current = useCommentableDescriptionValue({ name, sectionName })?.text || ''
 
-  const changes = useChanges({ descriptionA, descriptionB })
-
-  return <DiffText changes={changes} />
+  return <DiffDOM current={current} prev={prev} />
 }
 
 export default DescriptionDiffView
diff --git a/src/client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges.ts b/src/client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges.ts
deleted file mode 100644
index ca0a9f4bef..0000000000
--- a/src/client/pages/Section/Descriptions/CommentableDescription/hooks/useChanges.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useMemo } from 'react'
-
-import * as Diff from 'diff'
-import { Change } from 'diff'
-
-interface Props {
-  descriptionA: string
-  descriptionB: string
-}
-
-type Returned = Array<Change>
-
-// TODO: Rename to useChangesHTML
-// TODO: Add support for JSON/DataSource type
-const useChanges = (props: Props): Returned => {
-  const { descriptionA, descriptionB } = props
-
-  return useMemo<Returned>(() => {
-    const getTextContent = (html: string): string => {
-      const parser = new DOMParser()
-      const doc = parser.parseFromString(html, 'text/html')
-      return doc.body.textContent || ''
-    }
-
-    const textA = getTextContent(descriptionA)
-    const textB = getTextContent(descriptionB)
-
-    const changes = Diff.diffLines(textA, textB, {
-      ignoreCase: false,
-    })
-
-    return changes
-  }, [descriptionA, descriptionB])
-}
-
-export default useChanges
diff --git a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/CellDiff/CellDiff.tsx b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/CellDiff/CellDiff.tsx
index ee63671794..65e4c33233 100644
--- a/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/CellDiff/CellDiff.tsx
+++ b/src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/HistoryCompare/CellDiff/CellDiff.tsx
@@ -22,8 +22,4 @@ const CellDiff: React.FC<Props> = (props) => {
   )
 }
 
-CellDiff.defaultProps = {
-  lastCol: false,
-}
-
 export default CellDiff
diff --git a/src/utils/strings.ts b/src/utils/strings.ts
index 5e398d8da1..fbce696b2e 100644
--- a/src/utils/strings.ts
+++ b/src/utils/strings.ts
@@ -1,6 +1,10 @@
 // @ts-ignore
 import * as snake from 'to-snake-case'
 
+const nbspToUnicode = (string: string): string => {
+  return string.replaceAll('&nbsp;', '\u00A0')
+}
+
 export const normalize = (string: string): string =>
   string
     .normalize('NFD')
@@ -9,6 +13,7 @@ export const normalize = (string: string): string =>
     .toLocaleLowerCase()
 
 export const Strings = {
+  nbspToUnicode,
   normalize,
   snakeCase: snake,
 }
diff --git a/yarn.lock b/yarn.lock
index 9d93534f05..3224751418 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6637,6 +6637,11 @@ devtools-protocol@0.0.1312386:
   resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.1312386.tgz#5ab824d6f1669ec6c6eb0fba047e73601d969052"
   integrity sha512-DPnhUXvmvKT2dFA/j7B+riVLUt9Q6RKJlcppojL5CoRywJJKLDYnRlw0gTFKfgDPHP5E04UoB71SxoJlVZy8FA==
 
+diff-dom@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/diff-dom/-/diff-dom-5.1.4.tgz#20d0f6e39558f59dae0e2943b69360fc15e371cb"
+  integrity sha512-TSEaVdVGictY1KHg7VpVw2nuM02YKC9C8/qBkGiCnkiAybVbu1zQTMj2/dnVLRO7Z62UsqzHGpXweiOj5/jaZg==
+
 diff-match-patch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"