masslight / ottehr Goto Github PK

All screenshots taken at 320x900px

Looks fine

• checkin

• checkin-permission

• post-call

• waiting-room

Needs work

• dashboard

• provider-profile

• registration

We should have:

• License
• README
• Contributing guidelines
• Code of conduct

For v0.1 we are not expecting to be ready for people to fork and contribute to the project, but for v1.0 we want to support this. We should explain this in the above documents so that people are clear on our expectations.

Contributing guidelines

CONTRIBUTING.md

We can explain

• what contributions we're looking for
• how to file a bug report (issue/PR templates)
• How to set up locally and run tests
• roadmap and project vision
• How to get in touch with us

Code of conduct

CODE_OF_CONDUCT.md

We can just use https://www.contributor-covenant.org/

Camera toggle button does not behave consistently, Some times remoteParticipant gets black screen & sometimes gets last frame from video.

It is knowm issue in Twilio community and suggested fix is:

"listen to those events and update the UI"

 room.on('trackAdded', track => {
  track.on('enabled', () => {...});
  track.on('disabled', () => {...});
});

twilio/twilio-video.js#786
blackuy/react-native-twilio-video-webrtc#165

Need to create the URL for the image and configure it in zapEHR.

App

#### package.json

- s3://${PREFIX}-TODO.masslight.com
- --profile TODO
- CLOUDFRONT_ID=TODO

#### readme.md

- "Todo this section is out of date"
- "...you must set up an aws profile called, TODO, with..."

