Challenge Overview

Context

The client is looking for an upgrade and migration from JSF technology to React for one of their systems.

All screens are implemented and integrated with provided mock API

There are 9 out of 20 screens in scope (7 unique pages). One detail requirement is shared in the forum. Only pages in red are in scope. Most of these screens mainly send requests to either search, create or update. You can find the design in the forum.

Things to note:

Both pagination and sorting need to be done in frontend.
On top right of the screen, you are able to choose language. The UI design is in English. In this challenge, only using English is enough, but your implementation should be able to add others local easily, for example, using https://github.com/i18next/react-i18next. If I click "EN", there show be a dropdown menu, with 4 languages: "EN DE FR IT". Please add a section in README to explain how to support a new language.
Please add Print and Export Excel icons, and print or export the table in that page.
More detailed document per page can be found in the forum.
All materials should be in the design already (xd file is shared in the forum). If there is anything missing, please ask in the forum.

GENERAL REQUIREMENTS

Must use ReactJS and follow the provided design.
The main content should have fluid width to fill all the available space, the minimum supported resolution is 1280*720 (height is actually unlimited since page can scroll).
Searching / filtering should work whenever applicable.
Pagination should work whenever applicable.
Filtering/pagination happens on the frontend.
Implement popup for confirmation and warning messages. Do NOT use browser alerts, but use custom styles popups as shown in the design.
Show loading spinners when populating data from API / local JSON to UI.
Implement validation errors.
No linting errors.
No errors with prod builds.
You are expected to create a detailed README file including information on how to setup, run and verify your application.

CODE REQUIREMENTS

ES6 syntax is preferred, as Babel has been setup to handle transpiling the syntax to the current JavaScript standard.
Use .jsx extension for React components; using PascalCase for filenames. E.g., ComponentName/index.jsx.
Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.
Ensure that there are no lint errors.
You’re free to choose between CSS & SCSS but you need to use flex instead of float.
Follow a clean folder structure.
Create reusable components.

JAVASCRIPT REQUIREMENTS

All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Use ES6 linter for code quality

LICENSES & ATTRIBUTION

Third-party assets used to build your item must be properly licensed and free for commercial use. MIT and Apache v2 licenses are ok, for any others please check with us to get approval first.
Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

BROWSER REQUIREMENTS

Full code that covers all the requirements.
A detailed README file including information on how to setup and run your application.