i

Republic of the Philippines

Laguna State Polytechnic University
Province of Laguna

COLLEGE OF COMPUTER STUDIES

THE DEVELOPMENT OF HEALTHWATCH:

A HEALTH MANAGEMENT SYSTEM FOR SAN NICOLAS HEALTH UNIT

A Capstone Project
Presented to the Faculty of
College of Computer Studies
Laguna State Polytechnic University
San Pablo City Campus
San Pablo City

In Partial Fulfillment
of the Requirements for the Degree
Bachelor of Science in Information Technology

By:
Brual, Aislinn
Estrellado, Jem Jenica V.
Ramos, Jericho C.
Segovia, Lyca P.

January 2024
 ii

Republic of the Philippines

Laguna State Polytechnic University
Province of Laguna

COLLEGE OF COMPUTER STUDIES

APPROVAL SHEETS

This Capstone project entitled “The Development of HealthWatch: A

Health Management System for San Nicolas Health Unit” developed and
submitted by Brual, Aislinn B., Estrellado, Jem Jenica V., Ramos, Jericho
C., and Segovia, Lyca P., in partial fulfillment of the requirements for the
Degree of Bachelor of Science in Information Technology with
Specialization in Service Management Program has been approved and
accepted.

JOESUA R. MANZANERO, MSIT

Capstone Project Adviser

Approved and accepted by the Committee on Oral Examination with a

grade of ___________.

JENNELYN E. ESPINUEVA, MIT RONNEL A. DELA CRUZ, MSIT

Member Member

JOANNA E. DE TORRES, MIT MARCO JR. N. DEL ROSARIO, MIT

Research Coordinator Member

Accepted in partial fulfillment of the requirements for the Degree of

Bachelor of Science in Information Technology.

RONNEL A. DELA CRUZ, MSIT

Associate Dean

Date: _____________________

DELON A. CHING, EdD

Director, Research and Development

Control No. ____________________

 iii

DEDICATION

To those who held our hands when the path felt steep and cheered us

on when the finish line felt distant, we dedicate this journey first to our family,

who encouraged us to finish this project throughout our journey. They inspire

and provide us with strength whenever we’re hopeless and want to give up.

To our friends and classmates as we shared our journey through

laughter, late nights, and unwavering support that gave us the courage to finish

this project.

To our professor, your guidance served as our compass and kept us on

track. The trust you placed in us let us step beyond our comfort zone and turn

this project into an opportunity for our newly acquired skills. We appreciate that

you were more than simply a teacher; you were a guide, an encourager, and a

never-ending source of inspiration.

To the San Nicolas Health Workers, you are the heroes on the frontlines,

facing challenges we can only imagine. Your perseverance and commitment

served as the inspiration for our project, which was our small way of saying

thank you for all of your wonderful service. We hope that this project contributes

in some way to ease your burden and lessen your workload.

To the kind souls who participated, your willingness to share your

experiences and insights was the cornerstone of this project.

Finally, I would like to express our sincere gratitude to Almighty God for

being our guiding force during this journey. Your kindness kept us going while

we were doubting ourselves, and your light showed us how to proceed. Without

your guidance and blessings, we would never have met our goals.
 iv

ACKNOWLEDGEMENT

First and foremost, we give thanks and praises to the Almighty Lord for

his many favors during our capstone project, from helping us come up with the

title to helping us finish it effectively.

We would like to convey our profound appreciation and heartfelt thanks

to Mrs. Joanna E. De Torres, our capstone project professor, for sharing her

knowledge with us students and offering support during this capstone project.

We also thank Mr. Joesua R. Manzanero, our active capstone project

adviser, for being our rock and our source of support for every decision we took

on the project. His enthusiasm, genuineness, and drive have greatly inspired

us to complete the project and convey it as effectively as possible.

We would like to express our sincere gratitude to the panelists for our

capstone project, led by Mr. Ronnel A. Dela Cruz, as well as to Mrs. Jennelyn

Espinueva, Ms. Joanna E. De Torres, Mr. Joesua R. Manzanero, and Mr. Marco

Jr. N. Del Rosario for their outstanding contributions that helped our capstone

project become an excellent paper that benefits the College of Computer

Studies.

As a means of assisting us in getting ready for the future, we are

incredibly appreciative of our parents' love, prayers, sacrifices, and financial

support. Finally, we should pat ourselves on the back for persevering through

these doubts and completing this capstone project to benefit the college and

the industry.
 v

ABSTRACT
The developers created a health management system for the capstone project
entitled, “The Development of HealthWatch: A Health Management System for
San Nicolas Health Unit”. HealthWatch provides a centralized platform for
patient record management, medical history, patient health status,
consultations, diagnoses, and other clinical and administrative functions within
the San Nicolas Health Unit. The purpose is to revolutionize the manual way
health units manage their processes and be able to identify the prevalent
diseases using a visual map. The project methodology consists of Project
design, the outline of the system; Project Development, the phases of the
development of the project: Project Procedure, the testing and evaluation
methods, and its results where the system is tested using functionality,
compatibility, and evaluated using ISO/IEC 25010 to evaluate the functional
suitability, performance efficiency, usability, reliability, and security. The
developers were able to conclude that objectives that are set are achieved,
functions are working properly, and respondents show satisfaction with a total
mean of 4.36 with an interpretation of “Very Good” from IT Experts and a total
mean of 4.59 with an interpretation of “Excellent” from Non-IT based on the
testing and evaluation results conducted.
 vi

TABLE OF CONTENTS
PRELIMINARIES PAGE NUMBER
Title Page ……………………………………………………………………………i
Approval Sheet ……………………………………………………………………..ii
Dedication ………..………………………………………………………………...iii
Acknowledgement…..……………………………………………………………..iv
Abstract ……………………..………………………………………………………v
Table of Contents ……………………………..…………………………………..vi
List of Figures ………………………………………………..…………………...viii
List of Tables ……………………………………………………………..……….xii

CHAPTER I - THE PROJECT AND ITS BACKGROUND

Introduction ………………………………………………………………………...1
Project Context …………………………………………………………………….2
Project Purpose ……………………………………………………………………4
Project Objectives …………………………………………………………………5
Project Scope and Limitation …………………………………………………….6
Conceptual Model of the Project …………………………………………………8
Operational Definition of Terms ………………………………………………...10

CHAPTER II – REVIEW OF RELATED LITERATURE AND STUDIES

Related Literature ………………………………………………………………..12
Related Studies …………………………………………………………………..25

CHAPTER III – METHODOLOGY

Project Design ……………………………………………………………………30
Project Development …………………………………………………….………54
Project Testing and Evaluation Procedures …………………………………..56

CHAPTER IV – RESULTS AND DISCUSSION

Project Requirements and Specification ………………………………………60
Project Description ……………………………………………………………….62
Project Features ………………………………………………………………….62
Project Hierarchy …………………………………………………………………63
 vii

Project Testing and Evaluation Results ……………………………………….84

CHAPTER V – SUMMARY OF FINDINGS, CONCLUSIONS, AND

RECOMMENDATIONS
Summary of Findings ……………………………………………………………98
Conclusions ………………………………………………………………………99
Recommendations ……………………………………………………………..100
BIBLIOGRAPHY ……………………………………………………………….101

APPENDICES

APPENDIX A - Gantt Chart

APPENDIX B - Evaluation Instrument

APPENDIX C - Pictures Taken During Testing and Evaluation

APPENDIX D - IT Experts’ Profile

APPENDIX E - Evaluation Result Matrix

APPENDIX F - User’s Manual

APPENDIX G - Source Code

APPENDIX H - Curriculum Vitae

 viii

LIST OF FIGURES

Figure No. Title Page No.

1 Conceptual Model of HealthWatch 8

2 Fishbone Diagram of HealthWatch 30

3 Work Breakdown Structure of HealthWatch 31

4 Flowchart of Health Unit (Current Process) 33

5 Flowchart of HealthWatch System 34

6 Flowchart for Main Interface 35

7 Flowchart for Dashboard Page 37

8 Flowchart for Patients Page 37

9 Flowchart for Consultations Page 38

10 Flowchart for Immunization of Senior Citizens Page 38

11 Flowchart for Immunization of Infants Page 39

12 Flowchart for Records of Mortality 39

and Natality Data Page

13 Flowchart for User Management Page 40

14 Flowchart for Reports Page 40

15 Log-In Form of Health Watch 41

16 Dashboard Menu of Health Watch 42

17 Patients Menu of HealthWatch 42

18 Add New Patient Record of HealthWatch 43

19 Consultations Menu of HealthWatch 43

20 New Consultation Record “Personal 44

Information” of Health Watch

 ix

21 New Consultation Record “Medical History” 44

of Health Watch

22 New Consultation Record “Cont. Medical History” 45

of Health Watch

23 New Consultation Record “Social History” 45

of Health Watch

24 New Consultation Record “Immunization” 46

of Health Watch

25 New Consultation Record “Physical Examination” 46

of Health Watch

26 New Consultation Record “Pertinent 47

Findings Per System” of Health Watch

27 New Consultation Record “Doctor’s Assessment 47

of Health Watch

28 Immunization Sheet Form for Senior Citizens 48

in Health Watch

29 Immunization Sheet Form for Infants in Health Watch 48

30 Death Rate Menu of Health Watch 49

31 User Management Menu of Health Watch 49

32 User Management “New User Record” of Health Watch 50

33 Settings Menu of Health Watch 50

34 Use Case Diagram for Nurse Administrator 51

35 Use Case Diagram for Barangay Health Workers User 52

36 Use Case Diagram for Barangay Nutrition Scholars User 53

37 Modified Waterfall Model of Health 54

 x

38 Login Page of HealthWatch 63

39 - 40 Dashboard of HealthWatch 64

41 Patients Menu of HealthWatch 65

42 Patients Menu “Add New” Form of HealthWatch 65

43 Consultations Menu of HealthWatch 66

44 New Consultation Record “Personal Information” 67

of HealthWatch

45 New Consultation Record “Geographic Information” 67

of HealthWatch

46 New Consultation Record “Medical History” 68

of HealthWatch

47 New Consultation Record “Cont. Medical History” 69

of HealthWatch

48 New Consultation Record “Social History” 69

of HealthWatch

49 New Consultation Record “Immunization” 70

of HealthWatch

50 New Consultation Record “Pedia Physical Examination” 70

of HealthWatch

51 New Consultation Record “Family Planning, Mestrual, 71

Pregnancy History” of HealthWatch

52 New Consultation Record “Physical Examination” 72

of HealthWatch
 xi

53 – 54 New Consultation Record “Pertinent Findings 73

per System” of HealthWatch

55 New Consultation Record “Doctor’s Assessment” 74

of HealthWatch

56 – 58 Immunization for Senior Citizen of HealthWatch 75

59 – 66 Immunization for Infants/Babies of HealthWatch 76 - 80

67 Death Rate of HealthWatch 80

68 Death Rate “New Record of HealthWatch 80

69 User Management of HealthWatch 81

70 User Management “New User Record” 81

of HealthWatch

71 Reports of HealthWatch 82

72 Settings of HealthWatch 82
 xii

LIST OF TABLES

Table No. Title Page No.

1 Functionality Testing 56

2 Browser Compatibility Testing 57

3 Range of Scale Value for interpreting the 59

Evaluation Result

4 Functionality Testing in Login Page 84

5 Functionality Testing in Forgot Password Page 85

6 Functionality Testing in Dashboard Page 85

7 Functionality Testing in Patients Page 86

8 Functionality Testing in Consultations Page 87

9 Functionality Testing in Immunizations 88

of Senior Citizen Page

10 Functionality Testing in Immunizations 89

of Infants/Babies Page

11 Functionality Testing in Death Rate Page 90

12 Functionality Testing in User Management Page 91 -92

13 Functionality Testing in Reports Page 93 - 94

14 Functionality Testing in Settings Report 94

15 Browser Compatibility Testing 94

16 ISO 25010 Evaluation results of the 95

Non-IT Respondents

17 ISO 25010 Evaluation results of the 96

IT Expert Respondents
 1

CHAPTER I
THE PROJECT AND ITS BACKGROUND

Introduction

In today's rapidly evolving digital era, technology has become an

inseparable part of everyone’s daily lives, influencing every aspect of society

and significantly affecting how people interact, live, and work. Technology

empowers people to accomplish tasks more efficiently, access information

immediately, and more. This is also not limited to a single field or industry but

spans various sectors including the healthcare industry. The use of digital

technologies in the healthcare industry is a rapidly growing field with the

potential to revolutionize the way we deliver and receive care. Digital

technologies can improve access to healthcare, enhance the quality of care,

and promote efficiency and sustainability in healthcare systems (WHO,

2023). These improvements can be achieved in the healthcare industry with the

help of the development of the Health Management System.

The Health Management System serves as a secure storage for all

patient data. This includes medical history, diagnoses, prescriptions, lab

results, and any other relevant information. This data is readily accessible to

authorized personnel, facilitating informed decision-making and timely

diagnoses (Bashir, 2016). For healthcare workers, HMSs offer invaluable tools

for clinical decision support. By analyzing trends and identifying potential risks,

these systems can help clinicians provide preventive care and intervene early

in cases of potential complications (Bashir, 2016). A few examples of health

management systems are the electronic health record and clinic management

system.
 2

Electronic health record is a place of protection for patient medical data

that represent a digital revolution in healthcare. Electronic Health Records

(EHRs) have replaced paper records by providing a full overview of a patient's

medical history, including diagnoses, prescriptions, allergies, and vaccinations

(Kumar et al., 2020). Moreover, by simplifying administrative duties and

enhancing clinic efficiency, clinic management systems, or CMSs, enhance

medical records. These software programs manage insurance and billing for

patients, provide appointment scheduling, and promote interaction between

patients and healthcare professionals (Amin et al., 2022). Healthcare workers

can dedicate more time to patient care by using CMSs to improve operational

efficiency and support decisions based on data by implementing routine tasks

(Yadav & Singh, 2018).

Project Context

According to Okakeyi (2023), a health management system (HMS) is a

comprehensive framework that includes a range of tools and strategies for

tracking, evaluating, and enhancing the health of individuals and communities.

The efficient management of patient records, diagnoses, and treatment plans

is made possible by this system's easy integration of healthcare data

(MEASURE Evaluation, 2023). Thus, many organizations such as the

healthcare industry are considering health management systems to improve

workflow efficiency.

San Nicolas is a barangay in the city of San Pablo, in the province of

Laguna. The Barangay is situated at approximately 14.0671, 121.2928, on the

island of Luzon. Elevation at these coordinates is estimated at 93.8 meters or

 3

307.7 feet above mean sea level. Its population as determined by the 2020

Census was 7,255. This represented 2.54% of the total population of San

Pablo. Therefore, the operation of the health management system is expected

to bring several benefits to the San Nicolas Health Unit.

San Nicolas Health Unit is a medical facility that provides medical

services, counseling, and treatment to many patients. According to Dan, 2023,

a nurse at San Nicolas Health Unit, the health unit is using a practical manual

system to manage all the files and all the recording processes in the health unit,

such as manual recording and searching of patient paper records like patient

information, medical histories, and many more, and these lead to inaccuracies

due to typographical errors and incorrect information entry. Additionally, in

terms of record-keeping, as they just keep all the important papers of the

patients in drawers, this resulted in file misplacements because files were not

well organized. This inefficient information management system resulted in

difficulties in managing patient records, and it would be difficult to identify

prevalent diseases.

To address the issues and challenges currently faced by the San Nicolas

Health Unit, the developers developed a health management system.

HealthWatch is designed to revolutionize the manual way health units manage

their processes by providing a centralized platform for patient record

management, medical history, patient health status, consultations, diagnoses,

and other administrative and clinical functions within the San Nicolas Health

Unit. This will help the San Nicolas Health Unit to be well organized, as they will

just store patient information, including medical history, electronically in a

developed system. This also provides a visual map that will display color-coded
 4

location pins based on diagnosed diseases, offering a real-time, visual

snapshot of health trends in the community.

Project Purpose

The Development of HealthWatch: A Health Management System for

San Nicolas Health Unit is a developed project that will help the nurse and the

other barangay health workers in providing healthcare services in Barangay San

Nicolas. This system will benefit the following beneficiaries:

Barangay Health Unit

It will be beneficial to them as they can collect and analyze data on a

variety of health indicators, such as immunization rates, disease prevalence,

and natality and mortality rates. This data can be used to identify areas where

there is a need for improvement and to track progress over time.

Health Unit Workers

It will be beneficial to them as they can have immediate access to

information, including medical history, allergies, and medications. This will

enable them to make better-informed decisions about diagnosis and treatment.

Patients

It will be beneficial to them as it streamlines the registration and record-

keeping process for faster consultation and treatment.

Future Researchers / Future Developers

The system is also designed to help other system developers. They can

use this program or system for their study, by implementing suggestions and

addressing the system’s limitations, they can also enhance or improve the

system.
 5

Project Objectives

General Objective

The general objective of the project is to develop a HealthWatch: A

Health Management System for San Nicolas Health Unit.

Specific Objectives

This project has the following objectives:

1. To design a project that is capable of providing a visual map that shows

the patient’s health status.

2. To develop a health management system that has the following features:

a. Dashboard

b. Patient Menu

c. Consultation Menu

d. Immunization Menu

e. Natality and Mortality Menu

f. User Management Menu

g. Reports Menu

h. Settings Menu

3. To test the project through compatibility and functionality testing.

4. To evaluate the project utilizing ISO 25010; and

5. To document the project

 6

Project Scope and Limitation

The Development of Health Watch: A Health Management System for

San Nicolas Health Unit, a web-based application that will give ease to all

paperwork and manual recording processes of the San Nicolas Health Unit.

The system can generate reports every time it is needed and may also be

updated. It contains eight menus such as: (1) Dashboard, which displays the

total number of patients, total consultations, total immunizations, and total

deaths. There is a bar graph for natality and mortality that allows for a quick and

