Web Application for Personal Heart Record System

PHR Web App aims to provide user a way to view summary of their activities, also be only a way for registration both doctor, nurse and patient.

To run this project

note: the server this web app connected to is on PHRstorage

• clone this project

git clone https://github.com/mtreerungroj/phr-web-app.git

• install necessary dependencies

npm install

• run localhost

npm start

Todo

Authentication

• login form
• user can log in using email/password
• user can log out
• show different page for different user role: staff (doctor/nurse) and patient
• user can reset password
• use stepper showing current step
• show snackbar message when login failed

Server

• create pin_code table: store userid, pin_code
• create patient_code table: store userid, patient_code
• create REST API provide unique generated PIN code
• create REST API provide unique generated patient code
• can store data in Thai language: Profile
• create new tables: patient_code, pin_code
• can clear all data in table: drop table and create a new one

[staff] Registration

• registration form step1: email/password
• registration form step2: profile data
• create new account to Firebase Authentication (resolve userid)
• update user profile data to database via REST API
• retrieve unique generated PIN code from server
• store pin_code to database
• store paired userid and PIN code to pin_code table

[patient] Registration

• registration form step1: email/password
• registration form step2,3,4,... : profile data (design each step)
• create new account to Firebase Authentication (resolve userid)
• update user profile data to database via REST API
• store patient_code to database
• store paired userid and patient code to patient_code table

[staff] Dashboard

• show profile data
• can search for patient

[patient] Dashboard

• show profile data
• show activities result summary

[staff] Profile

• show all profile data
• form for editing their profile data
• user can change (upload) profile picture: input type='file'
• upload profile picture file to Firebase storage
• update edited profile data to database
• show Snackbar if update profile successfully

[patient] Profile

• show all profile data: personal information
• show all profile data: medical information
• form for editing profile data: only personal information
• user can edit only their personal information data
• user can change (upload) profile picture
• upload profile picture file to Firebase storage
• update edited profile data to database
• show Snackbar if update profile successfully

[staff] Search Patients (authorization)

• get all patients list with basic data from server
• show all patients: patient_code, gender, firstname, lastname, admit_date
• can filter patients by patient_code, firstname, lastname
• can view profile data of selected patient
• can edit all profile data of selected patient
• show Snackbar if update profile successfully
• have authorization to access all patient data (profile data and activities result summary)
• show date format as DD/MM/YYYY

[staff] Report

Pie Chart

• show user's activity result in pie chart: number of patients in each level
• show more details: who're in each level: firstname, lastname

Line Chart

• show patient's activity result compare to other patients in line chart: : x-axis = day (1,2,3,...), y-axis = level
• can select patient to show in chart

[patient] Report

• show patient's activity result in line chart: default is x-axis = date, y-axis = level
• if not pass screening test, show level 0
• data point color: green = pass screening test, red = not pass screening test
• click at data point to show more information: full result
• hover on data point to show tooltip information: cannot customize chart
• can choose range of date to show data

Bugs/Others

• render InAccessible page only if path is not match
• redirect to '/' when log out
• check DatePicker value
• refactor PatientInformation component
• initialize admit_date to the day that make a registration and not change when update profile
• is surgery data still need? // NO...
• Warning when editting my empty profile:

A component is changing an uncontrolled input of type text to be controlled.
Input elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled input element for the lifetime of the component.
More info: https://fb.me/react-controlled-components