env/* files

• VITE_PROJECT_API_URL=http://localhost:todo,

src/index.tsx

• clientId="TODO"

### Zambdas

#### README.md

- "...copy in the env files from the TODO-secrets repository..."
- Zambdas One Time Setup, Step 6 link in ", ...testing backend in secrets repo)."
- Scripts > create subscription has no description

#### scripts/package-for-release.sh

- ZIP_ORDER=('TODO', 'TODO', 'TODO')

#### src/version/index.ts

- version: 'TODO'

For now .env/dev2.json exists, but there is more work to be done if we want this environment to be useful.

Tasks

• Add dev2.ottehr.com to vercel
• Create dev2 github environment and add dev2.json to github secrets
• Update package.json and build-and-deploy scripts to support dev2 deployments

STR

1. Join a call as a patient or a provider
2. Open the call settings modal

ER

https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/ZapEHR-%26-OttEHR---app-design?type=design&node-id=12743-38385&mode=design&t=P3ZqKpvlM8BjWabf-0

AR

Note that the modal doesn't respect my denying camera and microphone access

When provider hits update, there is no feedback of success/error. We need to add loading with some indicator of success/error.

Also should add loading for the slug availability check

Update the Provider Profile with the data from /profile page.

Update the following fields:

• Title
• First Name
• Last Name
• Slug
• Practitioner.name.text (combine Title, FirstName, and LastName)

NOTE: Email: please note that it is currently not possible to change the user's email. Therefore, the email field should be disabled for editing.

Designs: https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/zapehr---app-design?type=design&node-id=12622%3A13491&mode=dev

Dashboard

• Copy/paste link for this provider’s room URL
• Patient queue
• Settings
  • Edit name and title

Copyright 2023 MassLight, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

You may not remove or reduce in prominence any attribution or reference to zapEHR or MassLight displayed in user interfaces, source code, images, or other materials covered by this license. Any user interfaces or source code derived from material covered by this license must display similar attribution. You may arrange an attribution-free commercial license by contacting [email protected].

You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits or requires.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

See #93, bottom-left corner for each participant. The provider should see the patient's name and vice-versa

I suspect this needs us to build the patient/provider wrapper/redirection in the root page

STR

1. Login as a provider
2. Logout

ER

1. Redirected back to the login page

AR

1. Redirected to the root of the app

Patient designs: https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/zapehr---app-design?type=design&node-id=12743%3A38385&mode=dev
Provider designs: https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/zapehr---app-design?type=design&node-id=12743%3A30126&mode=dev

• Video controls: video on/off, mute/unmute, camera/mic/speaker settings, troubleshooting that restarts your video connection

STR

1. Open provider slug in new tab
2. Fill in information and join waiting room
3. Join the call as a provider

ER

1. Provider can see both videos
2. Patient can see both videos

AR

1. Provider can see both videos

Note: this can be fixed by the provider toggling their video, but that shouldn't be the case

STR

1. As a patient, check-in to a waiting room
2. Click continue without camera and microphone

ER

1. Patient joins the queue without being requested to provide camera and microphone access to the browser

AR

1. The browser asks for permission to access the camera and microphone
2. Patient joins the waiting queue with camera and microphone on

Use otherColors object if needed.

STR

1. Login as a provider
2. Navigate to the /profile page

ER

1. All current provider information is filled in

AR

1. The form is empty

STR

Set screen resolution to 320x900 (then also check when the width is set to every breakpoint in the theme provider)

ER

https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/ZapEHR-%26-OttEHR---app-design?node-id=13243%3A7705&mode=dev
https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/ZapEHR-%26-OttEHR---app-design?node-id=13246%3A20699&mode=dev

AR

Provider

Dashboard:

Then I have to scroll right to find the burger menu

Patient

Check-In

Video Settings

Waiting Room

Note: I couldn't check the rest of the screens since the provider's join call button doesn't work

Advice from @DariaMyro on how to design these pages for now:

anything that is a form will follow this example in terms of paddings, all fields should be in one column and buttons take full width. Patient pages will have to be designed, but if design is a blocker you can try to look into MUI guide suggestions.

Encountered a bug where the camera light remains active when navigating backwards from the waiting room.
This issue could lead to numerous edge cases and may affect user privacy.. A systematic solution is needed to ensure consistent behavior of the camera across app.

Description

The goal for this ticket is to check availability, store the slug in a way that it is linked to the provider, and then make that slug a unique URL where patient checkin can happen.

Below is a description of the slug availability endpoint, but this doesn't cover all of the functionality described above.

POST Slug Availability

Description: During provider registration, once they update the slug, we will execute this endpoint to check the availability of the chosen slug. This will also run on provider profile update.

Zambda Settings

Name: Get Slug Availability
Trigger method: http_auth
Schedule: undefined

Request

HTTP Method: POST
Endpoint URL: https://project-api.zapehr.com/v1/zambda/{zambda-id}/execute

Headers

Authorization: Bearer {auth-token}
Content-Type: application/json

Body

Old slug?: string (nathanrobinson)
Slug: string (nathanrobinson)

Response

Status: 200

Body

Available: boolean (true)

I think the endpoint assumes I'm trying to update my profile as a provider instead of create one since both pages use the same underlying component

STR

1. Open dev env (I'm using pnpm start:dev for now)
2. Fill in details
3. Notice button says "update" instead of "register"
4. Try and submit the form

ER

I register and get sent to my dashboard

AR

STR

1. Navigate to https://testing.ottehr.com/dashboard while logged out

ER: View a loading page of some kind while authentication is checked
AR: View the dashboard with stubbed data while authentication is checked

STR

1. Join the waiting room
2. Open the video settings
3. Change microphone
4. Close settings

ER

1. Settings modal is closed
2. Back in the waiting room with video preview

AR

1. Settings modal is closed
2. Back in the waiting room without video preview

STR

1. Join a call
2. Leave the call

ER

1. Redirected to the /post-call page

AR

1. Redirected to the /post-call page, but actually shown the /waiting-room page.
2. Can't confirm the actual structure of the page because it's never shown

The current implementation of the slugAvailability function incorrectly flags a slug as unavailable if it is already used by the practitioner currently updating their profile. This results in an error message: "This slug is already taken, please use another one"

The function needs to be updated to exclude the current practitioner's slug from the availability check during profile updates.

STR

1. Login as a provider
2. Navigate to the profile page
3. Fill in or update information
4. Click the update button

ER

1. The form is updated
2. The page is refreshed or I'm redirected to the dashboard

AR

1. Nothing happens

Migrate our v1.x zapehr/sdk usages to use the v2.x version.

Update usages of fetch to use v2.x zapehr/sdk.

Presumably this happens with all deployed envs

This includes but is not limited to:

• Buttons
• Descriptions
• Dropdown choice labels but not values (e.g. gender)
• Image alt texts
• Labels
• Menu items
• Titles

For translations of these files (e.g. to Spanish), use e.g. "footer": "TODO Powered by"

STR

1. Join a call
2. Leave the call

ER

1. Redirected to /post-call page
2. The logo should be the orange provider otter
3. See call time and button to go back to dashboard

AR

1. #87

For joining and fetching the patient queue, we plan to store the start time on Encounter.period.start and visit status on Encounter.status. Patients in the waiting room will have a start time and status on-hold. If the call is answered they move to status in-progress, and status completed once they end the call. When patients are joining the waiting room the only piece of information they provide is their name, so we will store this name on Encounter.extensions[other-participants][other-participant][reference].display in the same object where we store the M2M profile that lets anonymous users join video calls.

STR

1. Join a call as both patient and provider
2. Leave as either patient or provider

ER

1. Participants should be redirected to the /post-call page

AR

1. If the patient leaves, they are redirected to the /post-call page, but are actually shown the /waiting-room page. If the provider leaves, they are redirected to the /post-call page (see #87).
2. The remaining participant is still in the call with a frozen other participant video.
3. In both cases, #98

Patient Designs: https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/zapehr---app-design?type=design&node-id=12676%3A23053&mode=dev
Provider Designs: https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/zapehr---app-design?type=design&node-id=12676%3A27872&mode=dev

• Video call support
• Mirror Window that shows your video feed that is being sent to other member of your video call
• End call
• Put on hold (provider only)

Designs: https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/zapehr---app-design?node-id=12616%3A6940&mode=dev

Registration / Login
Required fields

• Email
• Title (Mr, Ms, Mrs, Dr)
• First name
• Last name
• Room name (slug) - must check availability
• Password
• Checkboxes: “I am not a patient” and T&C

Start adding app and zambda tests, particularly for common/helper/shared functions

See #95 AR point 3

Patient designs: https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/zapehr---app-design?type=design&node-id=12676%3A27567&mode=dev
Provider designs: https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/zapehr---app-design?type=design&node-id=12743%3A39120&mode=dev

Once both provider and patient flows exist, create either a catch-all 404 route or redirect users to the login page (if not authenticated) or the dashboard page.

New icon design: https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/ZapEHR-%26-OttEHR---app-design?type=design&node-id=13587%3A1448&mode=dev

Designs: Designs for waiting room: https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/zapehr---app-design?type=design&node-id=12661%3A8905&mode=dev

STR

1. Join the waiting room as a patient
2. Join the call as a provider
3. Leave the call

ER

Provider sees the call duration

AR

In get-patient-queue Zambda searches for encounters using a PractitionerID and then processes and maps these encounters into the Patient Queue format. This is a complex process, so we should write unit tests to ensure that the logic gracefully handles errors or unexpected response structures.

Relevant code:

  const encountersSearchResults: Encounter[] = await fhirClient.searchResources({
    resourceType: 'Encounter',
    searchParams: [
      {
        name: 'practitioner',
        value: `Practitioner/${providerId}`,
      },
      {
        name: 'status',
        value: 'arrived',
      },

      {
        name: 'date',
        value: `sa${startOfDay}`,
      },
    ],
  });

  const patientsQueue = encountersSearchResults.map((encounter) => {
    const patientNameExtension = encounter.extension
      ?.find((ext) => ext.url === 'https://extensions.fhir.zapehr.com/encounter-other-participants')
      ?.extension?.find((ext) => ext.url === 'https://extensions.fhir.zapehr.com/encounter-other-participant')
      ?.extension?.find((ext) => ext.url === 'reference' && ext.valueReference?.display);

    const patientName = patientNameExtension?.valueReference?.display;
    const queuedTime = encounter.period?.start;

    return {
      encounterId: encounter.id,
      patientName,
      queuedTime,
    };
  });

Designs for providing name: https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/zapehr---app-design?type=design&node-id=12661%3A8288&mode=dev
Designs for video setup: https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/zapehr---app-design?type=design&node-id=12661%3A8624&mode=dev

Checking in will put patient into waiting room

STR

1. Join a call

ER

https://www.figma.com/file/E2CNqjutGh7di0nBEZKJ0B/ZapEHR-%26-OttEHR---app-design?type=design&node-id=12676-23053&mode=design&t=P3ZqKpvlM8BjWabf-0

AR

Provider view

Patient view

I'm particularly thinking of FileUpload. It was built specifically for card uploads, but if we want this to be a full EHR eventually I think we should separate the file upload aspect.

If we're actively using this component in Ottehr, we can then make a card upload component that would use the focused file upload one.