easy comparison of natality and mortality rates every year. Also has a pie chart

for the total of patients grouped by sex, and a pie chart for the total patients

grouped by age. (2) Patients Menu, where the nurse administrator can search,

view, edit, delete, and add new patient records or information, also can filter

information in terms of sex, id, name, date registered, and actions. (3)

Consultation Menu, where the nurse administrator can also search, view, edit

delete, and add new patient records, and can filter information in terms of sex,

id, name, first visit, recent visit, diagnosis, and actions. The project can also be

used to generate medical history, current symptoms, and any other relevant

details. (4) Immunization of Senior Citizens Menu, which displays the relevant

data of senior citizens and the nurse administrator can view, update, and track

immunization records. (5) Immunization of Infants and Newborns Menu, which

displays the relevant information on infants and newborns. It can also add new

records and search records for infants and newborns. (6) Records of Natality and

Mortality Menu, which displays the summary of all total numbers of births and

deaths that take place within a particular population. (7) User Management

menu, where the admin nurse can add a new user. (8) Reports Menu, which
 7

displays a visual map that consists of the patient’s name, address, date

consulted, findings, and diagnosis.

With all the mentioned scope above, the developed project has the

following limitations: Patients who do not currently reside in San Nicolas San

Pablo City Laguna are not covered by the system. The only person who has

access to the full project is the health unit staff and cannot be accessed without

an internet connection. Also, the developed system is not designed to replace

the advice of healthcare professionals.

 8

Conceptual Model of the Project

INPUT PROCESS OUTPUT

Figure 1. Conceptual Model of HealthWatch: A Health Management System for

San Nicolas Health Unit

Figure 1 shows the Conceptual Model of HealthWatch: A Health

Management System for San Nicolas Health Unit. The conceptual model of the

project served as a guide for the developers to easily identify the requirements

needed for the development of the system. It is composed of the following

components: the input, process, output, and evaluation. The input component
 9

consists of three sub-components: knowledge requirements, software

requirements, and hardware requirements. First, for knowledge requirements,

the developers studied web development, database management system

design, and user experience (UX) design. It is essential to have a clear and

precise understanding of the knowledge requirement since it will serve as the

foundation of the project. Second, software requirements are comprised of

NextJS, Tailwind CSS, Flowbite, MySQL, VS Code, Node JS, XAMPP, and

Ngrok. Lastly, the hardware requirements for the development, a computer or

laptop should have the minimum specifications of 32-bit or 64-bit OS (Windows

7 up to Windows 11 pro), Intel core i3 processor or higher, and 4.00 GB or

higher. For the implementation, a computer or laptop should have the

requirements of a 32 or 64-bit operating system, wampserver, and a web

browser.

It appears that after knowing the overall requirements, the next

component is the process. The process deals with the overall process of the

system development. It consists of requirements, design, implementation,

integration and testing, and deployment. Under the first phase, the developers

evaluated the requirements. The second phase is the system design wherein it

verifies the system requirements. Third, the implementation or the actual

development of HealthWatch: A Health Management System for San Nicolas

Health Unit. The fourth phase is the integration and testing to ensure that the

system works properly. After a series of tests, it will finally come to the

deployment of the system and maintenance.

The third component of the conceptual model of the project is the output or the

project itself. This component offers the result of the interaction that
 10

transpired between the input and the process. After development, the system

will be evaluated according to ISO/IEC 25010. While in the evaluation, the

system was tested and evaluated to know if the functions and other capabilities

were working.

Operational Definition of Terms

HealthWatch: A Health Management System for San Nicolas Health Unit –

refers to the system developed by the developers that streamline the processes

in the health unit.

Consultation Page – refers to the feature that allows to add personal

information, medical history, cont. medical history, social history, immunization,

physical examination, pertinent findings per system, and doctor’s assessment.

Doctor’s Assessment – refers to the feature that presents the patient's health

status, medical background, symptoms, and any preliminary diagnostic results.

Dashboard – refers to the feature that displays the summary of all the patient

records.

Death Rate Menu – refers to the feature of the developed system that can be

used to track the health and growth of Barangay. San Nicolas.

Diagnosis – refers to a system feature that determines or identifies a patient's

medical conditions.

Immunization Sheet Form for Senior Citizens – refers to a page that will

show the senior citizen interface.

Immunization Sheet Form for Infants/Newborns – refers to a page that will

show the senior citizen interface.

Login Page – refers to a simple way for users to access their health
 11

information.

Map – refers to a feature that displays the patient’s name, address, findings,

and diagnosis.

Patient Menu – refers to the feature of the developed system that allows to add

or create and displays all the patient records.

User Management – refers to the feature that allows the user to create a new

user record for a patient in the Health Watch system.

 12

CHAPTER II
REVIEW OF RELATED LITERATURE AND STUDIES
This chapter presents the review of literature and studies for the

development of the project. Different references such as books, documents

from website and electronic resources served as a guide for precise

information.

Related Literature

San Nicolas San Pablo City, Laguna

In recent years, Barangay San Nicolas has continued to experience

development and growth. The barangay has undergone various infrastructure

projects aimed at improving the quality of life of its residents. In 2017, the

barangay completed the construction of a new barangay hall, which now serves

as the center of local governance and community services. The new hall

features modern facilities and amenities, including a multi-purpose hall, a

conference room, and offices for barangay officials and staff. In 2018, the

barangay also completed the construction of a new covered court, which serves

as a venue for sports and other community activities. The covered court has

become a popular gathering place for residents, particularly the youth, who use

the facility for basketball games and other sports.

Today, Barangay San Nicolas remains a vibrant and dynamic

community, with a strong sense of pride and identity. Its residents continue to

work together to build a better future for themselves and future generations.The

Health Center in San Nicolas is suffering from the loss of other patient records

and there is not enough storage for paper records, so sometimes it is not known

where the records are or the records are missing.

 13

Health Center

According to Liu (2022), AI-based smart healthcare services are

emerging as promising tools to improve efficiency and effectiveness of

healthcare service delivery. This study aimed to examine the roles of trust and

three AI-specific characteristics (i.e., personalization, loss of privacy,

anthropomorphism) in public acceptance of smart healthcare services based

on an extended Technology Acceptance Model. The model's validity was

confirmed using a partial least squares structural equation modeling technique

based on data collected from 769 survey samples. Multigroup analyses were

conducted to determine whether the path coefficients differed by gender, age,

and usage experience.

According to Assefa (2022), About half of first- or second-generation

Australians are born overseas, and one-in-five speak English as their second

language at home which often are referred to as Culturally and Linguistically

Diverse (CALD) populations. These people have varied health needs and face

several barriers in accessing health services. Nevertheless, there are limited

studies that synthesized these challenges. This study aimed to explore issues

and challenges in accessing health services among CALD populations in

Australia.

The COVID-19 pandemic and the measures adopted are having a

profound impact on a major goal of public healthcare systems: universal access

to health services. The objective is to synthesize the available knowledge on

access to health care for non-COVID-19 conditions and to identify knowledge

gaps. A scoping review was conducted searching different databases (Medline,

Google Scholar, etc.) for original articles published between December 2019
 14

and September 2021. A total of 53 articles were selected and analyzed using

the Aday and Andersen framework as a guide. Of these, 37 analyzed changes

in levels of use of health services, 15 focused on the influencing factors and

barriers to access, and 1 studied both aspects. Most focused on specific

diseases and the early stages of the pandemic, based on a review of records

(Vargas, 2022).

Clinic Management System

The most essential aspect in the country's development is its healthcare

system. Long-term disease treatments are one part of treatment. Private

hospitals conduct different clinics to treat these long-term diseases. These

clinics are separated into groups based on the types of diseases. Some people

suffer from one or more diseases, and need to choose doctors for each disease

type for their treatments in private hospitals in Sri Lanka. However, there are

still several major issues in private clinic management systems, for which no

effective solution has been found. The existing system's huge problem is poor

coordination between doctors, patients and medical staff. The other problem is

patients face lots of difficulties in maintaining their medical record books for

each relevant clinic (Malshani, 2021).

The objective of this project is to design a web-based clinic management

system based on a structured approach. The second objective is to develop a

clinic management system using a prototype model. Finally, to test the function

of this clinic management system with the user to ensure that it works as

planned. This system is developed based on prototype model methodology.

Since this is a web-based system, PHP is used as the programming language

and xampp as the webserver. This system is intended to assist the clinic
 15

organization to handle clinic management. Patients do not have to go to the

clinic counter and line up to make an appointment. Patients only need to select

the date and doctor available through this system. This can save time and

energy. Additionally, patients can change the appointment booking schedule, if

there are any unavoidable problems. Furthermore, the system allows

administrators and doctors to easily search for specific patient data. Besides,

records of these activities are kept in the database. The system can also

generate patient reports. Thus, the patient can refer back to the report in the

future (Zamri, 2022).

Based on Uno Technologies (2020), Clinic Management System, or

CMS, in short, is a HealthTech software tool that helps medical staffs such as

doctors, nurses, and clinic assistants to better manage their clinic, improve

clinic efficiency, streamline clinic operations, make accurate claims for patients,

reduce clinic expenditure and staff manual labor, and provide patients with

improved care. An excellent clinic management software plays an integral role

in a clinic’s daily operations and is a must-have for doctors to provide high-

quality treatment and care to their patients. UNO CMS is the ideal clinic

software for you.

One of the main problems captured with the significant ongoing clinical

process is lots of time-wasting, because of the manual paperwork system. This

research aims to automate hospitals’ clinic patient management system and

develop a diabetic prediction system using machine learning algorithms. The

main objectives of this study are to make this manual clinic process an

automated, time-saving and efficient one, and to add more value to this

significant process of the health sector, with a newly added feature – the
 16

diabetic prediction system. This proposed system is highly beneficial for doctors

in the process of updating or retrieving patients’ records. The main focus here

is to automate the diabetic clinic as the first step. This paper presents a clearer

clarification of the objective of this study and the relevance and motivation of

the study (Madushika, 2021).

Health Management

Based on nursing license map (2022), Professionals who work in

healthcare management plan, direct and coordinate health and medical

services in a wide variety of healthcare environments. They may be healthcare

managers in hospitals, at doctors’ offices, at residential care facilities, at

outpatient care centers or within certain departments of large healthcare

organizations. They may also manage their employees and should be aware of

how healthcare laws, technology and regulations affect their work environments

and daily practice.

Based on health and safety authority (2020), A safety and health

management system means the part of the organization’s management system

which covers: the health and safety work organization and policy in a company.

The planning process for accident and ill health prevention. The line

management responsibilities and the practices, procedures and resources for

developing and implementing, reviewing and maintaining the occupational

safety and health policy.

According to Feder (2022), a more specific definition of health

information management is provided by the American Health Information

Management Association (AHIMA): Health information management (HIM) is

the practice of acquiring, analyzing and protecting digital and traditional medical
 17

information vital to providing quality patient care. It is a combination of business,

science and information technology. Nowadays, the bulk of this medical

information is handled digitally with the benefit of the internet, server power

and information technology support.

According to Nash (2022), Population Health Management provides

comprehensive, authoritative strategies for improving the systems and policies

that affect health care quality, access, and outcomes, ultimately improving the

health of an entire population. The Journal delivers essential research on a

broad range of topics including the impact of social, cultural, economic, and

environmental factors on health care systems and practices.

Management System

Based on Kestrel Tellevate (2023), A management system is the

organizing framework that enables companies to achieve and sustain

their operational and business objectives through a process of

continuous improvement. A management system is designed to identify

and manage risks—safety, environmental, quality, business continuity,

food safety (and many others)—through an organized set of guidelines,

processes, practices, and resources that guide the enterprise and its

activities to maximize business value.

Based on Span Consulting (2023), A management system is a tool

an organization uses to collectively manage the different parts of its business.

Successful management systems align company expectations across an

organization, provide order, support achieving objectives and enable

continuous improvement.
 18

Based on Transition Support (2023), A management system would be a

systemic view of an organization from the perspective of how it determined and

delivers its business results. A quality management system would be a

systemic view of an organization from the perspective of how it creates and

retains its customers and conversely, an environmental management system

would be a systemic view of an organization from the perspective of how it

protects the natural environment. Therefore to define any management system

what we do is look at the organization from a systemic perspective and pick out

the elements that we believe strongly influence what we want that specific

management system to manage.

Electronic Medical Record

According to Seymour (2022), An electronic medical record (EMR) is a

digital record of health information. It can be used to manage patients' health

records, notes, and prescriptions, share information between providers, and

communicate with patients and their families about their health. EMR makes it

easier for clinicians to keep track of patient data, including diagnoses,

treatments, and outcomes.

Browser

Based on Computer Hope (2022) is a software program to present and

explore content on the World Wide Web. These pieces of content, including

pictures, videos, and web pages, are connected using hyperlinks and classified

with URLs (Uniform Resource Identifiers). This page is an example of a web

page that can be viewed using a browser.

 19

Web-based Information System

According to Marek & Marta (2019), Users can access, manage, and

exchange information using a web-based information system (WBIS), a

software program that runs on a web browser. This kind of technology is

commonly employed in many different fields, including government, finance,

healthcare, and education. To increase corporate productivity and 14

efficiencies, WBISs are made to make data collection, storage, analysis, and

sharing easier. WBISs have several advantages over conventional client-server

systems, including simple access from any place, scalability, cheap

maintenance costs, and simple user collaboration. As a result, a lot of

businesses are switching from traditional software systems to web-based

information systems since they are more affordable.

Database

According to Singh (2019), Users can store and manage data in a

structured way using a database, which is a software system. It is made to store

and retrieve massive amounts of data with efficiency reliably and securely.

Databases are used to store and manage data such as consumer information,

product inventory, financial records, and patient medical records in a variety of

applications, from e-commerce to healthcare. A relational database, one of the

most popular kinds of databases, arranges data into tables that are connected

by relationships.

Relational Database

As explained by Silva & Oliveira (2020), A relational database's benefits

include its capacity to uphold data integrity, facilitate sophisticated queries and

data analysis, and enable numerous concurrent users to view and alter data.
 20

Relational databases can also manage massive amounts of data and are very

scalable. An instance of a relational database is one that divides data into one

or more tables, each of which has a set of rows (also known as records) and

columns. (Also called fields). The common fields in each table, 15 referred to

as keys, are used to construct the relationships between the tables. Because

of their effectiveness in organizing, managing, and retrieving data, relational

databases are among the most popular ones in the business.

Development Tools

XAMPP Server

According to Drake (2020), XAMPP is a popular development tool that

gives programmers access to a full web server environment for creating and

testing web applications. The open-source software suite XAMPP consists of

Apache, MySQL, PHP, and Perl. Because the package is available for

Windows, Linux, and macOS, developers working with several operating

systems can use it. XAMPP is particularly helpful for developers who need to

work with PHP and MySQL because it offers a preconfigured environment that

makes it simple to get started with these technologies. The popular tool for

managing MySQL databases, phpMyAdmin, is also included in the program.

The developers used XAMPP as a local host server and for creating

databases and tables for HealthWatch. XAMPP is strong and adaptable

technology that can make it simple and quick for web developers to build and

test web applications.

 21

Visual Studio

Tabnine Team (2022), the custom development environment for all

things C# and.net is called Visual Studio and is provided by Microsoft.

Microsoft's goal in creating an IDE was essentially to make it as convenient as

possible for both its internal engineers and anyone else who wants to utilize C#

and.net. It naturally integrates nicely into the Microsoft ecosystems including

Azure, as it is a Microsoft IDE.

The developersl used Visual Studio where will organize and structure

the project. Visual Studio to provide a comprehensive and powerful Integrated

Development Environment (IDE). Visual Studio provides advanced code editing

and debugging capabilities that make it easier for developers to write high-

quality code for HealthWatch.

NextJS

According to BuiltIn (2023), one-page JavaScript apps can be created

using the Next.js React framework. This framework has several benefits for

both the development team and the apps created for clients. It is recommended

as a toolchain for React projects with a single command and no settings.

The developer used NextJS that will be the server and front-end

application. Users may become progressively irritated when websites and apps

take longer than milliseconds to load because they fall short of their

expectations. NextJS mostly entails creating user-friendly, incredibly dynamic,

interactive, and effective Web applications for many operating systems,

including Mac, Windows, and Linux.

 22

Tailwind CSS

According to Hubspot (2020), in order to make it quicker and simpler for

users to construct applications, Tailwind CSS is a utility-first CSS framework.

Without leaving your HTML or creating a single line of new CSS, you can use

utility classes to adjust the layout, color, spacing, font, shadows, and more to

create a completely unique component design. If you use the conventional

method, any modifications you make to CSS could damage your entire site.

The developers used Tailwind CSS to keep everything organized for the

development. Utility classes in HTML are local, in contrast to CSS. As a result,

the developer can alter them without being concerned that doing so will ruin

another aspect of your website.

Flowbite

Based on Astrobuild (2020), Flowbite is a free and open-source UI admin

dashboard template with charts, tables, widgets, CRUD layouts, modals,

drawers, and more designed using Flowbite components and based on the

utility-first Tailwind CSS framework. The interactive widgets, including the

tooltips, navbars, modals, and drawers, are all based on the well-liked open-

source component library Flowbite, which enables us to use them to build more

intricate sets of pages and widgets inside a full-featured admin dashboard

design.

The developers used Flowbite as the main UI template to save time.

Using the most recent UI/UX development tools from the open-source

community, such as Tailwind CSS and Flowbite, you can rapidly get started

constructing an application for your project with the aid of this admin dashboard.
 23

NodeJS

According to Punhub (2019) Node.js has drawn developers' attention

due to a vast number of practical capabilities included with the runtime

environment. Since Node.js is single-threaded, you can add scalability to your

web applications. Millions of websites employ the back-end programming

language JavaScript, which is among the most widely used in the world.

JavaScript is a language that adds interaction, such as animations and effects,

