coronasafe/care_fe

Care is a Digital Public Good enabling TeleICU & Decentralised Administration of Healthcare Capacity across States.

Our goal is to continuously improve the quality and accessibility of public healthcare services using digital tools.

🚀 Staging Deploy

Auto deployed to care.ohc.network for develop branch. All pull requests have preview builds powered by Netlify.

Getting started

• 💬 Comment on the issue if you are willing to take it up, and link the pull request with the issue.
• 🏷️ Tag @coronasafe/code-reviewers for faster resolution.
• 📸 Attach screenshots in the pull requests showing the changes made in the UI.

Install the required dependencies

npm install

🏃 Run the app in development mode

npm run dev

Once the development server has started, open localhost:4000 in your browser. The page will be automatically reloaded when you make edits and save. You will also see any lint errors in the console.

🔑 Staging API Credentials

Authenticate to staging API with any of the following credentials

- username: dev-districtadmin
  password: Coronasafe@123
  role: District Admin

- username: staffdev
  password: Coronasafe@123
  role: Nurse

- username: doctordev
  password: Coronasafe@123
  role: Doctor

Contributing to CARE

• Create a branch with branch name of the format issues/{issue#}/{short-name} (example issues/7001/edit-prescriptions) from the latest develop branch when starting to work on an issue.
• Once the changes are pushed to the branch, make a pull request with a meaningful title (example: "💊 Adds support for editing prescriptions" #6369)
• Ensure the issue number is mentioned in the PR with a closing tag by following the PR body template. (Refer: Linking a pull request to an issue)
• Once the code review is done, the PR will be marked with a "Needs Testing" label where it'll be queued for QA testing.
• Once tested, the PR would be marked with a "Tested" label and would be queued for merge.

Testing

To ensure the quality of our pull requests, we use a variety of tools:

• Automated E2E Testing: We use Cypress for end-to-end testing to automatically verify the functionality and performance of our code.
• Manual Real Device Testing: We use BrowserStack to manually test our code on real devices, ensuring compatibility and functionality across different platforms and browsers.

🧪 Run cypress tests

To run cypress tests locally, you'll need to setup the backend to run locally and load dummy data required for cypress to the database. See docs.

Once backend is running locally, you'll have to ensure your local front-end is connected to local backend, by setting the CARE_API env.

#.env
CARE_API=http://127.0.0.1:9000

Once done, start the development server by running

npm run dev

Once development server is running, then run the cypress tests in either of the ways described below.

npm run cypress:run        # To run all tests in headless mode.

npm run cypress:run:gui    # To run all tests in headed mode.

npm run cypress:open       # To debug and run tests individually.

• Failed test screenshots are saved in cypress/screenshots
• All test videos are saved in cypress/videos

📖 Documentations

• CARE Documentation
• Swagger API Documentation
• Storybook component library
• Testing Documentation

🚀 Production

Build the app for production

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

Start a production http-server

npm run preview

Starts a production http-server in local to run the project with Service worker. The build is minified and the filenames include the hashes.

🚀 Your app is ready to be deployed!

care_fe's Issues

The patient create flow does not allow creation of a patient without valid choices

The form does not validate for submission without selecting a disease.
The diseases wont be in the list most of the time, its safe to add an other so that users wont get confused

https://care.coronasafe.in/facility/200/patient

{medical_history: [{disease: [""None" is not a valid choice."]}]}

Minor copy correction in consultation form

Rename Add consultation to Add Consultation Details

Rename suggestion to Decision after consultation

write unit tests

Patient Data Entry

backend issue coronasafe/care#80
in frontend, the patient name field should be read-only. and must populate a unique uid like smart-puppy or similar

Deadline is tonight in staging and production by tommorow morning.

Hospital Admin View

• Dashboard to see there own added hospitals

• ability to add new hospitals

• add and edit bed capacity

• add and edit doctor capacity

Hospital Admin should only have access to the Hospitals he/she create.
Some of the sub forms are already created but need to integrated based on the per user scheme.
Apis are avaliable at https://dev.coronasafe.in/swagger

Bug in oxygen type input field type

The input type for oxygen capacity should be changed to number.
Please update the placeholder to Oxygen Capacity in liters

Create a triage form and view inside facility home

The form should have an option to update the following fileds.

OP TRIAGE

TOTAL PATIENT VISITED IN CORONA TRAIGE	TOTAL NO.OF PATIENT ADVISED HOME QUARANTINE	TOTAL NO.OF PATIENTS UNDER ISOLATION	TOTAL OF PATIENTS REFFERED

Refer the following issue for more details
coronasafe/care#127

dashboard

create a dashboard with the patient count, people in observation,
positive cases, negative cases, number of tests done, etc

A district admin should be able to edit, view and index ambulances

A district admin should be able to edit, view and index ambulances

Edit button is not working for consultation list

https://care.coronasafe.in/facility/200/consultation-list

Login Screen

Api to be avaliable at POST - https://dev.care.coronasafe.in/api/v1/login

Check if use is signed in GET - https://dev.care.coronasafe.in/api/v1/getcurrentuser

Show error messages in the notfication.

Parse and show error messages from the notification response.

1. 400 Bad Request - show fields
2. Other 4xx errors - Show the message from response (detail key in response)
3. 5xx errors - Show static error message

400 Bad Request format

{
  field1: [
      "error msg 1",
      "error msg 2"
   ],
  field2: [
    "error 3"
   ]
}

Other 4xx error response format

{
    "detail": "Given token not valid for any token type",
    "code": "token_not_valid",
    "messages": [{
        "token_class": "AccessToken",
        "token_type": "access",
        "message": "Token is invalid or expired"
    }]
}

Add Pnotiy to manage notification and replace all usages of AppMessage with pnotify.
https://sciactive.com/pnotify/

Handle all errors in fireRequest.tsx

Add logo on loading screen

The current loading spinner looks so plain.
It will be great if we can add a logo on top of it with minimum styling so that it looks good.

Bug in Add Consultation form

https://care.coronasafe.in/facility/166/consultation

Facility should not be a field in the form as it readly avilable in the sate.
It should belng to a ptient so that, we know the patient ID.
Discharge data should default to nil
add a description for suggestion

Prepare for prod merge of hospital workflow

Comment out code linking patients to hospitals since that workflow is not completed

Refresh token every 5 minutes

We've planned the below auth changes:

• JWT timeout -> 10 minutes
• Refresh token -> 30 mins

So make sure the the token is refreshed well ahead, say, in every 5 minutes

@vigneshhari

Add a form to onboard ambulance

Vehicle Details

• Vehicle Registration Number: string (validation: A-Z and 0-9 (Alpha numeric only))
• Insurance Valid till: date (validation- year should one of 2020 / 2021 / 2022)
• Name of Owner: string
• Cell Number of Owner: number (10 digit mobile number)
• Smart Phone: bool
• Primary District Served: District.id
• Secondary District Served: District.id
• Third District Served: District.id
• Oxygen Yes / No
• Ventilator Yes / No
• Suction Machine Yes / No
• Defibrillator Yes / No

Driver Details

Name of Driver 1
Cell Number of Driver 1
Smart Phone Yes / No

Driver Details

Name of Driver 2
Cell Number of Driver 2
Smart Phone Yes / No

Related Backend Issue coronasafe/care#63

Error in sample creation form

Status: 400

{consultation: ["Invalid pk "2" - object does not exist."]}

I was trying to add a sample to a patient.

When you are fixing it.
Default status to Request submitted (a sample creation will always start with a request submission)

Hide result it doesn't make sense to ask result before taking a sample.

remove/fix sample_number it looks like that field is looking for a consultation_id (This is where the API is erroring out)

user listing page

user listing page for super admin

Add a type for ambulance

options => [Basic, Cardiac, Hearse]
#83

Hospital View Page

Hospital View Page
With all Details of the Hospital

Hospital Onboarding

• Add Hospital Form -> @injas427
• View for Hospital Admin -> @cristomathew
• Add Hospital Capacity Form -> @injas427
• add Doctors capacity Form -> @Kuncheria-Kuruvilla
• edit BED Capacity -> @Kuncheria-Kuruvilla
• edit Doctor Capacity -> @anandsimmy
• #1 Facility Admin Dashboard - >

Add pnotify for notifications

Browser notification for success message looks bad.

https://www.npmjs.com/package/pnotify will be a good solution

Make second driver details optional in ambulance form

The second driver field should be optional.
Please update the validations to match.

registration page

POST api to be avaliable at https://dev.care.coronasafe.in/api/v1/signup
fields and registration types will be updated soon.

Update ambulance form

GoK wants to capture two More information:

Add a question in ambulance field which can

1. I / we will provide services free of any charge.

2. I / we will require fees for providing service @ Rs. x.xx / KM

(Kindly note CCC / GoK / CCC is not committing any fee payment at this time; this is only for information collection at this time)

fixes for hospital view

Bugs in create facility

• add hospital should not clear local state. (if i hit cancel, i should not go to loading)
• Current utilization should not exceed Total capacity
• Add bed type should go on loops. / show a form to all 4 bed types and send request.
• Add doctor types should also should show a list / do loops
• Latitude and lang should have a picker / instruction to add latitude and lang
• Should not allow adding same bed type again (its safer to show all 4 bed types and ask for capacity and utilisation) (edited)

Make a title bar and side menu

This should be independent of app routes. Whatever route, this should be in place to navigate or search.

`

Fix registration number validation in ambulance

Also make sure the year picker just has 2020,2021,2022

Add a confirmation message in Ambulance Enrollment Page

“I / We confirm and agree that the Ambulances enrolled in the Private Voluntary Online Ambulance Network by filling this online form will work under instruction and direction of the State Mission Director, National Health Mission, Kerala or officers / teams duly authorised by the State Mission Director, National Health Mission, Kerala."

Avoid full page reload for LSG data

Currently we are switching to fulll page reload for loading district and other data.
Lets have loading icon on the picker with a save disabled insted of a full page reload

Also need to correctly set the state / district / local body on patient edit.

Create dashboard for overall capacity visualization

Create a dashboard for data visualization of the capacity.

The total capacity should be shown along with current utilization
district wise capacity and current utilization should be plotted.

Patient Form

Generate a unique id label instead of a text field for the patient name ..
also after submit a dialogue box showing the id and asking them to note it down as hard copy.
Cyber security feature

Create a sigin up for corona care centers

route /join

This should be a copy of our facility onboard form with few changes.

• Type - [educational institution, hotel, hostel, lodge]

The join page should have details on Guidelines for bed spacing, etc.

Add Facility (Hospital) Page

Form should have the below inputs.
Hospital name, district, Contact number, Address, Geolocation

Existing page for ref - https://dev.care.coronasafe.in/facility/create/

Add location picker to Facility Add

add a location picker using leaflet to populate latitude and longitude text fields

add all meta tags

add twitter , and facebook meta tags

Rename `contact with carrier`

Rename contact with carrier to Contact with Covid Patient

Ambulance Data View

• district wise count as cards

• view to select an ambulance from a list filtered district wise.
  - [ ] pagination and search

• ambulance detail view with details

Create Care centre view

Create Care centre view page similar to hospital view

Create dashboard for district admin

The district admin should be able to view all the facilities listed in a district

update hospital info page

the page should auto-populate the current data

create search and filters

create search and filter option for patients, facilities and users

Add google ReCapcha to signup Page

Add Google ReCaptcha To SignUp.

Replicate the landing page from from care

url: http://care.coronasafe.network/

Patient Homepage

Create a patient Homepage.

Create a sample flow inside patient record

coronasafe/care#151

Create dashboard for facility admin

The facility admin should be able to see their capacity, list capacity and update capacity.

The UI should also add an option to capture the geo coordinates for a hospital.

(port the existing and update design)

Low priority

Required type definitions for props for common components

All the common components props as defined as any.
Dev need to go through the component to see what all props need to be passed.

No build folder

I've successfully built the development environment , however 'npm run build' is not generating any build folder