Back-end Admin Web App

1

Login Page

As a back-end system admin, I want to login to the system, so that I can manage the Tele-Rehabilitation Back-end system.

Acceptance Criteria

• When I access the “Login page”, I will see the Login screen

• In the Login screen, I will be able to login by using Username and Password. The Login screen will have:

  • Username: Textbox

  • Password: Textbox

  • Login button

  • Forgot your password?: Hyperlink

• Clicking the login button

  • If I input the correct Username and Password then I will be sent to the Dashboard screen

  • If I input the invalid Username/Password:

    • If I do not input the Username or password, when I click the Login button a red text line message will be displayed: “Please fill in the Username/Password”.

    • If I input the wrong Username or password, when I click the Login button a red text line message will be displayed: “Incorrect Username or password. Please try again”.

• Clicking “Forgot your password?”

  • I will be sent to a Recovery page that I could type my email registered with the system and receive the password.

Must have

2

Password Recovery Page

As a back-end system admin, I want to be able recover my password in case I forgot it.

Acceptance Criteria

• When I click the “Forgot your password?” link in the login page I see the password recovery page that has:

  • Email: Textbox

  • Recover Password button

  • Back to login page hyperlink

• Clicking Recovery button:

  • If the input email exists in the database then the password will be sent to the email.

  • Else a red text line message under the Login button will be displayed: “Your  email does not exist.”.

• Clicking the "< Login" hyperlink sends me back to the login page

Must have

3

User Roles and Permission

As the site admin I want to define different user roles and permission so that I can set the what can and cannot be done by back-end system admins.

Acceptance Criteria

• Define the user roles and permission as describe by the table in the User Roles page

Must Have

4

Dashboard

As a Back-end Admin, I want to view brief information about therapists and treatments

Acceptance Criteria

• When I click to Dashboard menu, I will go to the Dashboard screen

• Global Admin users should display the following information charts (includes worldwide  separation by country, age and gender)

  • Number of current therapists

  • Number of current ongoing treatments / total patient limit

  • Number of total treatments

  • Number of total patients

• Country Admin users should display the following information charts (includes countrywide separation by age and gender)

  • Number of current ongoing treatments / total patient limit

  • Number of total treatments

  • Number of total patients

Must have

5

User Profile Page

As a back-end admin, I want to view and edit my profile so that I can manage my own information.

Acceptance Criteria

• When I click the user name in the menu, it displays the a drop-down that lists the following action

  • Update profile

  • Change password

  • Log out

• The page displays two tabs

  • Profile Information

  • Passwords

  • Clicking the tab headers switches the active tab

Must have

6

Update Profile

As a back-end admin I want to edit profile so that I can update my profile information

Acceptance Criteria

• Clicking Update profile opens the profile page with Profile Information tab active

• Profile tab has

  • First Name and Last Name

    • Text field, required

    • Contain text only, max length 255 characters

  • Email

    • Text field, required

    • Contain text only, max length 255 characters

    • Follows email pattern: "text@text.text"

  • Mobile phone number

    • Split into

      • area code/mobile carrier prefix

        • max length: 5

      • phone number

        • max length: 10

    • Text field

    • Contain digits only

  • Country (country and clinic admins)

  • Region/Province (clinic admins only)

    • Drop-down (set up by country admin)

  • Institution/Clinics
    

    • Drop-down (set up by country admin)

  • Gender

    • Drop-down

    • Options: Male, Female or Other

  • Date of birth

    • Date field

    • Format: dd/mm/yyyy

    • Display calculated age

  • Save button

    • Enable if something is changed

    • If all field values satisfy the validations, the data will be saved

      • Show system notification Save successfully.”

    • If there is a field that does not match the condition

      • System will show a red text line in the right of input field

        • First Name and Last Name: “No number allowed.”

        • Phone Number: “Only digit numbers are allowed.”

      • If there is a required field that is blank, show a red text line in the right of input field “Cannot leave blank.”

  • Cancel button

    • Reverts all information to the last saved data

Must have

7

Change Password

As a back-end admin I want to edit my password so that I can update my password and keep it secured

Acceptance Criteria

• Clicking Change password opens the profile page with Password tab active

• Password tab has

  • Old Password: text field, required

  • New Password: text field, required

  • Confirm New Password: text field, required

  • Save button

    • Enable if something is changed

    • If Old password is correct and  New password and Confirm new password match each other

      • Then, the new password is updated to the database

      • Show system notification “Password changed successfully!”

    • If the password input in Old Password does not match with the current password, a red text line
      message will be displayed: “Old password is not valid.”

    • If the input New password and Confirm new password do not match each other, a red text line message will be displayed: “Confirm new password does not match.”

  • Cancel button

    • Reverts all information to the last saved data