to make websites less static.

The developers used Node.js to run NextJS on our local machine. This

indicates that Node.js can manage numerous connections at once. Because

Node.js thread execution is non-blocking, JavaScript executes much more

quickly.

XAMPP

According to Drake (2020), XAMPP is a popular development tool that

gives programmers access to a full web server environment for creating and

testing web applications. The open-source software suite XAMPP consists of

Apache, MySQL, PHP, and Perl. Because the package is available for

Windows, Linux, and macOS, developers working with several operating

systems can use it. XAMPP is particularly helpful for developers who need to

work with PHP and MySQL because it offers a pre-configured environment that

makes it simple to get started with these technologies. The popular tool for

managing MySQL databases, phpMyAdmin, is also included in the program.

The developers used XAMPP as a localhost server and for creating

database and tables for Real-time Computer Laboratory Monitoring System.

XAMPP is strong and adaptable technology that can make it simple and quick
 24

for web developers to build and test web applications.

MySQL

According to Singer (2020), After Oracle, MySQL was the second most

widely used database management system worldwide. Its simplicity of usage,

scalability, and great performance can be credited to its popularity. MySQL is a

dependable and long-lasting database management solution because it is

supported by a huge and vibrant community of developers that offer continuous

support and development. MySQL is a powerful and adaptable tool for

developers that provides a variety of features and advantages. Whether you

are a beginner or a seasoned developer, MySQL is a great option for

successfully and efficiently handling your data.

The developers used MySQL to store, organize, and retrieve data

efficiently for HealthWatch. MySQL is a popular open-source relational

database management system that is widely used in web application

development. It is a powerful tool for managing large datasets and allows

developers to store, organize, and retrieve data efficiently.

 25

Related Studies

Web-based Clinic Management System

According to Muhammad and Garba (2019), the development of a Web-

based Clinic Management System is to improve the clinical services of a

university clinic by developing a web-based application that automates and

enhances the management of patient records. The application will enable

clinicians and patients to access electronic records easily, which will minimize

the cost, difficulties, and ineffectiveness of working with patients' records

manually, and enhance the benefits and profits of the clinic. The system was

designed, implemented, tested, and validated, and it complies with the specified

requirements, achieving the objectives defined for the system.

The developer’s developed system aims to improve the efficiency and

effectiveness of healthcare services. Both projects were also likely to

incorporate similar features such as patient records management, and

appointment scheduling. The HealthWatch for San Nicolas Health Center may

have a different scope or scale compared to the CMS Project, depending on

the size and complexity of the healthcare organization.

Online Clinic Management System

As stated by Teke et al., (2019), This proposed system is developed

using a web-based concept. The technique used to foster the framework

incorporates iterative cascade model methodology, dataflow, and legitimate

and substance relationship outline utilized to plan the framework. As a result of

this system's conversion of all manual tasks into computerized processes, the

registration process would be free of data duplication, patient details could be

found more quickly, and patient wait times could be reduced before they
 26

received treatment.

Like the developers’ developed system, it will benefit the clinic, staff, and

patients. The system will have the features of Electronic Medical Records which

enables healthcare providers to access patient information instantly and

efficiently.

Development of Web-based Clinic Management System

According to Zarmi and Hassim (2022), the Development of Web -Based

Clinic Management System is to design and develop a web-based Clinic

Management System for Medi Ehsan clinic to address problems such as the

lack of a web-based system, difficulties in making appointments, and loss of

patient data. The objectives are to design and develop a system using a

prototype model, test its functionality, and improve clinic management. The

system uses PHP as the programming language and xampp as the webserver.

Patients can easily make appointments and change them, while administrators

and doctors can search for patient data and generate reports. The system

improves the clinic's efficiency and patient experience.

The system was like the developed system because it also has patient

management features. This feature involves managing patient data, such as

personal information, medical history, and diagnosis details.

The Development of Clinic Management System Mobile Application with

Integrated Appointment, Prescription, and Payment System

According to Ramli, Purba, and Kuzaimi (2022) this study developed a

mobile application called Clinic Management System (CMAS) to address

common problems in managing medical clinics, such as difficulties in arranging

appointments, keeping prescription data, and managing payments. The CMAS

 27

app was designed using Agile methodology with a Mobile-D approach and has

admin and patient privileges. Patients can make appointments, view

prescriptions, and make cashless payments, while the admin can manage

appointments, prescriptions, and payments. A user acceptance test was

conducted, and an overall score of 82.7 out of 100 was obtained. The CMAS

app is designed to be easy to use for clinics with limited resources and can help

improve clinic management.

The developers’ developed system, doesn’t have the features of billing

and invoicing process for patients, including tracking payments and generating

invoices.

Automated Clinic Management System 2020

According to Agbomedarho (2020), this project is focused on improving

the clinical store's activities, including enhancing patient outcomes, reducing

hospital admissions and long-term care, optimizing resources in the school

community, and utilizing a computer-based management system to improve

clinic performance. However, the machine will not handle medication

prescriptions, drug interactions, or contraindications. These tasks will be

administered manually by the nurse.

Both systems have similarities, Clinic Management System and

Automated Clinic Management System are both software applications used in

healthcare facilities to manage patient information, appointments, etc.

The Design Development of Online Clinic Management System

Based on Capstone Guide (2022), this proposed system, records, and

files are computerized and stored online for accessibility and portability.

However, the proponents limit the online feature of the system to doctors and
 28

staff only. Web access of the patients is not included. The system has a secure

log-in for doctors and staff. Managing appointments is also integrated and

billing statements and official receipts are automated as well as medical

prescriptions and medical certificates.

The system was like the developers developed system because both

systems help healthcare providers maintain accurate and up-to-date patient

records.

Design and Development of Outpatient Management System with Smart

Queue Processing and E-Prescription

From the point of view of Islam A., et al (2018), they have designed and

developed an outpatient management system with smart queue processing and

e- prescription. The main objectives of the project are, to design and develop a

web- based outpatient management system for the efficient management of

outpatients in the hospital, and to develop a smart queue processing system to

inform patients about their tentative waiting time. Though the application is built

especially for an eye hospital, it can be used in any hospital with minimum

customization.

The system was similar to the developers’ developed system because

both systems help healthcare providers improve patient care and streamline

administrative tasks.

Clinic’s Patient Management System

According to Sourcecodester (2022), This Clinic Patient Management

System is simply available to the facility's administration. For system users to

access the system's features and functions, they must log in with their current

credentials. Framework clients can deal with the rundown of Medications,

 29

Medication Subtleties, Patients, and Patient Remedies. The management can

store relevant data like blood pressure, weight, disease, and more from the

patients' visits here. Based on the patient's diagnosis, management can write a

prescription for the patient's specific illness. Utilizing the framework, the center's

administration can undoubtedly recover the patient history with the facility. It

likewise produces a printable and downloadable PDF Report for patient visit

records and infection records. In terms of website features, both systems may

offer online appointment scheduling, patient information, and secure

messaging between patients and providers. However, the specific features and

functionality of each system will depend on the vendor and the needs of the

clinic.

Klinika

Based on Klinika (2020), Klinika is an intuitive and easy-to-use medical

clinic management system ideal for healthcare professionals on the move or

who are working from different hospitals. Klinika’s innovative system provides

healthcare record management solutions to private practices for better

diagnosis and treatment. Medical clinic management software, such as Klinika,

is essential for streamlining and automating various tasks, including

appointment scheduling, patient records management, billing, and inventory

management. By automating these tasks, medical clinics can increase

efficiency, reduce errors, and improve patient care.

The developer’s developed system is just used to store patient data in a

digital format and cannot be accessed in any location. Same as Klinika, it

provides a suite of functionalities that makes it easy to manage a clinic.

 30

CHAPTER III
METHODOLOGY

This chapter presents the methodology of the study. It includes the

project design, project development, project testing, and evaluation procedures

that the developers used during the development of the system.

Project Design

Fishbone Diagram

Figure 2. Root Cause Analysis using Fishbone Diagram of HealthWatch

Figure 2 shows the fishbone diagram of HealthWatch: A Health

Management System for San Nicolas Health Unit. It represents the skeletal

structure of like a fish, the issue is the head, and the causes are at the spine.

The diagram above is used for root cause analysis to identify and show the

potential causes of the problem.

The causes are divided into the following categories: Policy, Procedure,

Method, and Measurement. As shown in the diagram the main problems are

difficulty in managing patient records and identifying disease prevalence. Due

 31

to file misplacement caused by a significant number of files, there are issues in

the measuring area. Inadequate patient information, insufficient assessment,

and failure to obtain consent can lead to medical errors and substandard care.

Also, the problem of typographical errors. Additionally, incorrect information

may lead to various problems in healthcare provisions.

Work Breakdown Structure

Figure 3. Work Breakdown Structure of HealthWatch

The structure above starts with the researchers complying with the

requirements and the proper designing of the website. Each of the major areas

can be further broken down into smaller, more specific tasks. It presents the

work breakdown structure of the Health Watch: A Health Management System

 32

for San Nicolas Health Unit. The first set of requirements involved consultation

with the client, gathering, and analysis to conduct a survey, evaluate the data

gathered from the respondents, and identify the possible features and

capabilities on the part of the developers. The second is system design, which

develops project design and verifies system requirements. The third step is the

project's actual development or implementation. Fourth is integration and

testing, which consists of functionality testing, compatibility testing, and

ISO/IEC 25010 where the evaluation procedure is carried out. Finally, the

deployment of the system to the client consists of the actual demonstration and

process of determining whether the user criteria have been satisfied.

 33

Flowchart

Figure 4. Flowchart of San Nicolas Health Unit (Current Process)

Figure 4 shows the process that is to be expected in the Health

Management System for San Nicolas Health Unit, with the help of the diagram

above, this will also support the project team to stay organized, on track, and

focused on achieving the project objectives within the established timeline.

Therefore, the process starts when the patient arrives and continues with

registration. If the patient is not yet registered the nurse/barangay health

workers will make a record in consultation form. Also, if the patient is already

registered, they will record the patient's current health condition. The nurse
 34

organizes a consultation and provides medicine after reviewing the record.

Medications and prescriptions are provided to the patient by the nurse and the

nurse will give an appointment if the patient needs to have a follow-up session.

Also, the patient will leave.

Figure 5. Flowchart of Health Watch

Figure 5 shows the flow of the proposed system is shown. The user must

be going to log in first and straight ahead to the homepage of the system. When

the patient is registered already in the records it will continue to record/update

 35

patient information in consultation and if the patient is not registered patient, the

user must add the patient record first before going to select form. Additionally,

the records are saved for consultation, dashboard, and reports and nurses give

prescriptions and medicine to the patient. The patient will leave after the

process.

Figure 6. Flowchart for Main Interface

Figure 6 shows the process of HealthWatch: A Health Management

System Main Interface to access the system, the administrator should log in

with his or her username and password. Once logged in, the admin will choose
 36

from the following menu displayed in the main interface of the system: The

following menus that the admin can choose are; Dashboard, which displays the

summary of all the patients. Patients Menu, where you can add new patient

records, and where you can view the patient information. Consultation Menu,

which will be used by the patient to generate medical history, current symptoms,

and any other relevant details. Immunization of Senior Citizens Menu, which

displays the relevant data of senior citizens and where you can view, update,

and track immunizations for their patients. Immunization of Infants Menu, which

displays the relevant information on infants. It can also add new records and

search records for infants and newborns. Records of Mortality and Natality data

Menu, which displays the summary of all total numbers of births and deaths that

take place within a particular population. User Management menu, where you

can add a new user. Reports Menu, which displays the essential information

about a patient's health status, diagnosis, treatment, and other relevant details.

Logout Button which allows the admin to logout the system.

 37

Figure 7. Flowchart for Dashboard Page

Figure 7 shows the dashboard page. The administrator and user can

view the summary of all total of the patients, total consultations, total

immunizations, and total deaths.

Figure 8. Flowchart for Patients Page

Figure 8 shows the patient’s page. The administrator and user can input

the relevant information of the patients. It can search, view, edit, delete, and

add new patient records or information, also can filter information in terms of

sex, id, name, date registered, and actions.

 38

Figure 9. Flowchart for Consultations Page

Figure 9 shows the consultations page. The administrator and user can

input the relevant medical history of the patients. It can also search, view, edit

delete, and add new patient records, and can filter information in terms of sex,

id, name, first visit, recent visit, diagnosis, and actions.

Figure 10. Flowchart for Immunization of Senior Citizens Page

Figure 10 shows the immunization of senior citizen’s page. The

administrator and user can input and view the relevant details of the senior

citizens. It can view, update, and track immunization records.

 39

Figure 11. Flowchart for Immunization of Infants Page

Figure 11 shows the immunization of infant’s page. The administrator

and user can input and view the relevant details of the infants. It can also add

new records and search records for infants and newborns

Figure 12. Flowchart for Records of Mortality and Natality Data Page

Figure 12 shows the records of mortality and natality data page. The

administrator can input the relevant details of the births and deaths that take

place within a particular population.

 40

Figure 13. Flowchart for User Management Page

Figure 13 shows the user management page. The admin can search for

registered user records by making use of search bar; can add, update, and

delete users.

Figure 14. Flowchart for Reports Page

Figure 14 shows the reports page. The administrator can view the

relevant details of the patient’s health status. It displays a visual map that

consists of the patient’s name, date consulted, findings, and diagnosis.

 41

Wireframes

Figure 15. Log-In Form of Health Watch

A typical Health Management System sign-in page is seen in this figure.

It is an easy-to-use method that allows admin to access their health information.

Admin must click the "Sign in" button after entering their password and email

address in the designated areas. If they want to be automatically signed in the

next time they visit the website, they can check the "Remember me" checkbox.

If they forget their password, they can click the "Forgot password?" button to

reset it. If they don't have an account yet, they can click the "Don't have an

account yet! Sign up" button to create one.

 42

Figure 16. Dashboard Menu of Health Watch

This figure shows the dashboard page displays the summary of the total

patients, consultations, immunizations, mortality, and natality each week that is

recorded in the system.

Figure 17. Patients Menu of HealthWatch

This figure shows the Patients menu. It consists of different features like

Name, Sex, Date Registered, Actions, Search by name, Sex, Columns, and

Add New. This form will display all patients record.

 43

Figure 18. Add New Patient Record of HealthWatch

This figure shows the Patient Record “Add New” feature. This contains the

following fields: Last Name, Middle Name, Sex, Birth Date, Date Registered,

Father’s Name, Mother’s Name, Email Address, Mobile Number, and other

personal information. This feature allows the admin and users to create a new

record for a patient in the HealthWatch.

Figure 19. Consultations Menu of HealthWatch

This figure shows the system administrator's consultation page. This is

a list of options an admin can select from when consulting with a patient. The
 44

patient consultation will be displayed on this page and users and nurse can

easily view the patient's condition.

Figure 20. New Consultation Record “Personal Information” of Health Watch

This figure shows the new consultation record, in which the admin and

user will select the patient's personal information first before knowing the

patient's condition.

Figure 21. New Consultation Record “Medical History” of Health Watch

This figure shows the medical history form that will be filled by the admin

and users. This includes personal medical history, past surgical history, and
 45

date done. This page is not required, admin and users can take the next step.

Figure 22. New Consultation Record “Cont. Medical History” of Health Watch

This figure shows the cont. medical history form that will be filled by the

admin and users. This includes family medical history, past surgical history, and

date done. This page is not required, admin and users can take the next step.

Figure 23. New Consultation Record “Social History” of Health Watch

This figure shows social history on the consultations page. This includes

when the patient is smoking, taking alcohol or illicit drugs, and if the patient is

sexually active after that admin and nurse can take the next step.
 46

Figure 24. New Consultation Record “Immunization” of Health Watch

This figure shows the immunization on the consultation page. This

includes patient immunization for children, adults, for elderly, and

immunocompromised and other immunizations. The admin and users can take

the next step.

Figure 25. New Consultation Record “Physical Examination” of Health Watch

The figures show physical examination on the consultation page. This

includes patients’ height, weight, temperature, blood pressure, heart rate,

respiratory rate, visual activity, and blood type. A physical examination is

required for consultation before the next page.

 47

Figure 26. New Consultation Record “Pertinent Findings Per System” of Health Watch

This figure shows pertinent findings per system on the consultation page.

This page is required that include heent, chest/breast/lungs, heart, abdomen,

genitourinary, digital rectal examination, skin/extremities, and neurological

examination. This page also includes if the patient needs to have a diagnosis

and medicine prescriptions. The admin and user can take the next step.

Figure 27. New Consultation Record “Doctor’s Assessment” of Health Watch

The records are presented as a complete record of the doctor's

assessment of the patient's health status, medical background, symptoms, and

 48

any preliminary diagnostic results.

Figure 28. Immunization Sheet Form for Senior Citizens in Health Watch

This figure shows the immunization sheet form for senior citizens. This

interface will show a column containing the Date of assessment, Osca ID No.,

Name, and Complete Address of Senior Citizens. The admin can search here and

add more records.

Figure 29. Immunization Sheet Form for Infants in Health Watch

This figure shows the immunization sheet form for infants. This interface

will show the personal information of the child like Name, Date of Birth, Name
 49

of Parents, etc. The admin can search here and add more records.

Figure 30. Death Rate Menu of Health Watch

This figure shows the Death Rate Menu. It contains the death records of

the people from San Nicolas. The column contains date died, types, category,

sex, and actions.

Figure 31. User Management Menu of Health Watch

This figure shows the user management page contains a search bar,

name, sex, date register, and actions. This feature allows the user to create a

new user record for a patient in the Health Watch system. This contains an
 50

email, first name, middle name, last name, and sex. After that, click the submit

record button.

Figure 32. User Management “New User Record” of Health Watch

This figure shows the new consultation record for personal information, it

contains name, address, date of birth, and other pertinent identifiers, for certain

purposes. On this page, it will be able to record information on a consultation

