I have a requirement to create report merging web application.Users will be able to upload 2 identical budget reports. These users come from 2 different department where each department might have update the data (e.g. description), or might have a bit different description for the same Activity ID.
In this webapp we expect that they should be able to see the differences, and select the data from which report they will use to generate a final integrated document. Fyi, I am planning to store data from both report into database tables (each has its own table) before displaying on the UI. Data Example:
I am looking for a UX/UI solution/idea to display data differences, and an option for user to select data from which report, and there is a possibility that user will be able to modify the value.
What i am thinking is to have 1 big html table like the screenshot below, with inline-editting, data selection, and row/column highlight when there is a difference. Other option perhaps to display it with 2 tables side-by-side? Do you have any suggestions or better solutions?
Tech stacks that we will use: Spring Boot, Thymeleaf + JS + jQuery, Bootstrap, Hibernate, JaVers for Diffing