Must have

8

Logout

As a back-end admin I want to be able to logout of the system

Acceptance Criteria

• Clicking Log out

  • A modal popup will be shown “Are you sure you want to log out?”

    • Choose YES: I will be returned to the login page

    • Choose NO: I will stay at the current page

Must have

9

Admin Management

As a global admin I want to access to Global, Country and Clinic list so that I can manage the Admin accounts

Acceptance Criteria

• When I click on Admins menu, I will be sent to the Admin Management screen with the following content:

  • Tab Bar

    • Global Admins

      • Can be accessed by Global Admins

      • When clicked, displays the list of global admins

    • Country Admins

      • Can be accessed by Global Admins

      • Can be accessed by Country Admins

      • When clicked, displays the list of country admins

    • Clinic Admins

      • Can be accessed by Global Admins

      • Can be accessed by Country Admins

      • When clicked, displays the list of clinic admins

  • New Admin button

    • Can be accessed by Global Admins

    • Can be accessed by Country Admins

    • When clicked, displays an admin creation modular pop-up form

  • Search box

    • When users input the text (at least 1 character), the Admins list will only return the records that one of their column values contain the search text (except Action column)

  • Filter button

    • When users click on the Filters button, a filter bar will appear below the title row with the search boxes corresponding to each title (except Action column):

      • Search boxes (ID, First Name and Last Name, Email):

        • Default: blank

        • When users input the text (at least 1 character), the Admins list will only return the records that have the search input text contained in the value column

      • Dropdown (Status)

        • Default: All

        • Filters admin list that matches selected status

        • Status:

          • Active

          • Inactive

      • Calendar picker (Last Login)

        • Default: blank

        • Last Login

          • Date format: dd/mm/yyyy

          • Filter admin list that last login was on or before the selected date

      • Close icon: Closes/hide the Filters bar

  • Columns button

    • Shows a check box list of columns that are displayed in the admin list

    • Default: All checked

      • If some columns are unchecked, All Columns check box is automatically unchecked

    • When an item is unchecked, column is not displayed in the admin list

    • Clicking on the close icon applies the checked columns to be displayed

  • Admin list

    • Data table of admins

    • Summary count label (e.g. "Showing 1 to 5 of 10 items)

    • Pagination labels

      • Drop down to select number of items to show in a page

      • Previous icon: returns to the previous page

      • First icon: returns to the first page

      • Next icon: goes to the next page

      • Last icon: moves to the last page

  • Action button

    • When click it will show the following actions

      • Edit Info - when clicked, opens the create admin modal pop-up pre-filled with current user information

        • Can save/cancel updated information

      • Activate/Deactivate - When clicked, opens a activate/deactivate modal confirmation form

      • Delete - When clicked, opens a delete modal confirmation form

Must have

10

Admin Creation

As a back-end admin, I want to create admin users so that they can be added to the admin list

Acceptance Criteria

• When I click on New Admin button, the New Admin popup will open with the following content:

  • Radio button for role options: Global Admin, Country Admin and Clinic Admin

    • Allow me to select the role of the new admin user I need to create

    • Shows the current role of the admin user that I am editing/updating

    • Only global admins can change user role

  • Email - required

  • Country - required (only for Country and Clinic Admins)

    • Drop down list of possible countries

  • Clinic/Institution - required (only for Clinic Admins)

    • Drop down list of possible clinics/institutions

  • First Name and Last Name - required

  • Create button (Save when editing existing user)

    • When I click on Create button:

      • Display warning/error messages if values fail validation (e.g. “Please fill in the email”)

    • If I input all required fields then I click on the Create button:

      • Save the new admin user

      • Show system notification of successful user creation

  • Cancel button

    • When click, closes modal pop-up and returns to the admin management page

Must have

11

Admin Deactivation

As a back-end admin, I want to deactivate admin users so that they can be temporarily denied access to the system

12

Admin Deletion

As a back-end admin, I want to delete admin users so that they can be permanently removed from the system

13

Therapist Management

As a country and/or clinic admin I want access to the therapist list so that I can manage the therapist accounts

Acceptance Criteria

• Global/Country admins does not have access to the Therapists menu

• For clinic admins, list only shows therapist on the same clinics

• When I click on Therapists menu, I will be sent to the Therapist Management screen with the following content:

  • New Therapist button

    • When clicked, displays a therapist creation modular pop-up form

  • Search box

    • When users input the text (at least 1 character), the Therapist list will only return the records that one of their column values contain the search text (except Action column)

  • Filter button

    • When users click on the Filters button, a filter bar will appear below the title row with the search boxes corresponding to each title (except Action column):

      • Search boxes (ID, First Name and Last Name, Email, Clinic/Institution, Age, Ongoing patient limit, Assigned patients):

        • Default: blank

        • When users input the text (at least 1 character), the Therapist list will only return the records that have the search input text contained in the value column

      • Dropdown (Status)

        • Default: All

        • Filters therapists list that matches selected status

        • Status:

          • Active

          • Inactive

      • Calendar picker (Date of Birth, Last Login)

        • Default: blank

        • Last Login

          • Date format: dd/mm/yyyy

          • Filter therapist list that last login was on or before the selected date

      • Close icon: Closes/hide the Filters bar

  • Columns button

    • Shows a check box list of columns that are displayed in the therapist list

    • Default: All checked

      • If some columns are unchecked, All Columns check box is automatically unchecked

    • When an item is unchecked, column is not displayed in the therapist list

    • Clicking on the close icon applies the checked columns to be displayed

  • Therapist list

    • Data table of therapist

    • Summary count label (e.g. "Showing 1 to 5 of 10 items)

    • Pagination labels

      • Drop down to select number of items to show in a page

      • Previous icon: returns to the previous page

      • First icon: returns to the first page

      • Next icon: goes to the next page

      • Last icon: moves to the last page

  • Action button

    • When click it will show the following actions

      • Edit Info - when clicked, opens the create therapist modal pop-up pre-filled with current user information

        • Can save/cancel updated information

      • Activate/Deactivate - When clicked, opens a activate/deactivate modal confirmation form

      • Delete - When clicked, opens a delete modal confirmation form

Must have

14

Therapist Creation

As a clinic admin, I want to create therapist users so that they can be added to the therapist list

Acceptance Criteria

• When I click on New Therapist button, the New Therapist popup will open with the following content:

  • Email - required

  • Country/Region/Province - required

    • Drop down list of possible countries

  • Clinic/Institution

    • Drop down list of possible clinics/institutions

  • Patient limit Ongoing treatments - required

    • Numeric (default 15)

  • First Name and Last Name - required

  • Date of Birth - show calculated age

  • Language ?

  • Profession

  • Create button (Save when editing existing user)

    • When I click on Create button:

      • Display warning/error messages if values fail validation (e.g. “Please fill in the email”)

    • If I input all required fields then I click on the Create button:

      • Save the new admin therapist user

      • Show system notification of successful user creation

  • Cancel button

    • When click, closes modal pop-up and returns to the therapist management page

Must have

15

Therapist Deactivation

As a clinic admin, I want to deactivate therapist users so that they can be temporarily denied access to the system

16

Therapist Deletion

As a clinic admin, I want to delete admin users so that they can be permanently removed from the system

17

Patient List

As a global admin, I want to be able to see the list of patients in the system so that I can use that data for research and data analytics

Acceptance Criteria

• Only global admin can access this page

• When I click on Patients menu, I will be sent to the Patient List screen with the following content:

  • Search box

    • When users input the text (at least 1 character), the patients list will only return the records that one of their column values contain the search text (except Action column)

  • Filter button

    • When users click on the Filters button, a filter bar will appear below the title row with the search boxes corresponding to each title (except Action column):

      • Search boxes (ID):

        • Default: blank

        • When users input the text (at least 1 character), the Therapist list will only return the records that have the search input text contained in the value column

      • Dropdown (Status)

        • Default: All

        • Filters patient list that matches selected status

        • Status:

          • Active

          • Inactive

      • Close icon: Closes/hide the Filters bar

  • Columns button

    • Shows a check box list of columns that are displayed in the therapist list

    • Default: All checked

      • If some columns are unchecked, All Columns check box is automatically unchecked

    • When an item is unchecked, column is not displayed in the patient list

    • Clicking on the close icon applies the checked columns to be displayed

  • Patient list

    • Data table of therapist

    • Summary count label (e.g. "Showing 1 to 5 of 10 items)

    • Pagination labels

      • Drop down to select number of items to show in a page

      • Previous icon: returns to the previous page

      • First icon: returns to the first page

      • Next icon: goes to the next page

      • Last icon: moves to the last page

Must have

18

Services Management

As a global admin, I want to have a services management page so that I can access the list of services (exercises, educational materials and questionnaires) and manage the global library content

Acceptance Criteria

• Only global admin can access this page

• When I click on the Services Setup menu, I will have see the Services Setup page that shows:

  • Tab Bar

    • Exercises
      

      • When clicked, displays the list of exercises

    • Education Materials

      • When clicked, displays the list of education materials

    • Questionnaires

      • When clicked, displays the list of questionnaires

  • New Content button

    • When clicked, displays list of actions to create a:

      • New Exercise

      • New Education Material

      • New Questionnaire

    • When action is clicked opens the specific content creation modal dialog/page

  • Search/Filter Side Bar

    • Filter applied as we type or select values

Must have

19

Exercise Deletion

20

Education Material Deletion

21

Questionnaire Deletion

22

Search/Filter Side Bar

As a global admin, I want to be able to search or filter contents using the side bar so that I can see the filtered results in the content list on the right

Acceptance Criteria

• Located on the left side of the services management page and has the following:

  • Search box - filters all text based fields that matches text

  • Categories filter (number will be based on the category depth)

  • Language

• Filter applied as we type or select values

Must have

23

Exercise List

24

Exercise Creation/Editing

As a global admin, I want to be able to create exercise content/activities so that I can add them to the global library and therapist can assign them to patient treatment plans

Acceptance Criteria

• When I click on the New Content button and select New Exercise, I opens the create new exercise page

• Has a radio button to select an option to create a single exercise or do a bulk upload of multiple exercises

• When create a single exercise is selected the page will show a two-column form:

  • First column

    • Will display the thumbnails of the uploaded media for the exercise

      • Has a close button that removes/delete the image

    • After the last image (or on top if no images are uploaded yet) will have an Upload Media button that prompts user to upload a file

  • Second Column

    • Language drop down

      • List all language records available to the exercise

      • Has link in the last item to create new translation (no available if main language is not created yet)

    • Title: textbox, required, 255 characters

    • Aim: textbox, required, 255 characters

    • Instruction: textbox, required, 255 characters

    • Include collecting feedback: checkbox, checked by default

      • If checked: Therapist will have set and rep when they add the exercise in a treatment program

      • If checked: Patient to input feedback on rep, set, pain level

    • Category: List all category drop down of Exercise as defined in the Categories management page

    • Create/Save button

      • Saves created/edited exercise

      • System notification of successful/failed saving

    • Cancel button

      • Returns to the exercise list without saving

• For bulk upload of exercises

  • File to upload browse button to select the file to upload

  • Once uploaded, user needs to map columns to exercise fields ?

Must have

25

Exercise Bulk Upload

26

Exercise Cards

As a user, I want to display the exercise information as cards, so that I can visually display the important information easily

Acceptance Criteria

• The card will show:

  • first image - assume GIF

  • title of exercise (hyperlink)

    • display max 3 lines

    • if longer than 3 lines show ellipsis

    • hover displays full title

  • categories of the exercise

    • display max 2 lines

    • if more than 2 lines show ellipsis

    • hover displays all categories

• Clicking on the title will open the Exercise Creation/Editing page ready for editing

Must have

27

Expanded Exercise Cards

• media slideshow - manual switching of media

Nice to have

28

Education Material Creation/Editing

As a global admin, I want to be able to create/edit education materials so that I can add/update them in the global library of education materials

Acceptance Criteria

• When I click on the New Content button and select New Education Material, it opens the create new education material pop-up modal form

• Has a file browse button to select the file to be uploaded

• Title: textbox, required, 255 characters

• Categories drop downs: List all category drop down of Education Materials as defined in the Categories management page

  • Required

• Language drop down

  • List all language records available to the education material

  • Has link in the last item to create new translation (no available if main language is not created yet)

• Create/Save button

  • Saves created/edited education material

  • System notification of successful/failed saving

    • Display red error message for failed field validation

  • Closes the dialog

• Cancel button

  • Returns to the education materials list without saving

  • Closes the dialog

Must have

29

Education Material List

As a global admin, I want to be able to display the education materials as a data table list

Acceptance Criteria

• Data table of Education Materials

  • Title

  • Category(ies)

  • Language

  • Type - File type

• Summary count label (e.g. "Showing 1 to 5 of 10 items)

• Pagination labels

  • Drop down to select number of items to show in a page

  • Previous icon: returns to the previous page

  • First icon: returns to the first page

  • Next icon: goes to the next page

  • Last icon: moves to the last page

• Action button

  • When click it will show the following actions

    • Edit Info - when clicked, opens the create education material modal pop-up pre-filled with current content information

      • Can save/cancel updated information

    • Delete - When clicked, opens a delete modal confirmation form

Must have

30

Questionnaire Creation/Editing

As a global admin, I want to be able to create/edit questionnaires so that I can add/update them in the global library of questionnaires

Acceptance Criteria

• When I click on the New Content button and select New Questionnaire, it opens the create new questionnaire page

• Title: textbox, required, 255 characters

• Category drop downs: List all questionnaire category as defined in the Categories management page

  • Required

• Language drop down

  • List all language records available to the education material

  • Has link in the last item to create new translation (no available if main language is not created yet)

• Description: textbox, required, 255 characters

• New Question button
  

  • At least one questions should be in the questionnaire

  • Click adds a question

• Question can be dragged to set question order (

  

  )

  • Question number label dynamically changes based on order

• Copy question

  • Copy icon (

    

    ) when clicked creates a copy of the question added at the bottom of the list

• Create/Save button

  • Saves created/edited questionnaire

  • System notification of successful/failed saving

    • Display red error messages for failed field validation

  • Closes the dialog

• Cancel button

  • Returns to the questionnaire list without saving

  • Closes the dialog

Must have

31

Adding Questions to Questionnaire

As a global admin, I want to be able to create/edit questions so that I can add/update them in questionnaires

Acceptance Criteria

• Clicking the New Question button on the questionnaire create/edit page opens a question creation form

• Has a top bar that displays

  • Question number

  • Drag grip icon (

    

    )

    • Click and drag re-orders the question

  • Copy Icon ()

    • copies the questions and add it to the bottom of the question list

  • Edit Icon ()

    • clicking allows user to edit the form

  • Delete Ion ( )

    • pops up a confirmation dialog and deletes after confirmation

• Has the following form fields

  • Question - free text, required, 255 characters

  • Question type - dropdown, required

    • Checkboxes

    • Multiple choice

    • Open-end

      • 2 checkbox options

        • Free text

        • Numbers only

  • Upload image link

  • Answer Options - required

    • Checkboxes - minimum of two options, can multi-select

    • Multiple choice  - minimum of two options, can only choose 1 option

    • Open-end

      • free text - max 255 characters

      • numbers only - numbers only max 15 character

• Done button

  • Saves created/edited question

  • System notification of successful/failed saving

    • Display red error messages for failed field validation

  • Closes the question form

• Cancel button

  • Returns to the questionnaire list without saving

  • Closes the question form

Must have

32

Questionnaire List

As a global admin, I want to be able to display the questionnaires as a data table list

Acceptance Criteria

• Data table of Questionnaires

  • Title

  • Description

  • Category(ies)

  • Language

  • Number of questions

• Summary count label (e.g. "Showing 1 to 5 of 10 items)

• Pagination labels

  • Drop down to select number of items to show in a page

  • Previous icon: returns to the previous page

  • First icon: returns to the first page

  • Next icon: goes to the next page

  • Last icon: moves to the last page

• Action button

  • When click it will show the following actions

    • Edit Info - when clicked, opens the create questionnaire page 

      • Can save/cancel updated information

    • Delete - When clicked, opens a delete modal confirmation form

Must have

33

Categories Management

As a Global Admin, I want to manage the Category of contents (Exercises, Questionnaires, Education Materials), so that I can manage the contents easier

Acceptance Criteria

• When I click on the Categories menu, I will open the categories list page

• It will have 3 tabs for Exercises, Questionnaires and Education Materials

• Each tab will have a multi-column layout where each column corresponds to a category level

• On each column

  • Have search box to search/filter category

  • Have a  icon to add new category

  • Clicking the category name displays the category values

  • Clicking the category value displays the sub-category in the next column

• On each category item will have

  • Edit Icon ()

    • clicking opens the create/edit category pop-up

  • Delete Ion ( )

    • deletes category

    • only available if category is not in use

• Categories that are not used will have a "Not in use" label

Must have

34

Create/Edit Category

As a Global Admin, I want to be able to create/edit categories so that I have more categories I can use to differentiate contents

Acceptance Criteria

• When I click the  icon in the categories column, I will open the create/edit category pop-up dialog

• The dialog has

  • Radio button to indicate if Existing Category or New Category

  • Category: text box, required, 255 characters

    • Not available if category level is the same as the maximum depth

  • Category value: text box, required, 255 characters

    • I can add multiple values by separate them by semicolon (;)

  • Add/Save button

    • Add/saves created/edited category

    • System notification of successful/failed saving

      • Display red error messages for failed field validation

    • Closes the dialog

  • Cancel button

    • Returns to the category list without saving

    • Closes the dialog

Must have