involving personal information.

Figure 33. Settings Menu of Health Watch

This figure shows the system settings. It contains the user profile such as

the user's personal information (Full Name & Sex) and account information
 51

(Email Address and password). The admin can also change information or

password by just click save changes.

Use Case Diagram

Figure 34. Use Case Diagram for Nurse Administrator

Figure 34 shows the Use Case Diagram of the nurse administrator. The

nurse administrator of health unit can view and create patient records. They

can view, create and edit patient records and can view the medical histories.

Moreover, the nurse administrator can also set an appointment and reports as

well as can change credentials like username/password. Additionally, can view

and edit immunization of infants. The nurse administrator can add new users.

Additionally, the nurse administrator provides to barangay health workers and

barangay nutrition scholars to give authentication to access the system.

 52

Figure 35. Use Case Diagram for Barangay Health Workers User

Figure 35 shows the Use Case Diagram of the barangay health workers

administrator. The barangay health workers administrator of health unit can

view, create, and edit patient records. They can view and edit immunization of

senior citizen. Moreover, the barangay health workers administrator can also

view and edit records of mortality and natality data as well as can change

credentials like username/password. The barangay health workers can access

the system. It can also add new users to the system.

 53

Figure 36. Use Case Diagram for Barangay Nutrition Scholars User

Figure 36 shows the Use Case Diagram of the barangay health workers

administrator. The barangay health workers administrator of health unit can

view, create, and edit patient records. They can view and edit immunization of

infants. Moreover, the barangay health workers administrator can also view and

edit records of mortality and natality data as well as can change credentials like

username/password. The barangay nutrition scholars can access the system.

It can also add new users to the system.

 54

Project Development

Figure 37. Modified Waterfall Model

The waterfall model is a sequential software development process,

where progress flows steadily toward the conclusion like a waterfall through the

phases of a project. The developers will use this type of development model

aside from every phase being specific and direct to the point, all the stages

presented were easy to understand. Another reason why the developers have

decided to use this waterfall model is that a schedule can be set with deadlines

for each stage of development and a product can proceed through the

development process model phases one by one.

Phase 1: Requirements

The developers attended a meeting with the San Nicolas Health Unit’s staff

to determine the best procedure for developing HealthWatch. Should identify

 55

the key components, information requirements, user roles, and any

requirements or limitations that must be followed. The developers' statement of

the goals and requirements for the San Nicolas Health Unit was supported by

the information obtained from the interview.

Phase 2: Design

Use case diagrams and the wireframe for the web application's user

interface were all used by the developers to create the plan during the design

phase, which enabled the developers to assess the system's hardware and

software requirements.

Phase 3: Implementation

Currently, the designers will create the system's actual source code that

allows XAMPP Server, Visual Studio, Web Browser, NextJS, Tailwind CSS,

Flowbite, NodeJS, XAMPP, and MySQL to be the preferred scripting

programming languages to be employed. MySQL will also be utilized by the

developers as a database or data store. Furthermore, since documentation is

also an essential part of system development, it is also in process.

Phase 4: Testing

In the 4th stage of the model, the developers performed different testing

activities such as functionality testing and compatibility testing, and ISO/IEC

25010 will be utilized to assess the system.

Phase 5: Deployment

After the test runs, the administrator, who was properly certified to use

the system, is going to implement the web-based application.

 56

Project Testing and Evaluation Procedures

The project used several tests such as functionality testing and browser

compatibility testing and evaluation using ISO 25010 in terms of product quality.

Project Testing

Functionality Testing

The developers performed the testing to ensure that the system meets

its objectives. It also measured the interface, and all its functions are properly

working. This helped the developers to know if the system can be easily

understood and used by the administrator and employees. Testing the system

also helped the developers to know what the system needed to improve.

Table 1. Functionality Testing

Test Navigation Expected Action Actual Result Status

Sequence Path Result

Button Navigation Expected Result Click Actual Result Passed

Path or Failed

Table 1 shows the Functionality Testing table used by the developers.

The first column of the table indicates which button has been clicked. The

second column Navigation Path shows which page will be displayed after

clicking a specific button. The third column Expected Result determines whether

it proceeds to the navigation path. The action column shows if the action can be

clicked. The Actual Result displays the result or outcome of clicking a given

button. The last column is the status which is either passed or failed. If it is

passed, the Expected Result is displayed in the Actual Result and if it is not,
 57

the result is failed.

Table 2. Browser Compatibility Testing

Testing for browser compatibility is done by the developers. These tests

are used to ensure that the developed project can be viewed correctly and also

used to check that the design and layout are consistent through various checks.

Developers test their projects by submitting them for inspection. According to

the Similar Web (2023), the top three web browsers are Google Chrome,

Microsoft Edge, and Mozilla Firefox.

Web Expected Result Actual Result Recommended

Browsers

Google .Expected Result Actual Result Yes or No

Chrome

Microsoft Expected Result Actual Result Yes or No

Edge

Mozilla Expected Result Actual Result Yes or No

Firefox

Table 2 shows the Browser Compatibility Testing table used by the

developers. The first column of the table consists of Google Chrome, Microsoft

Edge, and Mozilla Firefox which is used for testing. The second column

Expected Result indicates if the browser that has been used is to probable

outcome. The developers would recommend or advise using that particular

browser.
 58

Project Evaluation

Project Evaluation to assess the acceptability of the system, the

developers used ISO/IEC 25010 to evaluate the system. ISO/IEC 25010 itself

contains functional suitability, performance efficiency, usability, reliability, and

security. The system was evaluated by Ten (10) non–IT respondents, one (1)

nurse, ten (10) I.T Professionals, five (5) BHW Barangay Health Workers, and

five (4) BNS Barangay Nutrition Scholars.

These are the basis for evaluating the system:

Functional suitability - used to test the functions if it does have met the stated

and implied needs under specified conditions.

Performance efficiency - used to test the responsiveness of the system.

Usability - used to test if the system will be easy to understand the use for the

specified users to achieve the specified goals with effectiveness, efficiency, and

satisfaction in a specified context of use.

Reliability - used to test if the component performs specified functions under

specified conditions for a specified time.

Security - used to test if the user has data access that is appropriate to their

types and levels of authorization.

 59

Statistical Treatment of Data

To test the reliability of the data gathered, the developers used a

numerical table that contains the scale used to evaluate the system. Likert

scale, a five-point scale used in survey research, where respondents rate their

level of agreement with a statement. Although not synonymous, the scale was

often used interchangeably with a rating scale. The scale categorizes

responses into Excellent, Very Good, Good, Fair, and Poor.

Table 3. Range of Scale Value for interpreting the Evaluation Result

Statistical Treatment

Scale Interpretation

4.51-5.00 Excellent

3.51-4.50 Very Good

2.51-3.50 Good

1.51-2.50 Fair

1.00-1.50 Poor

Table 3 indicates the statistical treatment used in evaluating the project.

4.51- 5.00 interpreted as "Excellent, 3.51-4.50 interpreted as "Very Good",

2.51-3.50 interpreted as "Good". 1.512.50 interpreted as "Fair", and 1.00-1.50

interpreted as "Poor".
 60

CHAPTER IV
RESULTS AND DISCUSSION

This chapter presents the project requirements and specifications,

project description as well as its capabilities and limitations. The chapter also

includes the project testing and evaluation results after the implementation of

the system.

Project Requirements and Specification

This section contains the hardware requirements, software

requirements, and human requirements that are needed to develop and

implement the developed project HealthWatch: A Health Management System

for San Nicolas Health Unit.

Hardware Requirements

This section shows the hardware requirements used for the development

and implementation of the system.

For the Development and Implementation

Computer or Laptop with the following minimum specifications:

• 32-bit or 64-bit OS (Windows 7 up to Windows 11 pro)

• Intel® Pentium® or higher

• 4.00GB RAM or higher

Software Requirements

This includes the different software requirements used by the developers

and needed in the development of the project.

• NextJS

• Tailwind CSS

• Flowbite
 61

• MySQL

• VS Code

• NodeJS

• XAMPP

• Ngrok

Human Resource Requirements

This section discusses the human resource requirements that are needed

in the implementation of the project.

• Nurse Administrator – who oversees managing the system's operations,

ensuring smooth operation, and providing technical support to users.

This includes setting up user accounts, managing patient records, and

configuring features to meet the specific needs of the San Nicolas Health

Unit. The Administrator also generates reports and statistics from the

system, which can be used to track the health status of the population

served, identify improvement areas, and make informed decisions about

resource allocation. Nurse Administrator is crucial in the success of the

HealthWatch system, as it ensures the system is used to improve the

health of the population served by the San Nicolas Health Unit.

• Barangay Health Workers/Barangay Nutrition Scholars Users - are

responsible for managing patient records and adding patient

consultations when the admin gives them authentication to the system.

The users are individuals who enter, verify, correct, analyze, or obtain

information from patient records. All users of the patient record ultimately

support patient care and maintain the integrity and confidentiality of

patient record.
 62

Knowledge Requirements

This section discussed the knowledge requirements that were used in

the developed project.

• Knowledge about health management system.

• Knowledge about database management.

• Knowledge about decision support.

• Knowledge about web-based data systems.

• Knowledge about patient records.

• Knowledge about workflow and procedures.

Project Description

The developed project entitled “The Development of HealthWatch: A

Health Management System for San Nicolas Health Unit” was developed for

Barangay San Nicolas Health Center to improve its efficiency and effectiveness

in providing healthcare services to the community. The system is designed to

automate many of the manual tasks that San Nicolas Health Unit currently

perform, such as medical records, medical history, patient’s health status, and

reports.

Project Features

This section discusses the capabilities and limitations of HealthWatch: A

Health Management System for San Nicolas Health Unit. It also includes

screenshots of the developed project.

 63

Screen Hierarchy

Figure 38. Login Page of HealthWatch

This figure shows a typical sign-in page for the Health Management

System. It is a simple way for users to access their health information. To sign

in, users need to enter their email address and password in the input fields and

click the "Sign in" button. If users want to be automatically signed in the next

time visiting the website, users can check the "Remember me" checkbox. If the

password is forgotten, users can click the "Forgot password?" button to reset

it. If account is not created yet, click the "Don't have an account yet! Sign up"

button to create one.

 64

Figure 39. Dashboard of HealthWatch

Figure 40. Dashboard of HealthWatch

This figure shows the dashboard page displays the summary of the total

patients, consultations, immunizations, mortality, and natality each week that is

recorded in the system.

 65

Figure 41. Patients Menu of HealthWatch

This figure shows the Patient Record page. It consists of different

features like Name, Sex, Date Registered, Actions, Search by name, Sex,

Columns, and Add New. This form will display all the patient records.

Figure 42. Patients Menu “Add New” Form of HealthWatch

This figure shows the Patient Record “Add New” feature. This contains

the following fields: Last Name, Middle Name, Sex, Birth Date, Date Registered,

Father’s Name, Mother’s Name, Email Address, Mobile Number, PhilHealth

Number, and lastly Member Type. This feature allows the user to create a new

record for a patient in the Health Watch system. To create a new patient record,
 66

users simply need to enter the required information in the corresponding fields

and click the Submit Record button. The system will then create a new record

for the patient and redirect the user to the patient's dashboard. This feature

allows the admin and users to create a new record for a patient in the

HealthWatch.

Figure 43. Consultations Menu of HealthWatch

It shows the consultation page of the administrator side of the system. If

the names of the patients are not displayed on the consultation page, the

patients will not be provided with a consultation form.

 67

Figure 44. New Consultation Record “Personal Information” of HealthWatch

It shows the new consultation record for personal information. On this

page, it will be able to record information on a consultation involving personal

information. including name, address, date of birth, and other pertinent

identifiers, for certain purposes.

Figure 45. New Consultation Record “Geographic Information” of HealthWatch

The figure shows the geographic information. The nurse can drag the

map to locate the location or search from the address bar. This mapping is for

diagnosis that can see in the reports page.

 68

Figure 46. New Consultation Record “Medical History” of HealthWatch

It shows the need to collect essential medical history information during

a patient's initial consultation or visit. Therefore, specifics regarding the illness

or condition the patient is now experiencing, such as the start, certainly, and

progression of symptoms, as well as information regarding previous surgeries,

illnesses, or significant medical circumstances in the patient's previous

historyThis figure shows the medical history form that will be filled by the admin

and users. This includes personal medical history, past surgical history, and

date done. This page is not required, admin and users can take the next step.
 69

Figure 47. New Consultation Record “Cont. Medical History” of HealthWatch

It presents details on the medical history of the patient's immediate family

members, which may be useful in determining any possible genetic factors. The

information on every surgery or operating procedure the patient has ever had

will be entered by the administrator.

Figure 48. New Consultation Record “Social History” of HealthWatch

This figure shows social history on the consultations page. This includes

when the patient is smoking, taking alcohol or illicit drugs, and if the patient is

sexually active after that admin and nurse can take the next step.
 70

Figure 49. New Consultation Record “Immunization” of HealthWatch

It shows a patient's consultation to record and track their immunization

history. This may cover children’s vaccinations, booster shots, and any recent

immunizations, as well as adult vaccinations, pneumococcal vaccines, and

influenza (Flu) vaccines.

Figure 50. New Consultation Record “Pedia Physical Examination” of HealthWatch

The figure shows if the patient or pedia clients aged 0-24 months old.

The form is required includes the body length head circumference, skinfold
 71

thickness, hip, limbs, abdomen waist circumference and middle and upper arm

circumference. After that nurse the nurse can take the next step.

Figure 51. New Consultation Record “Family Planning, Mestrual, and Pregnancy

History” of HealthWatch

This form will show if the patient is female and aged 18 above. The form

have required information, includes if the patient is with access in family

planning, menache, onset of sexual intercourse, last menstrual period, period

duration, pads per, and interval cycle. Also, includes not required information

like, birth control method, if the patient is menopause, pregnancy history, type

of delivery and pregnancy includes hypertension.

 72

Figure 52. New Consultation Record “Physical Examination” of HealthWatch

The figures show physical examination on consultation page. This

includes patients’ height, weight, temperature, blood pressure, heart rate,

respiratory rate, visual activity, and blood type. Physical examination is required

on consultation before to the next page.

 73

Figure 53. New Consultation Record “Pertinent Findings per System” of HealthWatch

Figure 54. New Consultation Record “Pertinent Findings per System” of HealthWatch

It shows how to record relevant information gathered during a patient

consultation, focusing on findings related to each bodily system. On this page,

during the examination of each bodily system, including the chest, breast,

lungs, heart, and abdomen, and any recent pertinent findings per system.
 74

Figure 55. New Consultation Record “Pertinent Findings per System” of HealthWatch

The records are presented as a complete record of the doctor's

assessment of the patient's health status, medical background, symptoms, and

any preliminary diagnostic results.

Figure 56. Immunization for Senior Citizen of HealthWatch

 75

Figure 57. Immunization for Senior Citizen of HealthWatch

Figure 58. Immunization for Senior Citizen of HealthWatch

Inside the immunization sheet form, a button will show the senior citizen

interface. This interface showcases all the immunizations for adults or senior

citizens submitted by the patients. The patient fills up this immunization sheet

form/consultation record to recognize which immunization the patient belongs

to. The admin/user can view the new queue consultation record from

immunizations coming from the patient.

 76

Figure 59. Immunization for Infants/Babies of HealthWatch

Figure 60. Immunization for Infants/Babies of HealthWatch

 77

Figure 61. Immunization for Infants/Babies of HealthWatch

Figure 62. Immunization for Infants/Babies of HealthWatch

 78

Figure 63. Immunization for Infants/Babies of HealthWatch

Figure 64. Immunization for Infants/Babies of HealthWatch

 79

Figure 65. Immunization for Infants/Babies of HealthWatch

Figure 66. Immunization for Infants/Babies of HealthWatch

Inside the Infants/Babies immunization sheet form, the other button

shows the infants/ babies interface. This interface will show the personal

information of the child and the date of registration. It also includes child

protection of birth and status, immunization, nutritional status low birth weight

given iron, and breastfeeding of newborn to 12 months old babies. It can also

add new and search records in this interface.

 80

Figure 67. Death Rate of HealthWatch

This figure shows the Death Rate Menu. This feature can be used to

track the health and growth of Brgy. San Nicolas. It consists of different features

like Type, Category, Sex, Actions, Columns, and Add new. It has edit and delete

options in actions button.

Figure 68. Death Rate of HealthWatch

This figure shows the New Death Rate. This feature can be used to track

the health and growth of Brgy. San Nicolas. It consists of different features like

Type, Category, Sex, and Date Died.

 81

Figure 69. User Management of HealthWatch

This figure shows the user management page contains a search bar,

name, sex, date register, and actions. This feature allows the user to create a

new user record in the Health Watch system. This contains an email, first name,

middle name, last name, and sex. After that, click the submit record button.

Figure 70. User Management “New User Record” of HealthWatch

This figure shows the new user record of HealthWatch. It requires to

enter email, first name, last name, middle name, and sex. The password is

default by the system.

 82

Figure 71. Reports of HealthWatch

The figure shows the reports of the developed system. The page has

diagnosis like essentially normal and cough. The nurse or users can search the

name of the patient that have diagnosis. Also, there is an option date started

and ended to see the patient diagnosis that time.

Figure 72. Settings of HealthWatch

This figure shows the setting of system. In the setting admin and user

can change their personal information and account information like email and

password. Click the logout button to reset the password.

 83

Project Capabilities and Limitations

This section states the project capabilities and limitations of the

HealthWatch: A Health Management System for San Nicolas Health Unit.

The developed project has the following capabilities:

• The project can display the summary of all patients.

• The project can add and view patient information.

• The project can generate medical history, current symptoms, and other

relevant details.

• The project can display the relevant data on seniors, relevant information

on infants and newborns, and the summary of all total numbers of births

and deaths.

• The project can display essential information about a patient's health

status, diagnosis, treatment, and other relevant details.

