ABC - MPS Portal Prototype Updates

Challenge Objectives
For the purpose of this challenge, we need the community to help update the UI for the Missing Details Portal using ReactJS + Redux, we’ll provide complete design in the forum for this challenge.
 
Project Background

• This application will be used to manage and process all missing info queries for invoicing in a standardized manner. It will allow users to remove email, Skype or phone requests logging.
• We expect the application will help improve our way to provide reporting, tracking and managing queries.

 
Technology Stack

• ReactJS
• Redux
• CSS

 

API Integration

You’ll be working on an existing frontend project which was already fully integrated with the API, but for all the new features in the design, the API is not ready yet, so you need to implement all actions/services required to fetch the data from JSON files and storing the data in the Redux store to support these new features. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort.
 
Challenge Scope
All pages and changes (unless otherwise specified) in the requirements spec and design are in scope of this challenge. For more details, read the sections below.
 
You are expected to create a detailed README file including information on how to setup and run your application.

General Notes

• The header should be fixed at the top of the page and should always be visible.
• The main content should have fluid width to fill all the available space.
• Searching should be done on Enter key press.
• Pagination should work.
• Filtering/pagination happens on the server side so you need to pass the query parameters and the server is expected to return the pagination info (pageSize, total etc).

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.

 
Browser Requirements
Windows: IE 11+, Chrome Latest, Firefox Latest
Mac: Safari Latest, Chrome Latest, Firefox Latest
 
Changes Summary
Check below for a summary of the changes that need to happen. Please register and check full details from the challenge forum.
 
Carefully check the details around user roles.
 
1. Send Email
Users will be able to select multiple queries and initiate the send email process.
 
2. Escalate
Users will be able to select multiple queries and initiate the Escalate process, which is essentially just sending email with some extra behavior. For example after escalation happens, the table will show extra columns with Escalation Message, notifications for escalation should be generated, etc.
 
3. Export
Users will be able to select multiple queries and export the queries to excel files.
 
4. Edit Queries
There are some changes to be made to query details and editing queries (new fields, new way of mass edit, etc).
 
5. User Management
Super users will be able to specify a team for users.
Super users will also be able to see graphs / charts that show statistics of users, please note the charts need to be interactive.
 
6. Dashboard
Users will be able to see graphs / charts that show statistics of queries, please note the charts need to be interactive, and it should be possible to save / download the charts as images.
 
Documentation
Register to download the following documents we provided in the forum

• Full Storyboard
• Requirements
• Base Code

Final Submission Guidelines

What To Submit

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