Frontend: Display new Return-To-Work score

[dhanashri-dotcom]

Task: Create UI to display the updated Return-To-Work score after client information is updated. Description: After updating the client profile, the new Return-To-Work score should be calculated and shown. Acceptance Criteria:

• The new score is displayed on the UI after the update.

[bonicim]

Create a picture (hand drawn) or diagram of what this page looks like.

[mereluo]

Updated:

Task 1: Button Trigger API Call for Updated Score Description: When the user clicks the Get Latest Return-To-Work Score button on the user detail page, an API call should be triggered to fetch the updated Return-To-Work score from the backend. The button should provide feedback to the user (e.g., loading state) while waiting for the API response. Acceptance Criteria:

• A clickable button labeled Get Latest Return-To-Work Score is implemented and displayed on the user detail page.
• The button triggers an API call to fetch the Return-To-Work score when clicked.
• Function that will handle the button click and make an API request to the backend is defined. Use fetch or axios to send the request.
• A loading state is shown while the API call is in progress, and the button is disabled during this time.
• If the API call is successful, the score is updated in the UI.
• If the API call fails, an error message is displayed.
• The button is styled for a better user experience, using CSS or a framework like Bootstrap or Material UI.

Task 2: Create UI Component for Return-To-Work Score Description: Design and implement a UI component displaying the Return-To-Work score after clicking the Get Latest Return-To-Work Score Button. Acceptance Criteria:

• A new component (e.g., ReturnToWorkScore.jsx) is created
• This component fetches the Return-To-Work score after the client clicks the Get Latest Return-To-Work Score Button.
• The score is displayed prominently on the page with clear labels
• Visual elements like a progress bar, color coding, or a numeric display make the score more engaging.
• The layout is responsive across devices.

[mereluo]

Possible UI Design (subject to change)