• The project can display diagnosis map.

The following are some of the limitations:

• The project is only available to San Nicolas Health Unit.

• The only person with access to the full project is the Health Center Staff

in San Nicolas.

• The system is not designed to replace the advice of a healthcare

professionals.

• The system cannot be accessed without internet connection.

 84

Project Testing and Evaluation Results

Project Testing

Functionality testing is performed to validate if the system performs its

stated functions and meets its objectives. It tests each feature of the system by

providing appropriate input and verifying the output against the functional

requirements. This testing checks the user interface, database, client/server

communication, and other system functionalities.

Table 4. Function Testing in Login Page

Test Navigation Expected Action
Action Status
Sequence Path Result Result
Show
Dashboard Account
Login Button Click Dashboard PASSED
Page Logged in
Page

Proceed to Show
Rember me Remember
Remember Click Remember PASSED
Button me Page
me Page me Page

Proceed to
Forgot Forgot Show Forgot
Forgot
Password Password Click Password PASSED
Password
Button Page Page
Page

Table 4 shows the Functionality Testing in Login Page. The first column

shows all the buttons on Login Page. Each button has its task to perform

according to its function. All the buttons successfully executed its intended

actions. Therefore, the results of the testing of each button are passed.
 85

Table 5. Function Testing in Forgot Password Page

Test Navigation Expected Action
Action Status
Sequence Path Result Result

Send email Proceed to Show Login

Login Page Click PASSED
Button Login Page Page

Cancel Proceed to Show Login

Login Page Click PASSED
Button Login Page Page

Table 5 shows the Functionality Testing in Forgot Password Page. The

first column shows all the Page. Each button has its task to perform according

to its function. All the buttons successfully executed its intended actions.

Therefore, the results of the testing of each button are passed.

Table 6. Function Testing in Dashboard Page

Test Navigation Expected
Action Action Result Status
Sequence Path Result
Proceed to Show
Dashboard Dashboard
Dashboard Click Dashboard PASSED
Button Page
Page Page

Total Patients
Proceed to Show Patients
View all Patients Page Click PASSED
Patients Page Page
Button

Total
Proceed to Show
Consultations Consultations
Consultations Click Consultations PASSED
View all Page
Page Page
Button

Total
Proceed to Show
Immunizations Immunizations
Immunizations Click Immunizations PASSED
View all Page
Page Page
Button

Total Deaths Proceed to

Death Rate Show Death
View all Death Rate Click PASSED
Page Rate Page
Button Page

Table 6 shows the Functionality Testing in Dashboard Page. The first

column shows all the Page. Each button has its task to perform according to its

function. All the buttons successfully executed its intended actions. Therefore,

the results of the testing of each button are passed.

 86

Table 7. Function Testing in Patients Page

Test Navigation Expected

Action Action Result Status
Sequence Path Result

Patients Proceed to Show Patients

Patients Page Click PASSED
Button Patients Page Page

Add New Proceed to Show Patients

Patients Page Click PASSED
Button Patients Page Page

Calendar Proceed to Show Patients

Patients Page Click PASSED
Button Patients Page Page

Member Type Proceed to Show Patients

Patients Page Click PASSED
Button Patients Page Page

Submit Proceed to Show Patients

Patients Page Click PASSED
Record Button Patients Page Page

Search Proceed to Show Patients

Patients Page Click PASSED
Patient Button Patients Page Page

Proceed to Show Patients

Sex Button Patients Page Click PASSED
Patients Page Page

Columns Proceed to Show Patients

Patients Page Click PASSED
Button Patients Page Page

Proceed to Show Patients

Edit Button Patients Page Click PASSED
Patients Page Page

Proceed to Show Patients

Delete Button Patients Page Click PASSED
Patients Page Page

Proceed to Show Patients

Page Button Patients Page Click PASSED
Patients Page Page
 87

Table 7 shows the Functionality Testing in Patients Page. The first

column shows all the Page. Each button has its task to perform according to its

function. All the buttons successfully executed its intended actions. Therefore,

the results of the testing of each button are passed.

Table 8. Function Testing in Consultations Page

Test Navigation Expected
Action Action Result Status
Sequence Path Result
Proceed to Show
Consultations
Search Button Consultations Click Consultations PASSED
Page
Page Page

Proceed to Show
Consultations
Sex Button Consultations Click Consultations PASSED
Page
Page Page

Proceed to Show
Columns Consultations
Consultations Click Consultations PASSED
Button Page
Page Page

Proceed to
New Show New
Add New New
Consultation Click Consultation PASSED
Button Consultation
Record Page Record Page
Record Page

Proceed to
New Show New
Patient Name New
Consultation Click Consultation PASSED
Button Consultation
Record Page Record Page
Record Page

Proceed to
New Show New
Member Type New
Consultation Click Consultation PASSED
Button Consultation
Record Page Record Page
Record Page

Proceed to
New Show New
Next Step New
Consultation Click Consultation PASSED
Button Consultation
Record Page Record Page
Record Page

Proceed to Show
Consultations
View Button Consultations Click Consultations PASSED
Page
Page Page

Proceed to Show
Consultations
Edit Button Consultations Click Consultations PASSED
Page
Page Page

Proceed to Show
Consultations
Delete Button Consultations Click Consultations PASSED
Page
Page Page
 88

Table 8 shows the Functionality Testing in Consultations Page. The first

column shows all the Page. Each button has its task to perform according to its

function. All the buttons successfully executed its intended actions. Therefore,

the results of the testing of each button are passed.

Table 9. Function Testing in Immunizations of Senior Citizen Page

Test Navigation Expected
Action Action Result Status
Sequence Path Result
Proceed to Show
Immunizations
Search Immunizations Immunizations
of Senior Click PASSED
Patient Button of Senior of Senior
Citizen Page
Citizen Page Citizen Page

Proceed to Show
Immunizations
Immunizations Immunizations
Record Button of Senior Click PASSED
of Senior of Senior
Citizen Page
Citizen Page Citizen Page

Proceed to Show
Immunizations
Calendar Immunizations Immunizations
of Senior Click PASSED
Button of Senior of Senior
Citizen Page
Citizen Page Citizen Page

Proceed to Show
Immunizations
Immunizations Immunizations
Save Button of Senior Click PASSED
of Senior of Senior
Citizen Page
Citizen Page Citizen Page

Proceed to Show
Immunizations
Immunizations Immunizations
Delete Button of Senior Click PASSED
of Senior of Senior
Citizen Page
Citizen Page Citizen Page

Table 9 shows the Functionality Testing in Immunizations of Senior

Citizen Page. The first column shows all the Page. Each button has its task to

perform according to its function. All the buttons successfully executed its

intended actions. Therefore, the results of the testing of each button are

passed.
 89

Table 10. Function Testing in Immunizations of Infants/Babies Page

Test Navigation Expected
Action Action Result Status
Sequence Path Result
Proceed to Show
Immunization
Immunization Immunization
Search of
of Click of PASSED
Patient Button Infants/Babies
Infants/Babies Infants/Babies
Page
Page Page

Proceed to Show
Immunization
Immunization Immunization
of
Record Button of Click of PASSED
Infants/Babies
Infants/Babies Infants/Babies
Page
Page Page
Proceed to Show
Immunization
Immunization Immunization
of
Status Button of Click of PASSED
Infants/Babies
Infants/Babies Infants/Babies
Page
Page Page
Proceed to Show
Immunization
Immunization Immunization
Calendar of
of Click of PASSED
Button Infants/Babies
Infants/Babies Infants/Babies
Page
Page Page
Proceed to Show
Immunization
Immunization Immunization
of
Save Button of Click of PASSED
Infants/Babies
Infants/Babies Infants/Babies
Page
Page Page

Proceed to Show
Immunization
Immunization Immunization
of
Delete Button of Click of PASSED
Infants/Babies
Infants/Babies Infants/Babies
Page
Page Page

Table 10 shows the Functionality Testing in Immunizations of

Infants/Babies Page. The first column shows all the Page. Each button has its

task to perform according to its function. All the buttons successfully executed

its intended actions. Therefore, the results of the testing of each button are

passed.
 90

Table 11. Function Testing in Death Rate Page

Test Navigation Expected
Action Action Result Status
Sequence Path Result

Proceed to
Death Rate Show Death
Sex Button Death Rate Click PASSED
Page Rate Page
Page

Proceed to
Columns Death Rate Show Death
Death Rate Click PASSED
Button Page Rate Page
Page

Proceed to
Add New Death Rate Show Death
Death Rate Click PASSED
Button Page Rate Page
Page

Proceed to
Death Rate Show Death
View Button Death Rate Click PASSED
Page Rate Page
Page

Proceed to
Death Rate Show Death
Edit Button Death Rate Click PASSED
Page Rate Page
Page

Proceed to
Death Rate Show Death
Delete Button Death Rate Click PASSED
Page Rate Page
Page

Proceed to
Death Rate Show Death
Page Button Death Rate Click PASSED
Page Rate Page
Page

Proceed to Show New

New Death
Type Button New Death Click Death Record PASSED
Record Page
Record Page Page

Proceed to Show New

Category New Death
New Death Click Death Record PASSED
Button Record Page
Record Page Page
 91

Proceed to Show New

New Death
Sex Button New Death Click Death Record PASSED
Record Page
Record Page Page

Proceed to Show New

New Death
Date Died New Death Click Death Record PASSED
Record Page
Record Page Page

Proceed to
Submit Death Rate Show Death
Death Rate Click PASSED
Record Button Page Rate Page
Page

Table 11 shows the Functionality Testing in Death Rate Page. The first

column shows all the Page. Each button has its task to perform according to its

function. All the buttons successfully executed its intended actions. Therefore,

the results of the testing of each button are passed.

Table 12. Function Testing in User Management Page

Test Navigation Expected
Action Action Result Status
Sequence Path Result

Proceed to
User Show User
User
Search Button Management Click Management PASSED
Management
Page Page
Page

Proceed to
User Show User
User
Sex Button Management Click Management PASSED
Management
Page Page
Page

Proceed to
User Show User
Columns User
Management Click Management PASSED
Button Management
Page Page
Page

Proceed to Show New

Add New New User
New User Click User Record PASSED
Button Record Page
Record Page Page
 92

Proceed to
User Show User
User
View Button Management Click Management PASSED
Management
Page Page
Page

Proceed to
User Show User
User
Edit Button Management Click Management PASSED
Management
Page Page
Page

Proceed to
User Show User
User
Delete Button Management Click Management PASSED
Management
Page Page
Page

Proceed to
User Show User
User
Page Button Management Click Management PASSED
Management
Page Page
Page

Proceed to Show New

New User
Sex Button New User Click User Record PASSED
Record Page
Record Page Page

Proceed to
User Show User
User
Submit Button Management Click Management PASSED
Management
Page Page
Page

Table 12 shows the Functionality Testing in User Management Page.

The first column shows all the Page. Each button has its task to perform

according to its function. All the buttons successfully executed its intended

actions. Therefore, the results of the testing of each button are passed.
 93

Table 13. Function Testing in Reports Page

Test Navigation Expected
Action Action Result Status
Sequence Path Result

Proceed to Show Reports

Search Button Reports Page Click PASSED
Reports Page Page

Diagnosis Proceed to Show Reports

Reports Page Click PASSED
Button Reports Page Page

Calendar Proceed to Show Reports

Reports Page Click PASSED
Button Reports Page Page

Proceed to Show Reports

Map Button Reports Page Click PASSED
Reports Page Page

Proceed to Show Reports

Add Button Reports Page Click PASSED
Reports Page Page

Proceed to Show Reports

Minus Button Reports Page Click PASSED
Reports Page Page

Table 13 shows the Functionality Testing in Reports Page. The first

column shows all the Page. Each button has its task to perform according to its

function. All the buttons successfully executed its intended actions. Therefore,

the results of the testing of each button are passed.

 94

Table 14. Function Testing in Settings Page

Test Navigation Expected
Action Action Result Status
Sequence Path Result

Proceed to Show Settings

Sex Button Settings Page Click PASSED
Settings Page Page

Save
Proceed to Show Settings
Changes Settings Page Click PASSED
Settings Page Page
Button

Table 14 shows the Functionality Testing in Settings Page. The first

column shows all the Page. Each button has its task to perform according to its

function. All the buttons successfully executed its intended actions. Therefore,

the results of the testing of each button are passed.

Browser Compatibility Testing

Table 15. Function Testing in Browser Compatibility Testing

Web Expected
Actual Results Status/Result Recommended
Browser Results
All buttons were placed

All buttons properly, the layout was

Google
and elements properly displayed and all Passed Yes
Chrome
are in place of the elements’ sizes

were resized accordingly

All buttons were placed

All buttons properly, the layout was

Microsoft
and elements properly displayed and all Passed Yes
Edge
are in place of the elements’ sizes

were resized accordingly

All buttons were placed

All buttons properly, the layout was

Mozilla
and elements properly displayed and all Passed Yes
Firefox
are in place of the elements’ sizes

were resized accordingly

 95

Project Evaluation

Table 16. ISO 25010 Evaluation results of the Non-IT Respondents

Characteristic Rating Interpretation

Functional Suitability 4.41 Very Good

Performance Efficiency 4.57 Excellent

Usability 4.77 Excellent

Reliability 4.58 Excellent

Security 4.62 Excellent

Overall Mean 4.59 Excellent

Table 16. shows the results of the evaluation of the non-IT respondents.

In terms of Functional Suitability, the developed project obtained a

rating of 4.41 from non-IT respondents. This means that some of the non-IT

respondents agreed that the developed project is functional as it has been rated

as Very Good, and able to provide the specific needs and requirements of the

San Nicolas Health Unit.

In terms of Performance Efficiency, the developed project attained a

rating of 4.57 from non-IT respondents. This means that the non-IT respondents

agreed that the developed project performs its task efficiently.

In terms of Usability, the developed project attained a rating of 4.77

from the non-IT respondents. This means that the non-IT respondents agreed

that the developed project is usable, learnable, and easy to operate.

In terms of Reliability, the developed project attained a rating of 4.58

from the non-IT respondents. This means that the non-IT respondents agreed

that the developed project performs consistently and reliably under normal

operation.
 96

Regarding Security, the developed project obtained a rating of 4.62

from the non-IT respondents. This means that the non-IT respondents generally

agree that the developed project can protect sensitive data and ensure that

data are accessible only to authorized users.

Overall, the developed project obtained a rating of 4.59 from the non-IT

respondents and was interpreted as “Excellent”. This means that non-IT

respondents generally agree that the developed project is functional, efficient,

usable, reliable, and secure.

Table 17. ISO 25010 Evaluation results of the IT Expert Respondents

Characteristic Rating Interpretation

Functional Suitability 4.35 Very Good

Performance Efficiency 4.27 Very Good

Usability 4.42 Very Good

Reliability 4.25 Very Good

Security 4.53 Excellent

Overall Mean 4.36 Very Good

Table 17. shows the results of the evaluation of the IT respondents.

In terms of Functional Suitability, the developed project obtained a

rating of 4.35 from non-IT respondents. This means that some of the non-IT

respondents agreed that the developed project is functional as it has been rated

as Very Good, and able to provide the specific needs and requirements of the

San Nicolas Health Unit.

In terms of Performance Efficiency, the developed project attained a

rating of 4.27 from non-IT respondents. This means that the non-IT respondents

agreed that the developed project performs its task efficiently.

 97

In terms of Usability, the developed project attained a rating of 4.42 from

the non-IT respondents. This means that the non-IT respondents agreed that the

developed project is usable, learnable, and easy to operate.

In terms of Reliability, the developed project attained a rating of 4.25

from the non-IT respondents. This means that the non-IT respondents agreed

that the developed project performs consistently and reliably under normal

operation.

Regarding Security, the developed project obtained a rating of 4.53

from the non-IT respondents. This means that the non-IT respondents generally

agree that the developed project can protect sensitive data and ensure that

data are accessible only to authorized users.

Overall, the developed project obtained a rating of 4.36 from the non-IT

respondents and was interpreted as “Very Good”. This means that non-IT

respondents generally agree that the developed project is functional, efficient,

usable, reliable, and secure.

 98

CHAPTER V
SUMMARY OF FINDINGS, CONCLUSIONS, AND RECOMMENDATIONS

This chapter presents the summary of findings conclusions, and

recommendations based on the results and findings during the development of

the system.

Summary of Findings

Depending on the outcomes of the testing and assessment carried out

on the general functionality of the developed system, the developers have

proved:

The developed project called HealthWatch has improved the efficiency

and effectiveness of patient care at the San Nicolas Health Unit. The system

has also improved the health unit's ability to track patient health information and

identify trends. The health unit's staff has been positive about the new system

and has found it easy to use.

Based on the findings of the evaluation processes that were carried out,

both Non-IT and IT experts expressed satisfaction and approval with the project

that was developed. In the evaluation conducted using ISO/IEC 25010, the

system gained a total mean score of 4.36 with an interpretation of “Very Good”

from IT Experts and a total mean of 4.59 with an interpretation of “Excellent”

from Non-IT.

Overall, the findings suggest that the health management system is a

well-designed and effective system. The system is easy to use, functional,

efficient, reliable, and secure. It also meets the functional needs of the users.
 99

Conclusions

With regards to the objectives of the development of HealthWatch: A

Management System for San Nicolas Health Unit, these are the conclusions

that are made:

1. The developers were able to enhance patient care by giving medical

professionals quick access to patient data, such as allergies, prescription

history, and medical history. Clinicians can prevent mistakes and make

better judgments about patient care with the use of this information.

2. The developers were able to boost productivity by automating a lot of

tedious processes, like making appointments, monitoring patients'

progress, and producing reports. Clinicians may then be able to

concentrate on treating patients.

3. The developers were able to use compatibility and functionality testing to

evaluate the suggested project's usability and functionality.

4. The developers were able to evaluate the performance of the system

which attained an overall mark of “4.59” (Excellent) from Non-IT and a

total score of “4.34” (Very Good) from the IT experts using ISO/IEC

25010.

5. The project was documented.

 100

Recommendations

The development of the health management system is advantageous to

nurse and other barangay health workers in the San Nicolas Health Unit. On

the other hand, there are some recommended additional features,

enhancements, and developments that assist in improving the significance of

the system.

1. Add a feature that allows patients to view their medical records online.

2. To enable better planning of the health unit workers and to minimize the

wait times of the patients at the clinic, add an Online Appointment

Scheduling to the system.

3. Remove the additional information if it’s only optional (redundant).

4. The immunization table is too long and shows too much information, just

display only the most important info then add a view more button for

viewing all of the information.

5. Add deletion logs or implement soft deletes or archiving

6. The application is efficient in monitoring and providing health awareness,

to data security, it must have additional security to make sure that the

private data information must not breach.

7. Kindly put the doctor’s name or nurse on duty and from the reports tab

kindly indicate the PDF documents in order for the patient to have a hard

or soft copy of their records.

 101

Bibliography

The roles of trust, personalization, loss of privacy, and anthropomorphism in

public acceptance of smart healthcare services. Computers in Human

Behavior, 127, 107026.

https://www.sciencedirect.com/science/article/pii/S0747563221003496?casa_

token=aCgRtCGPUuEAAAAA:rBN_rEFD7dqHgMnyozinfLT5D_LAdKFfV0Dt_

EHHbo3GGl6xnhDq6P3CVjQHYf32Q7JLPzVlbu8

Access to health services among culturally and linguistically diverse

populations in the Australian universal health care system: issues and

challenges. BMC Public Health, 22(1), 1-14.

https://bmcpublichealth.biomedcentral.com/articles/10.1186/s12889-022-

13256-z

Changes in access to health services during the COVID-19 pandemic: a

scoping review. International Journal of Environmental Research and Public

Health, 19(3), 1749. https://www.mdpi.com/1660-4601/19/3/1749

Automated Hospital Clinic Management System for Private Hospitals.

http://ir.kdu.ac.lk/handle/345/5188

Development of Web-Based Clinic Management System. Applied Information

Technology And Computer Science, 3(1), 466-485.

https://publisher.uthm.edu.my/periodicals/index.php/aitcs/article/view/2209

UNO Technologies. https://www.unotech.io/clinic-management-system-

software

Smart Hospital Diabetic Clinic Patient Management System. nursing license

map (2022), https://nursinglicensemap.com/resources/healthcare-

 102

careers/what-is-healthcare-management/

health and safety authority (2023),

https://www.hsa.ie/eng/topics/managing_health_and_safety/safety_and_healt

h_management_systems/

Feder, M (2022), https://www.phoenix.edu/blog/what-is-health-information-

management-definitions-and-examples.html

Nash, David (2022), https://home.liebertpub.com/publications/population-

health-management/301/overview

Kestrel Tellevate (2023), https://goktl.com/management-systems-back-to-

basics/

Span Consulting (2023), https://www.spanexperts.com/management-systems

Transition Support (2023), https://transition-

support.com/management_system.html

Liu, K., & Tao, D. (2022). The roles of trust, personalization, loss of privacy, and

anthropomorphism in public acceptance of smart healthcare services.

Computers in Human Behavior, 127, 107026.

https://www.sciencedirect.com/science/article/pii/S0747563221003496?casa_

token=aCgRtCGPUuEAAAAA:rBN_rEFD7dqHgMnyozinfLT5D_LAdKFfV0Dt_

EHHbo3GGl6xnhDq6P3CVjQHYf32Q7JLPzVlbu8

Access to health services among culturally and linguistically diverse

populations in the Australian universal health care system: issues and

challenges. BMC Public Health, 22(1), 1-14.

https://bmcpublichealth.biomedcentral.com/articles/10.1186/s12889-022-

13256-z
 103

Changes in access to health services during the COVID-19 pandemic: a

scoping review. International Journal of Environmental Research and Public

Health, 19(3), 1749. https://www.mdpi.com/1660-4601/19/3/1749

Automated Hospital Clinic Management System for Private Hospitals.

http://ir.kdu.ac.lk/handle/345/5188

Development of Web-Based Clinic Management System. Applied Information

Technology And Computer Science, 3(1), 466-485.

https://publisher.uthm.edu.my/periodicals/index.php/aitcs/article/view/2209

August (2020), UNO Technologies https://www.unotech.io/clinic-management-

system-software
 104

Appendices
 105

Appendix A
Gantt Chart
 106

GANTT CHART
ACTIVITY MAY (2023) JUNE (2023) JULY (2023) AUGUST (2023)
WEEK WEEK WEEK WEEK
1 2 3 4 5 1 2 3 4 1 2 3 4 1 2 3 4 5
Requirements

Design

Implementation
or system
development

Projecting
Testing

Documentation

SEPTEMBER OCTOBER NOVEMBER DECEMBER JANUARY

(2023) (2023) (2023) (2023) (2024)
WEEK WEEK WEEK WEEK WEEK
1 2 3 4 1 2 3 4 1 2 3 4 5 1 2 3 4 1 2 3 4 5
 107

Legend
Segovia, Lyca
Ramos, Jericho
Brual, Aislinn
Estrellado, Jem Jenica
 108

Appendix B
Testing and Evaluation Instrument
109
 110

Appendix C
Pictures Taken During Testing and Evaluation
 111

Response From Non-IT Experts and IT Experts (ISO Evaluation)

Functionality Sustainability
 112

Performance Efficiency
 113

Usability
 114

Reliability
 115

Security
116
 117

Evaluation of Nurse and BNS/BHW

 118

Appendix D
IT Expert’s Profile
119
120
121
122
123
124
125
126
 127

Appendix E
Evaluation Result Matrix
 128

ISO 25010 EVALUATION RESULT OF NON-IT EXPERTS

ISO 25010 EVALUATION RESULT OF IT EXPERTS

 129

Appendix E
User’s Manual
 130

1- Click to add user email.

2- Click to add password.

3- Click to sign up.

4- Click to change password.

5- Click to select remember the user.

1- Click to go into dashboard page.

2- Click to go into patient’s page.

3- Click to go into the consultation page.

4- Click to go into immunizations page.

5- Click to go into the natality and mortality page.

6- Click to go into the user management page.

 131

7- Click to go into reports page.

8- Click to go into setting page.

9- Click to logout to the system.

1- Click to view the total of patient records.

2- Click to view the total of consultation records.

3- Click to view the total of immunization records.

4- Click to view the total of death records.

5- It displays the natality and mortality graph rate.

6- It displays the patient grouped by sex.

7- It displays the patient group by age.

 132

1- Click to search patient name.

2- Click to select sex.

3- Click to select column.

4- Click to add new patient record.

5- Click to view, edit and delete patient record.

1- Click to type personal information to update patient records.

2- Click to save the changes.

3- Click to cancel the changes.

 133

1- Click to search patient name.

2- Click to select sex.

3- Click to select column.

4- Click to add new consultation.

5- Click to view, edit and delete consultation record.

1- Click to type personal information to add new consultation record.

2- Click to go to the next step

3- Click to cancel the new record.

 134

1- It displays the report of diagnosis.

2- Click to go to the next step.

3- Click to go to the previous step.

1- Click to select medical history.

2- Click to type past surgical history.

3- Click to select date done.

4- Click to go to the previous step.

5- Click to go to the next step.

 135

1- Click to select cont. medical history.

2- Click to type past surgical history.

3- Click to select date done.

4- Click to go to the previous step.

5- Click to go to the next step.

1- Click to select social history.

2- Click to go to the next step.

3- Click to go to the previous step.

 136

1- Click to select immunization.

2- Click to go to the next step.

3- Click to go to the previous step.

1- Click to fill-up the pedia physical examination.

2- Click to go to the next step.

3- Click to go to the previous step.

 137

1- Click to fill-up the family planning, menstrual, and pregnancy history.

2- Click to go to the next step.

3- Click to go to the previous step.

1- Click to fill-up the physical examination.

2- Click to go to the previous step.

3- Click to go to the next step.

 138

1- Click to select pertinent findings per system.

2- Click to select pertinent findings per system.

 139

3- Click to select pertinent findings per system.

4- Click to fill-up diagnosis.

5- Click to fill-up medicine prescription.

6- Click to go to the previous step.

7- Click to go to the next step.

1- Click to select doctor's assessment.

 140

2 – Enter the information about patient pain.

3 – Enter the information for others.

4 – Enter the information about patient history of illness.

5 – Click previous to show the previous step.

6 – Click to submit the record.

1 – Click to see the information about immunization of senior citizen.

2 – Click to submit the record.

3 – Enter the information about senior citizens immunization sheet form.

 141

4 – Enter the information about senior citizens immunization sheet form.

5 – Select the calendar menu for the senior citizens date information.

6 – Click to edit or save the records of immunization of senior citizens.

7 – Click to delete the information for immunization of senior citizens.

 142

1 – Click to see the information about immunization of infants/babies.

2 – Click to submit the record.

3 – Enter the information about infants/babies immunization sheet form.

4 – Enter the information about infants/babies immunization sheet form.

5 – Select the calendar menu for the infants/babies date information and

nutritional status assessment.

 143

6 – Select the calendar menu for the infants/babies date information about low

birth weight given iron.

7 – Select the calendar menu for the infants/babies date records about

immunization.
 144

8 – Select the information for the infants/babies about breastfeeding of newborn

to 12 months old babies, and nutritional status assessment.

9 – Select the calendar menu for the infants/babies date information, and

nutritional status assessment.

 145

10 – Select the calendar menu for the infants/babies date information.

11 – Click to edit or save the records of immunization of infants/babies.

12 – Click to delete the information for immunization of infants/babies.

1 – Click to select sex.

2 – Click columns.

3 – Click to add new users.

4 – Click to edit or delete the records of natality and mortality data.

 146

1 – Select what type.

2 – Select what category.

3 – Select sex.

4 – Select the calendar menu for date of birth.

5 – Click to submit record.

6 – Click to cancel.

1 - Click to see registered users record.

2 – Click to select sex.

3 – Click to select columns.

4 - Click to add new users.

 147

5 - Click to update the status of users.

1 – Enter the email of users.

2 – Enter the information of users.

3 – Click to submit record.

4 – Click to cancel.

1 - Click to see the name of the patient that has diagnosis.

2 – Click to see the diagnosis of the patient.

3 – Click the calendar menu to starting date of the patients consulted.

4 - Click the calendar menu to end date of the patients consulted.

 148

5 - Click the location pin to display the name, address, date consulted, findings,

and diagnosis.

1 – Enter the personal information of admin/users.

2 – Enter the email address of admin/users.

3 – Enter the password of admin/users.

4 – Click to save changes.

 149

Appendix G
Source Code
 150

LogIn message: err.message,

import { Button, Checkbox, Input, Link } type: 'danger',
from '@nextui-org/react'; });
import { signIn, useSession } from 'next- }
auth/react'; } finally {
import { useRouter } from 'next/router'; setLoading(false);
import Image from 'next/image'; }
import { FormEvent, useState } from if (status === 'authenticated') {
'react'; await
import { useToast } from router.push('/dashboard').catch((err) =>
'@/components/providers/ToastProvider' console.log(err));
; }
import logo from '/public/img/san- };
nicolas-seal.png'; return (
export default function Login() { <main className="bg-gray-50 dark:bg-
const { addToast } = useToast(); gray-900">
const { status } = useSession(); <div className="flex flex-col items-
const router = useRouter(); center justify-center px-6 py-8 mx-auto
const [credentials, setCredentials] = md:h-screen lg:py-0">
useState<{ <Image
email: string; className="w-36 h-36 mb-4"
password: string; src={logo}
}>({ alt="logo"
email: '', width="144"
password: '', height="144"
}); />
const [loading, setLoading] = <div className="w-full bg-white
useState(false); rounded-lg shadow dark:border md:mt-0
const handleSubmit = async (e: sm:max-w-md xl:p-0 dark:bg-gray-800
FormEvent<HTMLFormElement>) => { dark:border-gray-700">
e.preventDefault(); <div className="p-6 space-y-4
try { md:space-y-6 sm:p-8">
setLoading(true); <h1 className="text-xl font-bold
const response = await leading-tight tracking-tight text-gray-900
signIn('credentials', { md:text-2xl dark:text-white text-center">
redirect: false, Sign in to your account
callbackUrl: '/', </h1>
...credentials, <form
}); className="space-y-4 md:space-
y-6"
if (!!!response?.ok) { action="#"
throw new Error(response?.error ?? method="POST"
''); // eslint-disable-next-line
} @typescript-eslint/no-misused-promises
// TODO: Check for user role and onSubmit={handleSubmit}
redirect them to the appropriate page >
<Input
await router.push('/dashboard'); type="email"
} catch (err) { label="Your email"
if (err instanceof Error) { labelPlacement="outside"
addToast({
 151

placeholder="[email protected]" Consultation
onChange={(e) => import {
setCredentials((prev) => ({ Button,
...prev, Chip,
email: e.target.value, Dropdown,
})) DropdownItem,
} DropdownMenu,
value={credentials.email} DropdownSection,
required DropdownTrigger,
/> Input,
<Input Pagination,
type="password" Selection,
label="Your password" SortDescriptor,
labelPlacement="outside" Spinner,
placeholder="••••••••" Table,
onChange={(e) => TableBody,
setCredentials((prev) => ({ TableCell,
...prev, TableColumn,
password: e.target.value, TableHeader,
})) TableRow,
} User,
value={credentials.password} useDisclosure,
required import { useToast } from
/> '@/components/providers/ToastProvider'
<div className="flex items-center ;
justify-between"> import ViewConsultations from
<Checkbox '@/components/reusables/Modals/Consu
size="sm">Remember me</Checkbox> ltations/ViewConsultations';
<Link href="/auth/forgot- const COLUMNS: Column[] = [
password" size="sm"> { name: 'ID', uid: 'id', sortable: false },
Forgot password? { name: 'NAME', uid: 'name', sortable:
</Link> true },
</div> { name: 'SEX', uid: 'sex', sortable: false },
<Button { name: 'FIRST VISIT', uid: 'firstVisit',
type="submit" sortable: true },
color="primary" { name: 'RECENT VISIT', uid:
radius="sm" 'dateEncountered', sortable: true },
isLoading={loading} { name: 'DIAGNOSIS', uid: 'diagnosis',
disabled={loading} sortable: false },
fullWidth { name: 'ACTIONS', uid: 'actions',
> sortable: false },
Sign in ];
</Button> type ColumnType = (typeof
</form> COLUMNS)[number]['uid'];
</div>
</div> const INITIAL_VISIBLE_COLUMNS:
</div> ColumnType[] = [
</main> 'name',
); 'dateEncountered',
} 'diagnosis',
'actions',
 152

Dashboard 'Nov',
import { Link } from '@nextui-org/react'; 'Dec',
import { ];
LuActivity, export default function Dashboard() {
LuArrowDown, const { data: dashboardData } =
LuArrowUp, trpc.dashboard.stats.useQuery();
LuClipboard, const { data: dashboardGraph } =
LuFrown, trpc.dashboard.graphs.useQuery();
LuPill,
} from 'react-icons/lu'; return (
<MainLayout>
import cn from 'classnames'; <h2 className="text-medium font-
semibold mb-4">Last 30 days</h2>
import { <div className="grid grid-cols-1
Chart as ChartJS, sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
ArcElement, <div className="rounded-lg
Tooltip, overflow-hidden bg-white dark:border
Legend, shadow dark:bg-inherit dark:border-gray-
CategoryScale, 600">
LinearScale, <div className="px-5 py-4">
BarElement, <div className="grid grid-cols-
Title, [auto_1fr] gap-4">
} from 'chart.js'; <span className="rounded-lg bg-
slate-500 w-12 h-12 grid justify-center
import { Pie, Bar } from 'react-chartjs-2'; items-center text-white text-xl">
<LuActivity />
ChartJS.register( </span>
ArcElement, <div>
Tooltip, <h3 className="text-gray-400
Legend, font-medium text-sm">
CategoryScale, Total Patients
LinearScale, </h3>
BarElement, <div className="flex items-end
Title, gap-2">
); <p className="text-2xl font-
bold leading-tight">
import MainLayout from
'@/components/layouts/MainLayout'; {dashboardData?.patient_current ?? 0}
import { trpc } from '@/utils/trpc'; </p>
<div
const labels = [ className={cn({
'Jan', 'flex gap-1': true,
'Feb', 'text-green-400':
'Mar',
'Apr', (dashboardData?.patient_current ?? 0) >=
'May',
'Jun', (dashboardData?.patient_previous ?? 0),
'Jul', 'text-red-400':
'Aug',
'Sep', (dashboardData?.patient_current ?? 0) <
'Oct',
 153

(dashboardData?.patient_previous ?? 0), (dashboardData?.consultation_previous

})} ?? 0),
> 'text-red-400':
{(dashboardData?.patient_current ?? 0) (dashboardData?.consultation_current ??
>= 0) <
(dashboardData?.patient_previous
?? 0) ? ( (dashboardData?.consultation_previous
<LuArrowUp /> ?? 0),
):( })}
<LuArrowDown /> >
)} {(dashboardData?.consultation_current
<span className="text-sm"> ?? 0) >=
(dashboardData?.consultation_previous
{(dashboardData?.patient_current ?? 0) - ?? 0) ? (
<LuArrowUp />
(dashboardData?.patient_previous ?? 0)} ):(
</span> <LuArrowDown />
<div className="px-5 py-3 bg-gray- )}
50 dark:bg-gray-800"> <span className="text-sm">
<Link href="/patients" size="sm">
View all {(dashboardData?.consultation_current
bg-white dark:border shadow dark:bg- ?? 0) -
inherit dark:border-gray-600">
<div className="px-5 py-4"> (dashboardData?.consultation_previous
<div className="grid grid-cols- ?? 0)}
[auto_1fr] gap-4"> -800">
<span className="rounded-lg bg- <Link href="/consultations"
slate-500 w-12 h-12 grid justify-center size="sm">
items-center text-white text-xl"> View all
<LuClipboard /> rounded-lg overflow-hidden bg-white
</span> dark:border shadow dark:bg-inherit
<div> dark:border-gray-600">
<h3 className="text-gray-400 <div className="px-5 py-4">
font-medium text-sm"> <div className="grid grid-cols-
Total Consultations [auto_1fr] gap-4">
</h3> <span className="rounded-lg bg-
<div className="flex items-end slate-500 w-12 h-12 grid justify-center
gap-2"> items-center text-white text-xl">
<p className="text-2xl font- <LuPill />
bold leading-tight"> </span>
<div>
{dashboardData?.consultation_current ?? <h3 className="text-gray-400
0} font-medium text-sm">
</p> Total Immunizations
<div </h3>
className={cn({ <div className="flex items-end
'flex gap-1': true, gap-2">
'text-green-400': <p className="text-2xl font-
bold leading-tight">
(dashboardData?.consultation_current ?? {(dashboardData?.infant_current ?? 0) +
0) >= (dashboardData?.senior_citizen_current
 154

Geographic Information }, [location]);

import { useEffect, useState } from 'react'; return (

import { <Marker position={props.position}>
MapContainer, <Popup>{address}</Popup>
TileLayer, </Marker>
Marker, );
Popup, }
useMapEvent, const SAN_NICOLAS_COORDINATES:
} from 'react-leaflet'; LatLngLiteral = {
import EsriLeafletGeoSearch from 'react- lat: 14.0635659,
esri-leaflet/plugins/EsriLeafletGeoSearch'; lng: 121.2922153,
};
import { useConsultation } from export default function
'@/components/providers/ConsultationPr GeographicInformation() {
ovider'; const { data, setter } = useConsultation();
import useReverseGeocode from const [isMounted, setIsMounted] =
'@/hooks/useReverseGeocode'; useState(false);
import { LatLngLiteral } from 'leaflet'; const [position, setPosition] =
import useDebounce from useState<LatLngLiteral | null>({
'@/hooks/useDebounce'; lat:
isNaN(parseFloat(data.consultation?.lat
interface Result { ?? ''))
latlng: { ? SAN_NICOLAS_COORDINATES.lat
lat: number; : parseFloat(data.consultation?.lat ??
lng: number; ''),
}; lng:
} isNaN(parseFloat(data.consultation?.lng
?? ''))
function MyMarker(props: { ? SAN_NICOLAS_COORDINATES.lng
position: LatLngLiteral; : parseFloat(data.consultation?.lng ??
setPosition: (position: LatLngLiteral) => ''),
void; });
}) {
const map = useMapEvent('drag', () => { useEffect(() => {
props.setPosition(map.getCenter()); setIsMounted(true);
}); }, []);

const debouncedValue = useEffect(() => {

useDebounce<LatLngLiteral>(props.positi setter((prev) => ({
on, 1000); ...prev,
consultation: {
const [address, setAddress] = ...(prev.consultation ?? {}),
useState(''); lat: position?.lat.toString() ?? '',
lng: position?.lng.toString() ?? '',
const location = },
useReverseGeocode(debouncedValue); }));

useEffect(() => { // eslint-disable-next-line react-

setAddress(location?.display_name ?? hooks/exhaustive-deps
''); }, [position]);
 155

return ( import { useEffect, useState } from 'react';

isMounted && ( import { Checkbox, CheckboxGroup, Input
<div> } from '@nextui-org/react';
<p className="text-medium mb-4">
Drag the map to locate your import { HandlePropChange } from
location, or search from the address bar. '@/types';
</p> import { PatientImmunizationUpdate }
<div className="w-full h-96"> from '@/types/database';
<MapContainer
center={position ?? import { useConsultation } from
SAN_NICOLAS_COORDINATES} '@/components/providers/ConsultationPr
zoom={15} ovider';
scrollWheelZoom={false}
> const CHILDREN_IMMUNIZATIONS = [
<TileLayer const ADULT_IMMUNIZATIONS = [
{
url="https://{s}.google.com/vt/lyrs=m&x= () {
{x}&y={y}&z={z}" const { data, setter } = useConsultation();
subdomains={['mt0', 'mt1', 'mt2',
'mt3']} const [selectedChildImmunizations,
maxZoom={20} setSelectedChildImmunizations] =
minZoom={15} useState<
/> string[]
<MyMarker >([]);
setPosition={setPosition}
position={position ?? const [selectedAdultImmunizations,
SAN_NICOLAS_COORDINATES} setSelectedAdultImmunizations] =
/> useState<
<EsriLeafletGeoSearch string[]
useMapBounds={false} >([]);
position="topright"
placeholder="Search your address const [selectedSeniorImmunizations,
here..." setSelectedSeniorImmunizations] =
eventHandlers={{ useState<string[]>([]);
results: (r: NonNullable<Result>)
=> const handleImmunizationPropChange:
setPosition({ lat: r.latlng.lat, lng: HandlePropChange<
r.latlng.lng }), PatientImmunizationUpdate
}} > = (key, value) => {
providers={{ setter((prev) => ({
arcgisOnlineProvider: { ...prev,
countries: ['PH'], immunization: {
token: ...(prev.immunization ?? {}),
[key]: value,
'AAPK303aa8427e6f467589ac755c8554fd },
53- }));
RjCNp6acqQ67bsGLwuvIJEWKXC1m9lWna };
TUFb6opLTuzFv6H3CSDhvLEl0_GwHH', useEffect(() => {
label: 'Results', handleImmunizationPropChange(
Immunization 'opv',
 156

['opv1', 'opv2', 'opv3'].map((k) => value={selectedChildImmunizations}

>
selectedChildImmunizations.includes(k),
), {CHILDREN_IMMUNIZATIONS.map((immu
); nization) => (
handleImmunizationPropChange( <Checkbox
'dpt', key={`chilren-
['dpt1', 'dpt2', 'dpt3'].map((k) => ${immunization.key}`}
value={immunization.key}
selectedChildImmunizations.includes(k), >
), {immunization.label}
); </Checkbox>
}
handleImmunizationPropChange(
'hepa', Medical History
['hepa1', 'hepa2', 'hepa3'].map((k) =>
import { CheckboxGroup, Input } from
selectedChildImmunizations.includes(k), '@nextui-org/react';
), import moment from 'moment';
);
import {
['bcg', 'measles', 'varicella'].map((k) => ConsultationContextValue,
handleImmunizationPropChange( useConsultation,
k as keyof } from
PatientImmunizationUpdate, '@/components/providers/ConsultationPr
ovider';
selectedChildImmunizations.includes(k),
), import {
); MedicalHistoryType,
SelectablePatientIllnesses,
// eslint-disable-next-line react- } from '@/types/database';
hooks/exhaustive-deps
}, [selectedChildImmunizations]); import DatePicker from
'@/components/reusables/inputs/DatePi
useEffect(() => { cker';
ADULT_IMMUNIZATIONS.map(({ key }) import CheckboxWithInput from
=> { '../../inputs/CheckboxWithInput';
handleImmunizationPropChange( import { HandlePropChange } from
key as keyof '@/types';
PatientImmunizationUpdate, import { useEffect } from 'react';

selectedAdultImmunizations.includes(ke export interface MedicalHistoryProps {

return ( type: MedicalHistoryType;
<> }
<CheckboxGroup
className="mb-4" export type Illness = Record<
name="children_immunization[]" keyof SelectablePatientIllnesses,
orientation="horizontal" {
label="For Children" label: string;
onValueChange={(value) => placeholder?: string;
setSelectedChildImmunizations(value)} returnType?: string | boolean;
 157

} },
>; ulcer: {
label: 'Peptic Ulcer',
export const ILLNESS: Illness = { returnType: true,
allergy: { },
label: 'Allergy', pneumonia: {
placeholder: 'Please specify', label: 'Pneumonia',
returnType: '', returnType: true,
}, },
asthma: { thyroid: {
label: 'Asthma', label: 'Thyroid Disease',
returnType: true, returnType: true,
}, },
cancer: { ptb: {
label: 'Cancer', label: 'PTB',
placeholder: 'Please specify', placeholder: 'Please specify',
returnType: '', returnType: '',
}, },
cerebrovascular: { etb: {
label: 'Cerebrovascular Disease', label: 'Extrapulmonary Tuberculosis',
returnType: true, placeholder: 'Please specify',
}, returnType: '',
coronary_artery: { },
label: 'Coronary Artery Disease', uti: {
returnType: true, label: 'Urinary Tract Infection',
}, returnType: true,
diabetes: { },
label: 'Diabetes Mellitus', mental_illness: {
returnType: true, label: 'Mental Illness',
}, returnType: true,
emphysema: { },
label: 'Emphysema', others: {
returnType: true, label: 'Others',
}, placeholder: 'Please specify',
epilepsy: { returnType: '',
label: 'Epilepsy / Seizure Disorder', },
returnType: true, };
},
hepatitis: { export default function
label: 'Hepatitis', MedicalHistory(props:
placeholder: 'Please specify', MedicalHistoryProps) {
returnType: '', const { data, setter } = useConsultation();
}, selection: {
hyperlipedemia: { ...(prev.selection ?? {}),
label: 'Hyperlipedemia', [props.type]: {
returnType: true, ...(prev.selection?.[props.type] ??
}, {}),
hypertension: { illnesses: {
label: 'Hypertension', ...values.reduce((a, b) => {
placeholder: 'Highest BP', return {
returnType: '', ...a,
 158

const listPatientsQuery =
Personal Information trpc.patients.read.useQuery({
import { limit: 100,
Button, q: debouncedQueryValue,
Input, });
Select,
SelectItem, const { data: patient } =
useDisclosure, trpc.patients.findById.useQuery({
} from '@nextui-org/react'; id: patientId,
import moment from 'moment'; withImmunization: true,
import { Key, useEffect, useState } from withMedicalHistory: true,
'react'; withMenstrualHistory: true,
withPregnancyHistory: true,
import { trpc } from '@/utils/trpc'; withSocialHistory: true,
});
import useDebounce from
'@/hooks/useDebounce'; const onPatientSelectionChange = (keys:
Key[]) => {
import { useConsultation } from const selectedKey = keys[0];
'@/components/providers/ConsultationPr
ovider'; if (selectedKey) {
setPatientId(selectedKey.toString());
import { HandlePropChange } from } else {
'@/types'; setPatientId('');
import { Consultation, PatientAdditional } }
from '@/types/database'; return (
import { MemberType } from <>
'@/schemas/patient.schema'; <TypeAhead
className="mb-2"
import DatePicker from inputProps={{
'../../inputs/DatePicker'; label: 'Patient Name',
import TypeAhead from labelPlacement: 'outside',
'../../inputs/TypeAhead'; placeholder: 'Search for patient...',
import AddEditPatient from onChange: (e) =>
'../../Modals/Patients/AddEditPatient'; setQuery(e.target.value),
import { PatientAdditionalInsertable } value: query,
from '@/types/entities'; setValue: setQuery,
isClearable: true,
export default function isRequired: true,
PersonalInformation() { onClear: () => setter({}),
const { setter, data } = useConsultation(); }}
const [query, setQuery] = data={(listPatientsQuery.data?.data
useState<string>(''); ?? []).map((v) => ({
const [patientId, setPatientId] = key: v.id,
useState<string>(''); label: [v.first_name,
v.last_name].join(' '),
const debouncedQueryValue = ...v,
useDebounce<string>(query); }))}
const { isOpen, onOpen, onOpenChange
} = useDisclosure(); onSelectionChange={onPatientSelectionC
hange}
 159

: ''
isLoading={listPatientsQuery.isLoading} }${patient?.sex ? ` / ${patient?.sex}`
noDataAvailable={ : ''}`}
<div className="flex flex-col justify- isDisabled
center items-center gap-4 py-5"> />
<p className="text-gray-500 text- <DatePicker
center"> inputProps={{
No patient record available. type: 'text',
</p> label: 'Birth day',
<Button variant="light" labelPlacement: 'outside',
color="primary" onPress={() => radius: 'sm',
onOpen()}> placeholder: '-',
Create New Record isDisabled: true,
</Button> }}
</div> // eslint-disable-next-line
} @typescript-eslint/no-empty-function
> onChange={() => {}}
{(item) => ( value={
<p className="flex justify-between patient?.birth_date ?
items-center"> moment(patient.birth_date).toDate() :
{item.label} null selectedKeys={
<span className="text-xs text- data.additional?.member_type
default-500/80"> ? [(data.additional?.member_type
?? '').toLowerCase() as Key]
{moment(item.birth_date).format('MMM. : []
DD, YYYY')} }
</span> onChange={(e) =>
</p>
)} handlePatientAdditionalPropChange(
</TypeAhead> 'member_type',
<div className="grid grid-cols-2 gap- e.target.value.toUpperCase() as
4"> keyof MemberType,
<Input )
type="text" }
label="Age/Sex" >
labelPlacement="outside" {['Member', 'Dependent'].map((m)
radius="sm" => (
placeholder=" " <SelectItem key={m.toLowerCase()}
value={`${ textValue={m}>
patient?.birth_date {m}
? </SelectItem>
moment().diff(moment(patient?.birth_dat ))}
e), 'years') <= 2 </Select>
? `${moment().diff( <Input
moment(patient?.birth_date), type="text"
'months', label="ATC"
)} mos old` labelPlacement="outside"
: `${moment().diff( placeholder=" "
moment(patient?.birth_date), radius="sm"
'years', isRequired
)} yrs old` onValueChange={(value) =>
 160

handleConsultationPropChange('atc', 'Wheezes',
value)} 'Lumps Over Breast',
value={data.consultation?.atc ?? ''} 'Crackles or Rales',
/> 'Retractions',
</div> 'Others',
<AddEditPatient ],
isOpen={isOpen} },
onOpenChange={onOpenChange} HEART: {
firstName={query.split(' ').slice(0, - label: 'Heart',
1).join(' ')} findings: [
lastName={query.split(' ').pop() ?? ''} 'Essentially Normal',
/> 'Displaced Apex Beat',
</> 'Heaves or Trills',
); 'Irregular Rhythm',
} 'Muffled Heart Sounds',
'Murmurs',
Pertinent Findings Per System 'Pericardial Bulge',
'Others',
import { useEffect, useState } from 'react'; ],
import { Input, Radio, RadioGroup, },
Textarea } from '@nextui-org/react'; ABDOMEN: {
label: 'Abdomen',
import { useConsultation } from findings: [
'@/components/providers/ConsultationPr 'Essentially Normal',
ovider'; 'Abdominal Rigidity',
import { HandlePropChange } from 'Hyperactive Bowel Sounds',
'@/types'; 'Palpable Masses',
import { ConsultationPFPSUpdate } from 'Tympanitic or Dull Abdomen',
'@/types/database'; 'Uterine Contraction',
'Others',
const FINDINGS_PER_SYSTEM = { ],
HEENT: { },
label: 'HEENT', GENITOURINARY: {
findings: [ label: 'Genitourinary',
'Essentially Normal', findings: [
'Abnormal Papillary Reaction', 'Essentially Normal',
'Cervical Lymphadenopathy', 'Blood Stained in Internal
'Dry Mucus Membrane', Examination',
'Icteric Sclerae', 'Cervical Dilation',
'Pale Conjunctiva', 'Presence of Abnormal Discharge',
'Sunken Eyeball', 'Others',
'Sunken Fontanelle', ],
'Others', },
], DIGITAL_RECTAL: {
}, label: 'Digital Rectal Examination',
CHEST: { findings: [
label: 'Chest / Breast / Lungs', 'Essentially Normal',
findings: [ 'Enlarge Prostate',
'Essentially Normal', 'Mass',
'Asymmetrical Chest Expansion', 'Hemorrhoids',
'Decreased Breath Sounds', 'Pus',
 161

'Others', : []),
], ...(data.patient?.birth_date
}, ?
SKIN_EXTREMITIES: { moment().diff(moment(data.patient.birth
label: 'Skin / Extremities', _date), 'months') <= 24
findings: [ ?[
'Essentially Normal', {
'Edema or Sweating', title: (
'Clubbing', <p className="whitespace-
'Decreased Mobility', nowrap">Pedia Physical Examination</p>
'Cold Clammy', ),
'Pale Nailbeds', content: <PediaClient />,
'Cyanosis or Mottled Skin', },
'Weak Pulses', ]
'Others', :[
], {
}, title: <p className="whitespace-
NEUROLOGICAL: { nowrap">Physical Examination</p>,
label: 'Neurological Examination', content: <PhysicalExamination />,
findings: [ },
'Essentially Normal', ]
'Abnormal Gait', : []),
'Abnormal Position Sense', {
'Abnormal Sensation', title: <p className="whitespace-
'Abnormal Reflexes', nowrap">Pertinent Findings Per
'Poor Memory', System</p>,
'Poor Muscle Strength', content: <PertinentFindingsPerSystem
'Poor Coordination', />,
'Others', },
], {
}, title: <p className="whitespace-
}; nowrap">Doctor&apos;s Assessment</p>,
content: <DoctorAssessment />,
export default function },
PertinentFindingsPerSystem() { ];
const { data, setter } = useConsultation();
const resetForm = () => setter({});
const [findingsPerSystem,
setFindingsPerSystem] = useState<{ const handleSubmit = async (
[key in keyof typeof e: FormEvent<HTMLFormElement>,
FINDINGS_PER_SYSTEM]?: { onClose: () => void,
selected: string; ) => {
value: string; try {
};nowrap"> setLoading(true);
Family Planning, Menstrual, and
Pregnancy History const {
</p> patient,
), additional,
content: <MenstrualHistory />, immunization,
}, // medical_history,
] menstrual_history,
 162

pregnancy_history, last_period:
selection, typeof
social_history, menstrual_history?.last_period ===
consultation, 'string'
} = data; ?
moment(menstrual_history.last_period).t
if (patient === undefined) { oDate()
throw new Error('Please select a :
patient to proceed.'); menstrual_history?.last_period,
} }
: undefined,
if (consultation === undefined) { pregnancy_history:
throw new Error('Please fill out the
consultation form to proceed.'); computeAgeInMonths(patient?.birth_dat
} e) <= 24 ||
patient?.sex === 'Male'
const { pedia_client } = consultation; ? undefined
: pregnancy_history,
const result = medical_history: {
parseConsultationWithPatient.safeParse({ family: selection?.family
patient, ?{
additional, ...selection?.family,
immunization, past_surgical:
social_history: selection.family.past_surgical,
past_surgical_date:
computeAgeInMonths(patient?.birth_dat selection.family.past_surgical_date,
e) <= 24 }
? undefined : undefined,
:{ personal: selection?.personal
...social_history, ?{
sexually_active: ...selection?.personal,
typeof past_surgical:
social_history?.sexually_active === selection.personal.past_surgical,
'number' past_surgical_date:
? social_history.sexually_active selection.personal.past_surgical_date,
=== 1 }
: : undefined,
social_history?.sexually_active, },
}, consultation: {
menstrual_history: ...consultation,
pedia_client:
computeAgeInMonths(patient?.birth_dat
e) <= 24 || computeAgeInMonths(patient?.birth_dat
patient?.sex === 'Male' e) > 24
? undefined ? undefined
: menstrual_history : pedia_client,
?{ },
...menstrual_history, });
has_family_planning:
!!menstrual_history?.has_family_planning if (!result.success) {
, console.log(result.error.errors);
 163

throw new
Error(result.error.errors[0].message); if (params.step <
} STEPS.length - 1) {
return params.next();
type Input = }
inferProcedureInput<AppRouter['consulta
tions']['create']>; handleSubmit(e,
const input: Input = { onClose).catch((err) => console.log(err));
...result.data, }}
}; >

await <ModalBody>{params.content}</ModalB
tCreateConsultation.mutateAsync(input); ody>
resetForm(); <ModalFooter>
onClose(); <Button
color="default"
addToast({ type="button"
message: 'Successfully created a new variant="light"
consultation.', onPress={params.step > 0 ?
type: 'success', params.previous : onClose}
}); >
} catch (err) { {params.step > 0 ? 'Previous
if (err instanceof Error) { Step' : 'Cancel'}
addToast({ </Button>
message: err.message, <Button
autoClose: 5000, color="primary"
type: 'danger', type="submit"
}); isLoading={loading}
} isDisabled={loading}
} finally { >
setLoading(false); {params.step < STEPS.length
} -1
}; ? 'Next Step'
: 'Submit Record'}
return ( </Button>
<> </ModalFooter>
<Modal {...defaultProps} {...props}> </form>
<ModalContent> )}
{(onClose) => ( </Stepper>
<> </>
<ModalHeader className="flex )}
flex-col gap-1"> </ModalContent>
New Consultation Record </Modal>
</ModalHeader> </>
<Stepper steps={STEPS}> );
{(params) => ( }
<form
action="" Edit Consultation
method="POST"
onSubmit={(e) => { import { trpc } from '@/utils/trpc';
e.preventDefault(); import {
 164

Button, scrollBehavior: 'outside',

Input, placement: 'top',
Link, classNames: {
Modal, body: 'relative unset-overflow',
ModalBody, },
ModalContent, };
ModalFooter,
ModalHeader, const Map = dynamic(
ModalProps, () =>
} from '@nextui-org/react';
import moment from 'moment'; import('@/components/reusables/Forms/
import { FormEvent, useState } from Consultations/GeographicInformation'),
'react'; { ssr: false },
import PediaClient from );
'../../Forms/Consultations/PediaClient';
import PhysicalExamination from export default function
'../../Forms/Consultations/PhysicalExamin EditConsultation(props:
ation'; EditConsultationModalProps) {
import PertinentFindingsPerSystem from const { consultationId, ...restProps } =
'../../Forms/Consultations/PertinentFindin props;
gsPerSystem';
import DoctorAssessment from const { data, setter } = useConsultation();
'../../Forms/Consultations/DoctorAssessm const { addToast } = useToast();
ent';
import Stepper from '../../Stepper'; const utils = trpc.useContext();
import { useToast } from const tUpdateConsultation =
'@/components/providers/ToastProvider' trpc.consultations.update.useMutation({
; async onSuccess() {
import { useConsultation } from await
'@/components/providers/ConsultationPr utils.consultations.findById.invalidate();
ovider'; await
import { parseUpdateConsultation } from utils.consultations.read.invalidate();
'@/schemas/dto/consultations/parseCons },
ultation'; });
import { computeAgeInMonths } from
'@/utils/helpers/db'; const [loading, setLoading] =
import { inferProcedureInput } from useState(false);
'@trpc/server';
import { AppRouter } from const STEPS = [
'@/server/routers/_app'; {
import dynamic from 'next/dynamic'; title: <p className="whitespace-
nowrap">Consultation</p>,
type EditConsultationModalProps = content: (
Omit<ModalProps, 'children'> & { <Input
consultationId?: string; type="text"
}; label="ATC"
labelPlacement="outside"
const defaultProps: placeholder=" "
EditConsultationModalProps = { radius="sm"
size: 'xl', isRequired
radius: 'sm', onValueChange={(value) =>
 165

setter((prev) => ({ e: FormEvent<HTMLFormElement>,

...prev, onClose: () => void,
consultation: { ) => {
...(prev.consultation ?? {}), atc: value }, try {
})) setLoading(true);
}
value={data.consultation?.atc ?? ''} const { patient, consultation } = data;
/>
), if (patient === undefined) {
}, throw new Error('Please select a
{ patient to proceed.');
title: <p className="whitespace- }
nowrap">Geographic Information</p>,
content: <Map />, if (consultation === undefined) {
}, throw new Error('Please fill out the
...(data?.patient?.birth_date consultation form to proceed.');
? }
moment().diff(moment(data?.patient?.bir
th_date), 'months') <= 24 const { pedia_client } = consultation;
?[
{ const result =
title: ( parseUpdateConsultation.safeParse({
<p className="whitespace- patient,
nowrap">Pedia Physical Examination</p> consultation: {
), ...consultation,
content: <PediaClient />, pedia_client:
},
] computeAgeInMonths(patient?.birth_dat
:[ e) > 24
{ ? undefined
title: <p className="whitespace- : pedia_client,
nowrap">Physical Examination</p>, },
content: <PhysicalExamination />, });
},
] if (!result.success) {
: []), console.log(result.error.errors);
{ throw new
title: <p className="whitespace- Error(result.error.errors[0].message);
nowrap">Pertinent Findings Per }
System</p>,
content: <PertinentFindingsPerSystem type Input =
/>, inferProcedureInput<AppRouter['consulta
}, tions']['update']>;
{ const input: Input = {
title: <p className="whitespace- ...result.data,
nowrap">Doctor&apos;s Assessment</p>, };
content: <DoctorAssessment />,
}, await
]; tUpdateConsultation.mutateAsync(input);
onClose();
const handleSubmit = async (
 166

addToast({ variant="light"
message: 'Successfully updated a onPress={params.step > 0 ?
consultation.', params.previous : onClose}
type: 'success', >
}); {params.step > 0 ? 'Previous
} catch (err) { Step' : 'Cancel'}
if (err instanceof Error) { </Button>
addToast({ <Button
message: err.message, color="primary"
autoClose: 5000, type="submit"
type: 'danger', isLoading={loading}
}); isDisabled={loading}
} >
} finally { {params.step < STEPS.length -
setLoading(false); 1
} ? 'Next Step'
}; : 'Save Changes'}
</Button>
return ( </ModalFooter>
<Modal {...defaultProps} {...restProps}> </form>
<ModalContent> )}
{(onClose) => ( </Stepper>
<> </>
<ModalHeader className="flex )}
flex-col gap-1"> </ModalContent>
Update Consultation Record </Modal>
</ModalHeader> );
<Stepper steps={STEPS}> }
{(params) => (
<form View Consultation
action=""
method="POST" import { trpc } from '@/utils/trpc';
onSubmit={(e) => { import {
e.preventDefault(); Button,
Link,
if (params.step < STEPS.length Modal,
- 1) { ModalBody,
return params.next(); ModalContent,
} ModalHeader,
ModalProps,
handleSubmit(e, useDisclosure,
onClose).catch((err) => console.log(err)); } from '@nextui-org/react';
import moment from 'moment';
}}
import { FormEvent, useEffect, useState } from
> 'react';
import EditConsultation from
<ModalBody>{params.content}</ModalB './EditConsultation';
ody> import { useConsultation } from
<ModalFooter> '@/components/providers/ConsultationProvid
<Button er';
color="default"
type="button" type ViewConsultationModalProps =
Omit<ModalProps, 'children'> & {
 167

patientId?: string; pfps,

}; physical_examination,
},
const defaultProps: patient: patient
ViewConsultationModalProps = { ?{
size: 'xl', ...patient,
radius: 'sm', birth_date:
scrollBehavior: 'outside', moment(patient.birth_date).toDate(),
placement: 'top', date_registered:
classNames: { moment(patient.date_registered).toDate(),
body: 'relative unset-overflow', }
}, : undefined,
}; }));
}
export default function }, [tFindCosultationById.data]);
ViewConsultations(props:
ViewConsultationModalProps) { return (
const { patientId, ...restProps } = props; <>
const { setter } = useConsultation(); <Modal {...defaultProps} {...restProps}
onClose={() => setter({})}>
const utils = trpc.useContext(); <ModalContent>
{(onClose) => (
const tConsultationFindById = <>
trpc.consultations.findById.useQuery({ <ModalHeader className="flex flex-
id: patientId, col gap-1">
}); Consultations of
{tConsultationFindById.data?.full_name}
const { isOpen, onOpen, onOpenChange } = </ModalHeader>
useDisclosure(); <ModalBody className="pb-8">
const [selectedId, setSelectedId] = <ol className="relative border-l
useState(''); border-gray-200 dark:border-gray-700">

const tFindCosultationById = {tConsultationFindById.data?.consultations.m

trpc.consultations.findConsultationById.useQ ap((c) => (
uery( <li className="mb-10 ml-4"
{ key={c.id}>
id: selectedId, <div className="absolute w-3 h-
}, 3 bg-gray-200 rounded-full mt-1.5 -left-1.5
); border border-white dark:border-gray-900
dark:bg-gray-700" />
useEffect(() => { <time className="mb-1 text-sm
if (tFindCosultationById.data) { font-normal leading-none text-gray-400
const { dark:text-gray-500">
patient,
pedia_client, {moment(c.created_at).format('MMM. DD,
pfps, YYYY')}
physical_examination, </time>
assessment, <h3 className="text-lg font-
...consultation semibold text-gray-900 dark:text-white">
} = tFindCosultationById.data; {c.assessment?.diagnosis
.replaceAll('-', ' ')
setter((prev) => ({ .split(' ')
...prev, .map((v) => v[0].toUpperCase()
consultation: { + v.substring(1))
...consultation, .join(' ')}
assessment, </h3>
pedia_client, <p className="mb-4 text-base
 168

font-normal text-gray-500 dark:text-gray- import { useConsultation } from

400"> '@/components/providers/ConsultationProvid
{c.atc} er';
</p>
<Button type ViewConsultationModalProps =
type="button" Omit<ModalProps, 'children'> & {
variant="solid" patientId?: string;
onPress={() => { };
setSelectedId(c.id);
onOpen(); const defaultProps:
}} ViewConsultationModalProps = {
> size: 'xl',
Edit Record radius: 'sm',
</Button> scrollBehavior: 'outside',
{/* <Button placement: 'top',
as={Link} classNames: {
showAnchorIcon body: 'relative unset-overflow',
},
href={`/consultations/${c.id}/print`} };
target="_blank"
variant="faded" export default function
className="ml-2" ViewConsultations(props:
> ViewConsultationModalProps) {
Print const { patientId, ...restProps } = props;
</Button> */} const { setter } = useConsultation();
</li>
))} const utils = trpc.useContext();
</ol>
</ModalBody> const tConsultationFindById =
</> trpc.consultations.findById.useQuery({
)} id: patientId,
</ModalContent> });
</Modal>
<EditConsultation isOpen={isOpen} const { isOpen, onOpen, onOpenChange } =
onOpenChange={onOpenChange} /> useDisclosure();
</> const [selectedId, setSelectedId] =
); useState('');
}
const tFindCosultationById =
Add Edit Death trpc.consultations.findConsultationById.useQ
uery(
import { trpc } from '@/utils/trpc'; {
import { id: selectedId,
Button, },
Link, );
Modal,
ModalBody, useEffect(() => {
ModalContent, if (tFindCosultationById.data) {
ModalHeader, const {
ModalProps, patient,
useDisclosure, pedia_client,
} from '@nextui-org/react'; pfps,
import moment from 'moment'; physical_examination,
import { FormEvent, useEffect, useState } from assessment,
'react'; ...consultation
import EditConsultation from } = tFindCosultationById.data;
'./EditConsultation';
 169

setter((prev) => ({ .split(' ')

...prev, .map((v) => v[0].toUpperCase()
consultation: { + v.substring(1))
...consultation, .join(' ')}
assessment, </h3>
pedia_client, <p className="mb-4 text-base
pfps, font-normal text-gray-500 dark:text-gray-
physical_examination, 400">
}, {c.atc}
patient: patient </p>
?{ <Button
...patient, type="button"
birth_date: variant="solid"
moment(patient.birth_date).toDate(), onPress={() => {
date_registered: setSelectedId(c.id);
moment(patient.date_registered).toDate(), onOpen();
} }}
: undefined, >
})); Edit Record
} </Button>
}, [tFindCosultationById.data]); {/* <Button
as={Link}
return ( showAnchorIcon
<>
<Modal {...defaultProps} {...restProps} href={`/consultations/${c.id}/print`}
onClose={() => setter({})}> target="_blank"
<ModalContent> variant="faded"
{(onClose) => ( className="ml-2"
<> >
<ModalHeader className="flex flex- Print
col gap-1"> </Button> */}
Consultations of </li>
{tConsultationFindById.data?.full_name} ))}
</ModalHeader> </ol>
<ModalBody className="pb-8"> </ModalBody>
<ol className="relative border-l </>
border-gray-200 dark:border-gray-700"> )}
</ModalContent>
{tConsultationFindById.data?.consultations.m </Modal>
ap((c) => ( <EditConsultation isOpen={isOpen}
<li className="mb-10 ml-4" onOpenChange={onOpenChange} />
key={c.id}> </>
<div className="absolute w-3 h- );
3 bg-gray-200 rounded-full mt-1.5 -left-1.5 }
border border-white dark:border-gray-900
dark:bg-gray-700" /> Add edit Patient
<time className="mb-1 text-sm
font-normal leading-none text-gray-400 import {
dark:text-gray-500"> Button,
Input,
{moment(c.created_at).format('MMM. DD, Modal,
YYYY')} ModalBody,
</time> ModalContent,
<h3 className="text-lg font- ModalFooter,
semibold text-gray-900 dark:text-white"> ModalHeader,
{c.assessment?.diagnosis Select,
.replaceAll('-', ' ') SelectItem,
 170

Spinner, placement: 'top',

} from '@nextui-org/react'; classNames: {
import { FormEvent, Key, useEffect, useState } body: 'relative',
from 'react'; },
import type { ModalProps } from '@nextui- };
org/react';
import { z, type ZodFormattedError } from export default function AddEditPatient({
'zod'; firstName,
import { inferProcedureInput, lastName,
inferProcedureOutput } from '@trpc/server'; patientId,
import moment from 'moment'; ...props
}: AddEditPatientModalProps) {
import { AppRouter } from const { addToast } = useToast();
'@/server/routers/_app'; const utils = trpc.useContext();
const tCreatePatient =
import { type MemberType, PatientSchema } trpc.patients.create.useMutation({
from '@/schemas/patient.schema'; async onSuccess() {
import type { HandlePropChange } from await utils.patients.read.invalidate();
'@/types'; },
import { });
PatientAdditionalUpdate,
PatientUpdate, const tUpdatePatient =
PatientWithAdditional, trpc.patients.update.useMutation({
} from '@/types/database'; async onSuccess() {
await utils.patients.read.invalidate();
import { trpc } from '@/utils/trpc'; await utils.patients.findById.invalidate();
import { isZodFormattedError, parseData } },
from '@/utils/helpers/generics'; });

import { useToast } from const tPatientFindById =

'@/components/providers/ToastProvider'; trpc.patients.findById.useQuery({
id: patientId,
import DatePicker from });
'@/components/reusables/inputs/DatePicker'
; const patient = tPatientFindById.data;
import { const isPatientLoading: boolean =
PatientAdditionalInsertable, tPatientFindById.isLoading;
PatientInsertable,
} from '@/types/entities'; const [loading, setLoading] = useState(false);
import {
parseAdditional, const initPatientData:
parsePatient, Omit<PatientInsertable, 'id'> = {
} from first_name: '',
'@/schemas/dto/patients/parsePatient'; last_name: '',
sex: 'Male',
type AddEditPatientModalProps = birth_date: new Date(),
Omit<ModalProps, 'children'> & { date_registered: new Date(),
patientId?: string; };
firstName?: string;
lastName?: string; const initPatientAdditionalData: Omit<
}; PatientAdditionalInsertable,
'patient_id'
const defaultProps: > = {};
AddEditPatientModalProps = {
size: 'xl', const [patientData, setPatientData] =
radius: 'sm', useState<Omit<PatientInsertable,
scrollBehavior: 'outside', 'id'>>(initPatientData);
 171

Appendix H
Curriculum Vitae
172
173
174
175
176