i

Republic of the Philippines

Laguna State Polytechnic University
Province of Laguna

COLLEGE OF COMPUTER STUDIES

THE DEVELOPMENT OF HEALTHWATCH:

A HEALTH RECORD 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
Specialized in Service Management Program

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 Record 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 JOANNA E. DE TORRES, MIT

Member Member

RONNEL A. DELA CRUZ, MSIT MARCO JR. N. DEL ROSARIO, MIT

Member Research Coordinator

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
HealthWatch is a health record management system for San Nicolas health unit
that 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 that consists of a Fishbone
Diagram, Work Breakdown Structure, Flowchart, Wireframe, and Use Case
Diagram; Project Development, the phases of the development of the project that
consists of Requirements & Analysis, System Design, Implementation, Testing,
and Deployment; Project Testing and Evaluation 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, reliability, performance efficiency, usability, security, compatibility,
maintainability, and portability. The developers were able to conclude that the
objectives that were set were achieved. The findings suggest that the health record
management system is well-designed and effective. The system is easy to use,
functional, efficient, reliable, secure, and compatible. Functions are working
properly, and based on the findings of the evaluation processes, respondents show
satisfaction with a total mean of 4.53 with an interpretation of “Excellent” from IT
Experts and a total mean of 4.45 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 ……………………………………………………………..………..ix

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 …………………………………………………………………...27

CHAPTER III – METHODOLOGY

Project Design …………………………………………………………………….38
Project Development …………………………………………………….……….72
Project Testing and Evaluation Procedures ……………………………………74

CHAPTER IV – RESULTS AND DISCUSSION

Project Requirements and Specification ………………………………………..80
 vii

Project Description ………………………………………………………………..82

Project Features …………………………………………………………………..83
Project Hierarchy ………………………………………………………………….83
Project Testing and Evaluation Results ……………………………………….102

CHAPTER V – SUMMARY OF FINDINGS, CONCLUSIONS, AND

RECOMMENDATIONS
Summary of Findings ……………………………………………………………121
Conclusions ………………………………………………………………………122
Recommendations ………………………………………………………………123
BIBLIOGRAPHY ………………………………………………………………...124

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 9

2 Fishbone Diagram of HealthWatch 38
3 Work Breakdown Structure of HealthWatch 39
4 Flowchart of Health Unit (Current Process) 41
5 Flowchart of HealthWatch 43
6 Flowchart of Main Interface 45
7 Flowchart of Dashboard Page 47
8 Flowchart of Residents Page 47
9 Flowchart of Consultation Page 48
10 Flowchart of Immunization for Senior Citizen 48
Page
11 Flowchart of Immunization for Infant Page 49
12 Flowchart of Records of Mortality and 49
Natality Page
13 Flowchart of User Management Page 50
14 Flowchart of Reports Page 50
15 Wireframe of Log-In Form of Health Watch 51
16 Wireframe of Dashboard Menu of Health 52
Watch
17 Wireframe of Residents Page of HealthWatch 53
18 Wireframe of Add New Residents Record of 53
HealthWatch
19 Wireframe of Consultation Menu of 54
HealthWatch
20 Wireframe of New Consultation Record 55
“Personal Information” of HealthWatch
21 Wireframe of New Consultation Record 55
“Geographic Information” of HealthWatch
 ix

22 Wireframe of New Consultation Record 56

“Medical History” of HealthWatch
23 Wireframe of New Consultation Record 56
“Cont. Medical History” of HealthWatch
24 Wireframe of New Consultation Record 57
“Social History” of HealthWatch
25 Wireframe of New Consultation Record 57
“Immunization” of HealthWatch
26 Wireframe of New Consultation Record 58
“Family Planning, Menstrual, and Pregnancy
History” of HealthWatch
27 Wireframe of New Consultation Record 59
“Physical Examination” of HealthWatch
28 Wireframe of New Consultation Record 59
“Pertinent Per System” of HealthWatch
29 Wireframe of New Consultation Record 60
“Doctor’s Assessment” of HealthWatch
30 Wireframe of Immunization Sheet for Senior 61
Citizens of HealthWatch
31 Wireframe of Immunization Sheet for Infants 62
of HealthWatch
32 Wireframe of Death Rate Page of 62
HealthWatch
33 Wireframe of User Management Page of 63
HealthWatch
34 Wireframe of User Management “New User 64
Record” of HealthWatch
35 Wireframe of Reports Page of HealthWatch 64
36 Wireframe of Settings Page of HealthWatch 65
37 Use Case Diagram for Nurse Administrator 66
38 Use Case Diagram for Barangay Health 67
Workers User
 x

39 Use Case Diagram for Barangay Nutrition 68

Scholars User
40 Modified Waterfall Model 69
41 Login Page of HealthWatch 80
42 Dashboard of HealthWatch 81
44 Resident Page of HealthWatch 82
45 Residents “Add New” Form of HealthWatch 82
46 Consultations Page of HealthWatch 83
47 New Consultation Record “Personal 84
Information” of HealthWatch
48 New Consultation Record “Geographic 84
Information” of HealthWatch
49 New Consultation Record “Medical History” 85
of HealthWatch
50 New Consultation Record “Cont. Medical 86
History” of HealthWatch
51 New Consultation Record “Social History” of 86
HealthWatch
52 New Consultation Record “Immunization” of 87
HealthWatch
53 New Consultation Record “Pedia Physical 87
Examination” of HealthWatch
54 New Consultation Record “Family Planning, 88
Menstrual, and Pregnancy History” of
HealthWatch
55 New Consultation Record “Physical 89
Examination” of HealthWatch
56 New Consultation Record “Pertinent Per 90
System” of HealthWatch
58 New Consultation Record “Doctor’s 91
Assessment” of HealthWatch
59 Immunization Sheet for Senior Citizens of 91
HealthWatch
 xi

60 Immunization Sheet for Infants/Babies of 92

HealthWatch
64 Natality/Mortality of HealthWatch 94
65 New Record of Natality/Mortality of 94
HealthWatch
66 User Management Page of HealthWatch 95
67 User Management “New User Record” of 95
HealthWatch
68 Reports Page of HealthWatch 96
69 Generated “History” Reports of HealthWatch 96
70 Generated “Summary” Reports of 97
HealthWatch
71 Settings Page of HealthWatch 98

LIST OF TABLES
Table No. Title Page No. Page No.
1 Functionality Testing 72
2 Browser Compatibility Testing 73
3 Range of Scale Value for interpreting the 76
Evaluation Result
4 Function Testing in Login Page 100
5 Function Testing in Forgot Password Page 101
6 Function Testing in Dashboard Page 102
7 Function Testing in Residents Page 103
8 Function Testing in Consultations Page 104
9 Function Testing in Immunizations of 105
Senior Citizen Page
10 Function Testing in Immunizations of 106
Infants Page
11 Function Testing in Natality and Mortality 107
Page
12 Function Testing in User Management 109
Page
 xii

13 Function Testing in Reports Page 110

14 Function Testing in Settings Page 111
15 Function Testing in Browser Compatibility 112
Testing
16 Project Evaluation Results of Non-IT 113
Respondents
17 Project Evaluation Results of IT 116
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. The healthcare industry,

once analog, is undergoing a profound digital transformation. Technology is no

longer a peripheral tool; it's become an indispensable partner, weaving its threads

through every aspect of patient care. From diagnosis and treatment to research

and administration, the connection between technology and healthcare is

undeniable and ever-evolving. The healthcare industry is a prime example of how

technology can drive positive change (Jha, A.K., 2019). One of the most significant

advancements in recent years is the development of health record management

systems (HRMS).

A health record management system (HRMS) is the digital backbone of

modern healthcare, acting as the nerve center of patient information, safeguarding

and organizing essential medical data like diagnoses, treatments, and

immunizations (Bigscal, 2023). HRMS empowers clinicians with instant access to

accurate, comprehensive information, enabling them to deliver higher-quality care.

This streamlined approach not only enhances patient safety by reducing errors but

also fosters informed decision-making, ultimately contributing to improved health

outcomes. Prior to 2019, paper-based medical records plagued the industry with

inefficiency, accessibility challenges, and a higher risk of error. The shift towards

digital HRMS, accelerated by initiatives like Meaningful Use, has demonstrably

 2

improved care quality and patient outcomes (HIMSS, 2023). A few examples of

health record management systems are electronic health records and clinical

document management systems.

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, clinical document management systems, or CDMS, enhance medical

records. CDMS is a software solution specifically designed to handle the unique

needs of the healthcare domain. It goes beyond a simple file repository, acting as

a centralized platform for capturing, indexing, storing, retrieving, and securing all

types of clinical documents (Moffat et al., 2021). This includes medical records,

laboratory reports, imaging data, administrative forms, and even research

protocols. By replacing physical files with digital equivalents, CDMS unlocks a

plethora of benefits that improve patient care, enhance operational efficiency, and

strengthen regulatory compliance.

Project Context

Inside the busy healthcare industry, where information is essential to

receive effective treatment, for managing patient data, a strong system is needed.

This system serves as a central hub for organizing, storing, and retrieving

essential medical data. It is named the Health Record Management System

 3

(HRMS). 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 especially the

healthcare industry are considering health record management systems to

improve workflow efficiency.

San Nicolas is one of the 80 barangays in the city of San Pablo, in the

province of Laguna, Philippines. The small health unit in San Nicolas may be

managed by the Barangay Health Unit (BHU) or a local healthcare organization

affiliated with the city or provincial health department. The San Pablo City Health

Office, under the supervision of the city government, may provide support and

resources to the health unit in San Nicolas to ensure the delivery of quality

healthcare services to the community. It is located in the southern part of the city

and has a population of about 7,255 as of the 2020 census. This represented

2.54% of the total population of San Pablo City, Laguna. San Nicolas is also known

as a home of small businesses and industries, including the healthcare industry.

Within San Nicolas, there is a small health unit offering basic care to the residents.

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 retrieving

patient information, potential loss or damage of records, and limited accessibility

 4

for healthcare providers, ultimately impacting the quality of patient care. Moreover,

Due to the large quantity of data stored, there are several unorganized and missing

old files. 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 difficulty keeping track of patient records and identifying prevalent medical

conditions.

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

Health Unit, the developers designed a health record 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.

Project Purpose

The Development of HealthWatch: A Health Record 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
 5

of health indicators, such as immunization rates, disease prevalence, and maternal

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.

Project Objectives

General Objective

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

Health Record 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.

 6

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

a. Dashboard – a feature that displays the summary of the patient records.

b. Residents Page – a feature that allows to add or create and displays all the

resident’s records.

c. Consultation Page – a feature that allows to add of personal information,

medical history, cont. medical history, etc.

d. Immunization Page – a feature that will add the senior and infant

immunization information.

e. Natality and Mortality Page – a feature that can be used to track the health

and growth of the barangay San Nicolas.

f. User Management Page – a feature that allows the user to create a new

user of the developed system.

g. Reports Page – a feature that will generate all of the patient records.

h. Settings Page – a feature that allows users to change their account

information.

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

4. To evaluate the project utilizing ISO 25010; and

5. To document the project

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 o f patients information processes of the San Nicolas

 7

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) Residents Page, 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 Page, 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 Page, which displays the relevant data of senior citizens and the nurse

administrator can view, update, and track immunization records and can print the

immunization records of the patients. (5) Immunization of Infants and Newborns

Page, which displays the relevant information on infants and newborns. It can also

add new records and search records for infants and newborns. Also, can print the

immunization records of the patients. (6) Records of Natality and Mortality Page,

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

place within a particular population. (7) User Management Page, where the admin

nurse can add a new user. (8) Reports Page, which can display a map and print

the patient information and records.

 8

There are three types of users that can access the system: the nurse

administrator, the barangay health workers user, and the barangay nutrition

scholars user, which is the health unit staff.

The nurse administrator of the health unit can view, edit, and create

residents records, consultation records, immunization records, natality and

mortality records, as well as can generate and print the history and summary

reports of the patients. Additionally, can create a new user of the system and

change the user’s personal and account information. While, the barangay health

workers user of health unit can view, edit, and create residents records,

consultation records, immunization records, natality and mortality records, as well

as can generate and print the history and summary reports of the patients. Lastly,

The barangay nutrition scholars user of health unit can view, edit, and create

residents records, consultation records, immunization records, natality and

mortality records, as well as can generate and print the history and summary

reports of the patients.

With all the mentioned scope above, the designed 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.
 9

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 Record

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

 10

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

consists of three sub-components: knowledge requirements, software

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

developers studied web development, knowledge about health record

management system, profile about San Nicolas health Unit, knowledge on

computer basic skills, and knowledge in system functionality. 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, a 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 Record 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
 11

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

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 Record 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.

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

records.

Death Records – refers to a feature that standardized way to record, store, and

access death-related informations.

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

medical conditions.

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

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

Findings – refers to the system feature that allows healthcare providers to

 12

document their observations, diagnoses, and test results related to a specific

patient encounter.

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

show the senior citizen interface.

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

the senior citizen interface.

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

information.

Medical History – refers to the features that serve as a comprehensive record of

the patient's past health information.

Medicine Prescription – refers to the system feature that streamlines the process

of prescribing medications.

Natality and Mortality Page – refers to the feature of the developed system that

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

Report Page – refers to the system feature which display and print all the patient

information and records.

Residents Page – refers to the feature of the developed system that allows to add

or create and displays all the residents records.

Setting Page - refers to the system feature that allows admin to change personal

information and account information.

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

new user for the Health Watch system

 13

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

websites, 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
 14

are or the records are missing.

Health Unit

A barangay's health center or health unit, which represents the idea of fair

and easily accessible healthcare for all locals, is the cornerstone of community

healthcare. These grassroots, strategically positioned facilities strive to serve the

local population's special needs by offering primary healthcare services,

preventive measures, and health education. Barangay health clinics are essential

nodes in the healthcare system that are crucial for controlling community health

risks through proactive intervention tactics, resolving common ailments, and

improving public health (Lazaro, 2019).

Moreover, health centers located in barangays serve as focal points for

promoting community empowerment and participation in topics related to health

and wellbeing. Through the provision of various services like family planning,

immunizations, maternity care, and basic diagnostic tests, these clinics enable

people to take control of their health. Health units cultivate a culture of health

consciousness and group accountability by means of community outreach

programs and cooperative efforts with local leaders and organizations. This, in

turn, builds a robust and self-sufficient healthcare ecosystem within the barrio

(DOH, 2021).

Furthermore, the importance of health centers in barangays goes beyond

providing healthcare; it encompasses a more comprehensive concept of social

welfare and holistic well-being. These institutions function as welcoming

 15

environments that address the many healthcare requirements of underprivileged

populations, such as the elderly, people with impairments, and those from low-

income backgrounds. Health units within barangays work to address the multiple

determinants of health and promote social equity by incorporating livelihood

assistance programs, nutritional counseling, and psychosocial support services.

This fosters a more compassionate and inclusive community fabric (UNDP, 2023).

Clinic Record Management System

A Clinic Record Management System (CRMS) is an advanced electronic

platform intended to simplify patient record management, retrieval, and storage in

healthcare settings. This system organizes and digitizes patient data, including

medical histories, treatment plans, test results, and billing records, by utilizing

cutting-edge technologies like secure databases and electronic health records

(EHRs). CRMS improves clinical data management's confidentiality, accuracy, and

efficiency by substituting conventional paper-based record-keeping techniques.

This eventually improves patient care and streamlines hospital operations. CRMS

deployment has been demonstrated to lower administrative burdens, limit errors,

and improve communication among healthcare practitioners, resulting in improved

clinical outcomes and patient satisfaction, according to a study published in the

Journal of Medical Systems (2020).

Additionally, CRMS is essential for promoting information sharing and

interoperability among various healthcare environments, such as clinics, hospitals,

and diagnostic labs. This system facilitates the seamless exchange of patient
 16

records and clinical insights among diverse healthcare stakeholders by means of

interoperable interfaces and defined data formats. This approach fosters

collaboration in multidisciplinary treatment approaches and continuity of care.

Interoperable CRMS platforms support a more linked and patient-centered

healthcare ecosystem, where clinicians can access timely and comprehensive

patient information to make informed care decisions (Healthcare Information and

Management Systems Society, 2022).

CRMS also enhances the functionality and value proposition of healthcare

information systems by including sophisticated features like data analytics,

decision support tools, and telemedicine capabilities. CRMS gives healthcare

professionals the ability to monitor disease outbreaks, spot patterns, and improve

treatment procedures by analyzing vast amounts of clinical data. This results in

population health management techniques that are more successful. Furthermore,

by integrating telemedicine functions, patients can access digital health resources,

remote monitoring services, and virtual consultations. This improves access to

care and raises the standard of healthcare, especially for underprivileged groups.

The potential of CRMS to spur innovation and enhance healthcare delivery in the

digital era is highlighted by research published in the International Journal of

Medical Informatics (2023).

Clinic Record Management Systems are a revolutionary technological

solution that completely changes how healthcare institutions provide clinical

services and handle patient data. The efficiency, quality, and accessibility of

healthcare service are improved by CRMS through the digitization and

 17

centralization of patient records, the promotion of interoperability, and the

integration of sophisticated functions. Adoption of CRMS has great promise for

boosting care coordination, increasing patient outcomes, and furthering the more

general objectives of patient safety and healthcare quality, as indicated by

research and industry reports.

Health Record

Based to Anderson (2019), A health record is an in-depth record of a

person's medical history, treatment plans, and other health-related information. It

is an essential tool used by healthcare professionals to provide efficient and

individualized care to patients. Health records include information about

diagnoses, medications, allergies, test results, and immunization history, among

other details, giving a patient a comprehensive picture of their health status over

time. They also enable continuity of care between various healthcare providers

and settings, guaranteeing smooth coordination and communication in the

provision of optimal healthcare services.

The health records are essential for encouraging patient empowerment and

participation in their own medical care. People are more equipped to make

educated decisions about their lifestyle, treatment options, and general health

when they have access to their health information. People can now easily access

their health records, communicate with healthcare providers, schedule

appointments, and refill prescriptions online thanks to the development of

 18

electronic health records (EHRs) and patient portals. This encourages patients and

providers to work together to manage health outcomes (Smith et al., 2021).

Health records support medical research and public health management in

addition to providing care for individual patients. Health records' aggregated and

anonymized data offer important insights into population-level healthcare trends,

treatment outcomes, and disease prevalence. In order to enhance public health

outcomes, healthcare institutions and public health agencies use this data to

identify health inequities, carry out focused interventions, and develop evidence-

based policies (Klann et al., 2023).

Management System

A management system is an organized framework that is used to effectively

plan, coordinate, and supervise different activities, resources, and processes

inside a company in order to accomplish predetermined goals and objectives. It

includes a collection of guidelines, protocols, and practices used to direct decision-

making, distribute resources, and track performance at various organizational

levels and functions. It basically acts as the framework that guarantees efficient

control, coordination, and communication within an organization.

The significance of management systems in the ever-changing business

environment of today cannot be emphasized. They offer a methodical approach to

managing the intricacies of contemporary businesses, assisting in the

simplification of processes, reduction of risks, and optimization of output.

 19

Management systems are essential for enabling agility and responsiveness as

businesses work to adjust to changing market trends and regulatory constraints.

A well-executed management system creates distinct roles, duties, and

reporting channels, which promote accountability and openness. Establishing

guidelines and optimal methods promotes uniformity and excellence in functions,

consequently augmenting client contentment and stakeholder assurance. It also

acts as a basis for ongoing enhancement, enabling businesses to pinpoint

opportunities for innovation and optimization in order to maintain their

competitiveness in a setting that is changing quickly.

Effective management systems are linked to improved organizational

performance and resilience, allowing businesses to overcome uncertainty and

seize new opportunities (Deloitte, 2019). Management systems can enable firms

to achieve sustainable growth and long-term success in today's interconnected

global marketplace by embracing the principles of adaptation, integration, and

sustainability.

Electronic Medical Record

According to Adams (2019), An Electronic Medical Record (EMR) is a digital

representation of a patient's paper chart that has been assembled over time and

contains extensive health data. It includes the following: vaccination records,

diagnoses, prescriptions, treatment plans, lab test results, and dates of

immunizations. Electronic Medical Records (EMRs) enable smooth

communication between healthcare professionals, guaranteeing effective and

 20

well-coordinated care. Additionally, they provide patients control over their

healthcare decisions by allowing them to access their own health information.

Healthcare providers can now access patient records remotely thanks to

the integration of EMRs into healthcare systems, which improves treatment

continuity and quality. EMRs also improve overall efficiency by streamlining

administrative tasks like coding and invoicing, which lessens the workload for

medical staff. Additionally, EMRs support clinical decision-making by giving

healthcare providers instant access to patient data and evidence-based

guidelines, empowering them to act quickly and decisively (Smith et al., 2022).

EMRs are also essential for enhancing patient safety and healthcare

results. EMRs assist in preventing medication errors and harmful drug interactions

with features like clinical decision support systems and medication reconciliation.

Additionally, they assist with population health management activities by

combining data to spot patterns, track the prevalence of diseases, and carry out

larger-scale preventive actions. Additionally, by offering a multitude of data for

analysis and evaluation, EMRs support initiatives in research and quality

improvement (Jones & Patel, 2023).

Web-based Information System

A digital platform created to store, manage, retrieve, and distribute data over

the internet is called a web-based information system. This system gives

consumers access to information via a web browser interface by utilizing web

technologies including HTML, CSS, and JavaScript. It acts as a centralized hub

 21

for arranging and displaying multiple kinds of material, such as text, pictures,

videos, and documents, for users across a range of platforms and places.

Web-based information systems are becoming essential tools for

individuals, businesses, and organizations due to the internet's rapid expansion.

As long as a user has an internet connection, they provide flexibility and scalability,

making information accessible to them whenever and wherever they are. Because

of its accessibility, users may collaborate, communicate, and make decisions in

real time, which helps them stay informed and productive in the fast-paced digital

world of today (Smith, 2019).

Moreover, web-based information systems are essential for decision

support and data analysis. They frequently incorporate cutting-edge features like

analytics, data mining, and reporting tools, allowing users to extract insightful

information from massive databases. These systems enable well-informed

decision-making and strategic planning by utilizing the power of algorithms and

machine learning algorithms to find patterns, trends, and correlations within the

data (Jones et al., 2022).

Additionally, web-based information systems boost production and

efficiency in a number of industries. These technologies aid firms in optimizing their

operations and resource usage by automating repetitive processes, optimizing

workflows, and improving communication channels. Additionally, they make it

easier to integrate databases and other software programs, allowing for cross-

platform data interchange and interoperability. In general, web-based information

 22

systems provide users with the resources and capabilities they require to thrive in

the linked digital environment of today (Brown & Lee, 2023).

Database

According to Connolly & Begg (2019), A database is an ordered set of

structured data that has been arranged to facilitate effective information retrieval,

storage, change, and deletion. It acts as a centralized repository for methodically

and systematically storing and managing data, allowing users to access and

modify it as needed. Databases are crucial parts of contemporary information

systems because they serve as the basis for a wide range of functions and

applications in diverse fields and sectors.

Data is usually arranged in databases into tables made up of rows and

columns. A record is represented by each row, and a particular attribute or field

related to the records is represented by each column. It is possible to depict

intricate dependencies and links between various data elements using this tabular

layout. Moreover, queries—commands or statements used to access, filter, and

change data based on predetermined criteria—are frequently supported by

databases (Ramakrishnan & Gehrke, 2020).

Databases are essential for supporting organizations' data management

and decision-making procedures. They offer a dependable and safe way to store

and retrieve data while maintaining data confidentiality, consistency, and integrity.

Furthermore, databases provide intricate data analysis and insightful report

 23

generation, assisting firms in gaining useful insights and making well-informed

decisions grounded in correct and current information (Elmasri & Navathe, 2022).

Relational Database

As explained by Abadi et al., (2019), A structured set of data arranged into

tables, each table representing a distinct entity or relationship between entities, is

called a relational database. Efficient data retrieval and manipulation are made

possible by the interconnection of these tables via common fields or keys. This

approach, which ensures data integrity through constraints like foreign keys and

referential integrity, is built on the ideas of set theory and relational algebra. It

makes relationship-building easier. Modern data management systems are built

around relational databases because they provide a strong framework for

organizing and storing structured data.

Support for ACID (Atomicity, Consistency, Isolation, Durability) attributes,

which guarantee reliable and safe transaction processing, is one of relational

databases' primary characteristics. Transactions are guaranteed to be either fully

completed or not at all by atomicity, to be consistent before and after in the

database, to be isolated from one another to prevent transactions from interfering

with one another and to be durable even in the case of a system failure

(Ramakrishnan & Gehrke, 2020). These characteristics are necessary to preserve

dependability and data integrity in multi-user settings.

Relational databases also provide an easy-to-use query language, like SQL

(Structured Query Language), which makes it possible for users to obtain and
 24

modify data. With the help of SQL, users can efficiently carry out complicated

operations like filtering, merging, and aggregating data thanks to its standardized

interface for relational databases (O'Neil et al., 2021). Relational databases are

widely used in many different industries and applications because of their

accessibility to a broad range of users, from beginners to experts, and because of

their simplicity and universality.

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 a strong and adaptable

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

web applications.
 25

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.
 26

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.
 27

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 for
 28

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.

 29

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 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
 30

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 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.

 31

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

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, does not 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,
 32

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 suggested 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 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
 33

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,

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.
 34

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 medical clinic management system

software and mobile app enables you to work across boundaries, from different

platforms and locations. 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, 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

Computerized Medical Record and Monitoring System of Saint Michael

College of Caraga, Philippines

According to Bergado et al., (2020) The purpose of this study was to

ascertain the benefits the system offers the school clinic and to facilitate the

management of Saint Michael College of Caraga (SMCC) staff and student

medical records. Although better than paper in general, the existing CPD

framework sometimes fails to meet clients halfway since it is based on an

antiquated paper-outlin paradigm (Gad & Ramadan, 2013). According to the study,

the system is highly helpful to the school and was required for maintaining the
 35

medical records. This system also includes information about students and staff,

including their consultation with the clinic, and securely stores data. Additionally,

the system updates the data as the patient's circumstances change, allowing for

quick tracking of data that may be useful for the clinic attendant. Additionally, the

system prints three easily manipulable report classes. It was suggested that the

system be implemented in the school clinic in order to enhance performance in the

management of medical records, raise security standards, and protect patient

confidentiality.

The developer's developed the system to maintain and organize all the

records and also to make all the client's medical records more secure. Similar to

the Computerized Medical Record and Monitoring System, they also have features

that can maintain and secure all medical records or information of students/clients.

MediCord: A Web-Based Health Record Management System

According to Olipas et al., (2022) This study aimed to design and develop

an information technology-based application called MediCord: A Web-Based

Health Record Management System. In order to provide a rapid and simple way

to collect medical data needed in community health centers, MediCord was

developed. It was created to solve issues with manual information recording, such

as duplicate data, unauthorized access to files and records, and the production of

reports that are relevant and timely. It also aims to tackle the difficulties in

guaranteeing that individuals departing from their communities are safe, well, and

free of COVID-19. In particular, the technology was designed with use in medical
 36

facilities in mind. The system was not designed to handle complicated medical

data and records. The system adopted personal data protection and keeping

privacy in mind. Because of this, the quantity of data that is stored with each

person's consent is restricted.

The system was similar to the developers’ developed system because both

systems have the same purpose of solving issues with manual information

recording, such as duplicate data, unauthorized access to files and records. Also

they both have patient record management features.

Public Health Record Management System: An Up-Close Monitoring System

According to Batoon et al., (2022). They created a public health record

management system for the Sto Barangay Health Center Rosario, Paombong,

Bulacan, acknowledge the current problem, and conditions, and lower the

possibility of data loss because of exceptional mishaps or human error and decline

the likelihood that patient data will be redundant. The Public Health Record

Management System (PHRMS) seeks to improve the public health sector's record-

keeping practices by utilizing technology to further improve the center's security

and a quicker method of processing data to increase productivity and service more

patients while saving time.

Just like the developed project, they are both health record management

systems and have goals such as avoiding the loss of patient records and so that

the data can be accessed or processed more quickly.

 37

Development and Evaluation of Rural Health Unit Record Management

System with Data Analytics for Municipality of Bay, Laguna using ISO 25010

The topic of this paper focuses on the issue of the staff of the Rural Health

Unit regarding challenges in keeping track of patients' records and reminding them

when their follow-up appointments are due. The circumstance aided the

researcher in creating a tool that will enable staff members to arrange patient

records at the Rural Health Unit and quickly remind patients of their scheduled

check-ups via SMS notification (Atanacio & Lacatan, 2019).

 38

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

Figure 2. Root Cause Analysis using Fishbone Diagram of HealthWatch

Figure 2 shows the fishbone diagram of HealthWatch: A Health Record

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

structure of a fish, the head is the problem, 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.

As shown in the diagram, the main problem is the difficulty in managing

patient records. Due to file misplacement caused by a significant number of files,

 39

there are issues in the measuring area. Inadequate patient identification,

insufficient assessment, and failure to obtain consent can lead to medical errors

and substandard care. Also, the problem of typographical error and manually

records of the patient data may lead to various problems in healthcare provisions.

Based on Scispace (2024), The challenges in managing patients' records

include the low uptake of personal electronic health records (PEHRs) by patients,

especially in terms of entering and managing their personal and medical data in

their PEHRs. Patients tend to use their PEHRs passively rather than actively,

refraining from generating and managing their medical data, particularly when the

data is complex and sensitive.

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
 40

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

breakdown structure of the HealthWatch: A Health Record Management System

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, verifies system requirements, used work breakdown structure to break the

capstone project into small and manageable tasks, developed a flowchart for

manual and developed system process, and use case diagram for user

capabilities. The third step is the project's actual development or implementation.

Fourth is integration and testing, which consists of functionality testing, browser

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.
 41

Flowchart

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

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

Management System for the San Nicolas Health Unit. With the help of the diagram
 42

above, 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 or barangay health worker will make a record

in consultation form. Also, if the patient is already registered, they will identify

patient needs, gather patient information, and assess their condition. After that,

they will record the patient's current health condition. The nurse contacts the doctor

to provide the patient's condition, while the doctor reviews the patient's condition

and the nurse receives doctor's instructions. The nurse 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.
 43

Figure 5. Flowchart of HealthWatch

Figure 5 shows the flow of the Healthwatch system. The process begins

with the user logging into the system and being directed to the homepage. If the

patient and resident are already registered in the records, the user can proceed to
 44

record or update patient information and search for a resident's name in the

residents' record page. During the consultation process, if the patient is not already

registered, the user is required to add the patient's record before selecting the

necessary form for the consultation. This ensures that all patient information is

accurately documented within the system. Additionally, the records generated

during the consultation process are stored in multiple locations for easy access

and analysis. These include storage in the consultation section for immediate

reference, the dashboard for monitoring and tracking purposes, and in reports for

comprehensive analysis and reporting.

 45

Figure 6. Flowchart for Main Interface

Figure 6 shows the process of HealthWatch: A Health Record

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 from the following menu displayed in the main interface of
 46

the system: The following menus that the admin can choose are; Dashboard,

which displays the summary of all the patients. Residents page, where you

can add new patient records, and where you can view the patient information.

Consultation page, which will be used by the patient to generate medical

history, current symptoms, and any other relevant details. Immunization of

senior citizens page, which displays the relevant data of senior citizens and

where you can view, update, and track immunizations for their patients.

Immunization of infants page, 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 Page, which displays the

summary of all total numbers of births and deaths that take place within a

particular population. User management page, where you can add a new

user. Reports page, 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.

 47

Figure 7. Flowchart for Dashboard Page

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

view the summary of all totals of patients and residents, total consultations,

total immunizations, and total deaths. It also displays the chart representation

of residents grouped by age and sex.

Figure 8. Flowchart for Residents Page

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

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

add new residents’ records or information, also can filter information in terms

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

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.

 49

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.

 50

Figure 13. Flowchart for User Management Page

Figure 13 shows the user management page. The administrator can

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

update, and delete users. The nurse administrator provides barangay health

workers and barangay nutrition scholars to give authentication to access the

system.

Figure 14. Flowchart for Reports Page

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

relevant details of the patients’ health status. It displays a generated report

that consists of the patients’ name, date, age, gender, purok number, and
 51

diagnosis. It displays the summary and history of the patients. And the reports

can be printed.

Wireframe

Figure 15. Wireframe of Log-In Form of HealthWatch

A typical Health Record 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.
 52

Figure 16. Wireframe of Dashboard Page of HealthWatch

This figure shows the dashboard page on the administrator side of the

system. It displays the chart representation of residents grouped by age and sex.

The administrator can view the summary of the total patients, consultations,

immunizations, mortality, and natality each week that is recorded in the system.

Therefore, by clicking the view all button, it will show the full details of the total

records.
 53

Figure 17. Wireframe of Residents Page of HealthWatch

This figure shows the residents page on the administrator side of the

system. It consists of Name, Sex, Date Registered, Actions, Sex, Columns, and,

add new. The administrator can search the name of the residents. This page will display

all residents’ record. Also, the administrator can easily navigate and access

essential information of the residents’ data. After that, you will proceed on the next

page.

Figure 18. Wireframe of Add New Resident Record of HealthWatch

This figure shows add new resident record on the administrator side of the

system. This contains the following fields: Last Name, Middle Name, Sex, Birth
 54

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 resident in the Health Watch System. After that, you

can click the submit record button.

Figure 19. Wireframe of Consultations Page of HealthWatch

This figure shows the consultations page on the administrator side of the

system. This is a list of options that an admin can select from when they are

consulting with a patient. This includes name, recent visit, diagnosis, and actions.

The administrator can search the name of the patients. The patient consultation

will be displayed on this page and users and nurse can easily view the patient's

condition. Also, the administrator can easily navigate and access essential

information during the consultation process.

 55

Figure 20. Wireframe of New Consultation Record “Personal Information” of HealthWatch

This figure shows the consultation record of personal information on the

administrator side of the system. It can be filling up by the admin and users. This

includes name, age, sex, birthday, address, purok, etc. This page is necessary;

after filling up to those inputs, the admin and user can proceed to the next step.

Figure 21. Wireframe of New Consultation Record “Geographic Information” of HealthWatch

This figure shows the consultation record of geographic information on the

administrator side of the system. The administrator can drag the map to locate the

location and search from the address bar. After that, the admin and user can
 56

proceed to the next step.

Figure 22. Wireframe of New Consultation Record “Medical History” of HealthWatch

This figure shows the consultation record of medical history on the administrator

side of the system. It can be filling up by the admin and users. This includes personal

medical history, past surgical history, and date done. This page is required; after

filling up to those inputs, the admin and user can proceed to the next step.

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

This figure shows the consultation record of cont. medical history on the

administrator side of the system. It can be filling up by the admin and users. This

includes family medical history, past surgical history, and date done. This page is
 57

required. After filling up to those inputs, the admin and user can proceed to the

next step.

Figure 24. Wireframe of New Consultation Record “Social History” of HealthWatch

This figure shows the consultation of record social history on the

administrator side of the system. This page includes when the patient is smoking,

taking alcohol or illicit drugs, and if the patient is sexually active. After filling up to

those inputs, the admin and user can proceed to the next step.

Figure 25. Wireframe of New Consultation Record “Immunization” of HealthWatch

This figure shows consultation record of immunization on the administrator

side of the system. This includes patient immunization for children, adults, for
 58

elderly, and immune compromised and other immunizations. After filling up to

those inputs, the admin and user can proceed to the next step.

Figure 26. Wireframe of New Consultation Record “Family planning, Menstrual and Pregnancy

history” of HealthWatch

This figure shows the consultation record of family planning, menstrual and

pregnancy history on the administrator side of the system. This includes family

planning, menstrual history, pregnancy history, type of delivery, and pregnancy

induced hypertension. After filling up to those inputs, the admin and user can

proceed to the next step.

 59

Figure 27. Wireframe of New Consultation Record “Physical Examination” of HealthWatch

This figure shows the consultation record of physical examination on the

administrator side of the system. This includes patients’ height, weight,

temperature, blood pressure, heart rate, respiratory rate, visual activity, and blood

type. A physical examination is required for consultation. After filling up to those

inputs, the admin and user can proceed to the next step.

Figure 28. Wireframe of New Consultation Record “Pertinent Findings Per System” of

HealthWatch

This figure shows the consultation record of pertinent findings per system

on the administrator side of the system. This page is required that include heent,
 60

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. After filling up to

those inputs, the admin and user can proceed to the next step.

Figure 29. Wireframe of New Consultation Record “Doctor’s Assessment” of HealthWatch

This figure shows the consultation record doctor’s assessment on the

administrator side of the system. It presented as a complete record of the doctor's

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

any preliminary diagnostic results. After filling up to those inputs, you can click the

submit record button.

 61

Figure 30. Wireframe of Immunization Sheet Form for Senior Citizens in HealthWatch

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

administrator side of the system. This feature can display the column containing the

Date of assessment, Osca ID No., Name, and Complete Address of Senior Citizens.

The administrator can identify and tracking the immunization records of each

senior citizen accurately within the system. The administrator can search and add

additional records.
 62

Figure 31. Wireframe of Immunization Sheet Form for Infants in HealthWatch

This figure shows the immunization sheet form for infants on the

administrator side of the system. This feature can display the personal information

of the child like Name, Date of Birth, Name of Parents, etc. The administrator can

identify and tracking the immunization records of each child accurately within the

system. The administrator can search and add additional records.

Figure 32. Wireframe of Death Rate Page of HealthWatch

This figure shows the death rate page on the administrator side of the

system. The administrator can record the relevant details of the births and deaths that
 63

take place within a particular population. It contains the death records of the people

from San Nicolas San Pablo City. The administrator can identify and tracking the

death records of each natality and mortality accurately within the system. The

column contains date died, types, category, sex, and actions. After records the

data, you can directly click the submit button.

Figure 33. Wireframe of User Management Page of HealthWatch

This figure shows the user management page on the administrator side of

the system. The nurse administrator provides barangay health workers and

barangay nutrition scholars to give authentication to access the system. The

administrator can also create and update user accounts. It contains a search bar,

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

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

name, last name, and sex. After that, you can click the submit record button.
 64

Figure 34. Wireframe of User Management “New User Record” of HealthWatch

This figure shows the new user record on the administrator side of the

system. The administrator can manage the accounts of each users and admin

users of the system. The administrator can also create and update user accounts.

It contains type, sex, category, and date of birth. This feature allows the user to

create a new record in the Health Watch System.

Figure 35. Wireframe of Reports Page of HealthWatch

This figure shows the system reports page on the administrator side of the

system. The administrator can view the complete details of the patients that export

their data to generate a report that consists of the patients’ name, date, age,
 65

gender, purok number, and diagnosis. It displays the summary and history of the

patients. Also, the generated reports can be printed directly from the system.

Figure 36. Wireframe of Settings Menu of HealthWatch

This figure shows the system settings of the administrator side on the

system. It contains the user profile such as the user's personal information (Full

Name & Sex) and account information (Email Address and password). The

administrator can also change information or password by just click save changes.
 66

Use Case Diagram

Figure 37. Use Case Diagram for Nurse Administrator

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

nurse administrator of the health unit can view, edit, and create residents records,

consultation records, immunization records, natality and mortality records, as well

as can generate and print the history and summary reports of the patients.

Additionally, can create a new user of the system and change the user’s personal

and account informations.

 67

Figure 38. Use Case Diagram for Barangay Health Workers User

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

user. The barangay health workers user of health unit can view, edit, and create

residents records, consultation records, immunization records, natality and

mortality records, as well as can generate and print the history and summary

reports of the patients.

 68

Figure 39. Use Case Diagram for Barangay Nutrition Scholars User

Figure 39 shows the Use Case Diagram of the barangay nutrition scholars

user. The barangay nutrition scholars user of health unit can view, edit, and create

residents records, consultation records, immunization records, natality and

mortality records, as well as can generate and print the history and summary

reports of the patients.

 69

Project Development

Figure 40. 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 used 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

During the meeting with the San Nicolas Health Unit’s staff to determine the

best procedure for developing HealthWatch, the developers were expected to

 70

identify the essential components that should be included in the HealthWatch

project. This involves determining the core features, functionalities, and elements

that are crucial for the successful implementation of the project. It should identify

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 for the specific data, metrics, and information that the

project should capture, analyze, and present to fulfill the unit's requirements.

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 browser compatibility testing, and

 71

ISO/IEC 25010 will be utilized to assess the system. These testing activities were

essential in identifying and determining any code bugs, ensuring the performance

of the system is working immediately.

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. Where it is started

working and becomes accessible to end users.

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 could 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.

The features that are tested are the following: Login page, Forgot Password

page, Dashboard page, Residents page, Consultations page, Natality and

Mortality page, Immunization of Infants page, Immunization of Senior Citizen page,

Reports page, and User Management page. The developers will benefit from
 72

testing the system to validate functionality, enhance user experience, optimize

performance, mitigate risks, and to effort continuous improvement in the software

development process. It is a critical practice that contributes to the overall quality

and success of the system.

Table 1. Functionality Testing

Test Navigation Expected Action Actual Status

Sequence Path Result Result
Button Navigation Expected Click Actual Result Passed
Path Result 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, the result is failed.

 73

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.

 74

Project Evaluation

The system’s acceptability was evaluated by the developers using the

ISO/IEC 25010 for the project evaluation. ISO/IEC 25010 itself contains functional

suitability, performance efficiency, usability, reliability, security, compatibility,

portability, and maintainability. The system was evaluated by Two Hundred and

Twenty (220) Non–IT respondents: thirty (30) Purok 1 Residents, thirty (30) Purok

2 Residents, thirty (30) Purok 3 Residents, thirty (30) Purok 4 Residents, thirty (30)

Purok 5 Residents, thirty (30) Purok 6 Residents, thirty (30) Purok 7 Residents,

one (1) nurse, five (5) BHW Barangay Health Workers, and five (4) BNS Barangay

Nutrition Scholars. Ten (10) I.T Professionals with professions such as Application

Developers, Web Developers, and Front-end and Back-end developers, and IT

Specialists.

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
 75

and levels of authorization.

Compatibility – used to test the systems’ compatibility with various environments,

devices, and interfaces.

Portability – used to test the system’s adaptability to different environments and

its flexibility and scalability in deployment.

Maintainability – used to test the system’s effectiveness and efficiency with which

a product or system can be modified to improve it, correct it or adapt it to changes

in environment, and in requirements.

Statistical Treatment of Data

The statistical treatment of data is a procedure that converts raw data into

something interpretable. This technique is critical because it enables firms to make

more informed decisions based on client input. Statistical treatment of data

involves transforming raw data into interpretable information for decision-making.

This approach is vital for businesses because it enables them to convert client

feedback into actionable information.

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.

 76

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

Statistical Treatment

Scale Interpretation
4.21-5.00 Excellent

3.41-4.20 Very Good

2.61-3.40 Good
1.81-2.60 Fair

1.00-1.80 Poor

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

4.21- 5.00 interpreted as "Excellent, 3.41-4.20 interpreted as "Very Good", 2.61-

3.40 interpreted as "Good". 1.81-2.60 interpreted as "Fair", and 1.00-1.80

interpreted as "Poor".
 77

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

 78

Software Requirements

This includes the different software requirements used by the developers and

needed in the development of the project.

• NextJS

• Tailwind CSS

• Flowbite

• MySQL

• VS Code

• 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.

 79

• 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.

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.

 80

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.

Screen Hierarchy

Figure 41. 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.
 81

Figure 42. Dashboard of HealthWatch

Figure 43. Dashboard of HealthWatch

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

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

recorded in the system.

 82

Figure 44. Residents Menu of HealthWatch

This figure shows the Residents 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 45. Residents Menu “Add New” Form of HealthWatch

This figure shows the Residents 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
 83

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

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 46. 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.

 84

Figure 47. 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 48. 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
 85

that can see in the reports page.

Figure 49. 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.
 86

Figure 50. 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 51. 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.
 87

Figure 52. 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 53. 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

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

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

Figure 54. 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.

 89

Figure 55. 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.

 90

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

Figure 57. 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.
 91

Figure 58. New Consultation Record “Doctor’s Assessment” 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 59. 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.

 92

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

coming from the patient.

Figure 60. Immunization for Infants/Babies of HealthWatch

Figure 61. Immunization for Infants/Babies of HealthWatch

 93

Figure 62. Immunization for Infants/Babies of HealthWatch

Figure 63. 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.

 94

Figure 64. Natality/Mortality of HealthWatch

This figure shows the Natality and Mortality 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 65. New Record “Natality/Moratality 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.

 95

Figure 66. 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 67. 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.
 96

Figure 68. 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 69. Generated “History” Reports of HealthWatch

These reports are used to preserve the institutional memory of an

organization and are produced as part of the record management procedure. In

 97

addition to specifics regarding the security, privacy, and disaster recovery plans

put in place to protect the records, they may also contain information regarding

the creation, modification, transfer, and erasure of documents. History reports

provide as proof of an organization's operations and assist in lowering or

managing related risks, making them essential for management, mitigation, and

compliance.

Figure 70. Generated “Summary” Reports of HealthWatch

The figure shows Generated “Summary” reports are produced to give details

about how many records are active or inactive at any given time inside a certain

system or organization. Understanding the amounts of records being kept and

identifying any possible problems with record management procedures may both

be accomplished with the use of these reports.

 98

Figure 71. 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.

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.
 99

• The project can display essential information about a patient's health status,

diagnosis, treatment, and other relevant details.

• The project can display diagnosis map that can generate all patients

information reports.

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

 100

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
Login Button Dashboard Account 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 Forgot Show Forgot
Password Password Password Click Password PASSED
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.

 101

Table 5. Function Testing in Forgot Password Page

Test Navigation Expected Action Action Status

Sequence Path Result Result
Send email Login Page Proceed to Click Show Login PASSED
Button Login Page Page
Cancel Login Page Proceed to Click Show Login 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.

 102

Table 6. Function Testing in Dashboard Page

Test Sequence Navigation Path Expected Result Action Action Result Status

Dashboard Dashboard Page Proceed to Click Show Dashboard PASSED

Button Dashboard Page Page

Total Residents Residents Proceed to Click Show Residents PASSED

View all Button Page Residents Page Page

Total Consultations Proceed to Click Show PASSED

Consultations Page Consultations Consultations
View all Button Page Page
Total Immunizations Proceed to Click Show PASSED
Immunizations Page Immunizations Immunizations
View all Button Page Page

Total Birth and Natality and Proceed to Click Show Natality PASSED
Death View all Mortality Page Natality and and Mortality
Button Mortality Page Page
Reports Reports Proceed to Click Show Reports PASSED
Generate Button Page Reports Page 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.

 103

Table 7. Function Testing in Residents Page

Test Sequence Navigation Path Expected Action Action Result Status

Result
Residents Residents Page Proceed to Click Show Residents PASSED
Button Residents Page Page

Add New Button Residents Page Proceed to Click Show Residents PASSED
Residents Page Page

Calendar Button Residents Page Proceed to Click Show Residents PASSED

Residents Page Page

Member Type Residents Page Proceed to Click Show Residents PASSED

Button Residents Page Page

Submit Record Residents Page Proceed to Click Show Residents PASSED

Button Residents Page Page

Search Residents Page Proceed to Click Show Residents PASSED

Residents Residents Page Page
Button
Sex Button Residents Page Proceed to Click Show Residents PASSED
Residents Page Page

Columns Button Residents Page Proceed to Click Show Residents PASSED

Residents Page Page

Edit Button Residents Page Proceed to Click Show Residents PASSED

Residents Page Page

Delete Button Residents Page Proceed to Click Show Residents PASSED

Residents Page Page

Page Button Residents Page Proceed to Click Show Residents PASSED

Residents Page Page

Table 7 shows the Functionality Testing in Residents 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.

 104

Table 8. Function Testing in Consultations Page

Test Navigation Expecte

Action Action Result Status
Sequence Path Result
Search Button Consultations Proceed to Show
Page Consultations Click Consultations PASSED
Page Page
Consultations Proceed to Show
Sex Button Page Consultations Consultations PASSED
Page Click Page
Columns Consultations
Button Page Proceed to Show
Consultations Click Consultations PASSED
Page Page
Add New New Show New
Button Consultation Proceed to Consultation
Record Page New Record Page
Click PASSED
Consultation
Record Page
Patient Name New Proceed to Show New
Button Consultation New Consultation
Record Page Click Record Page PASSED
Consultation
Record Page
Member Type New Show New
Proceed to
Button Consultation Consultation
New
Record Page Click Record Page PASSED
Consultation
Record Page
Next Step New Show New
Proceed to
Button Consultation Consultation
New
Record Page Click Record Page PASSED
Consultation
Record Page
Consultations
View Button Page Proceed to Show
Consultations Click Consultations PASSED
Page Page
Consultations
Edit Button Page Proceed to Show
Consultations Click Consultations PASSED
Page Page
Consultations
Delete Button Page Proceed to Show
Consultations Click Consultations PASSED
Page Page

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.

 105

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
Proceed to Show
Print Button Immunizations Click PASSED
Immunizations Immunizations
of Senior
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.

 106

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

Proceed to Show
Immunization of
Immunization Immunization
Infants/Babies
Print Button of Click of PASSED
Page
Infants/Babies Infants/Babies
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.
 107

Table 11. Function Testing in Natality and MortalityPage

Test Navigation Expected

Action Action Result Status
Sequence Path Result
Sex Button Natality and Proceed to Show Natality
Mortality Natality and and Mortality
Page Mortality Page
Page Click PASSED

Proceed to
Columns Natality and Natality Show
Button Mortality and Natality
Page Click and PASSED
Mortality
Page Mortality
Page
Proceed to
Add New Natality and Natality Show
Button Mortality and Natality
Page Click and PASSED
Mortality
Page Mortality
Page
View Button Proceed to
Natality and Natality Show
Mortality and Natality
Page Click and PASSED
Mortality
Page Mortality
Page
Edit Button Proceed to
Natality and Natality Show
Mortality and Natality
Page Click and PASSED
Mortality
Page Mortality
Page
Delete Button Proceed to
Natality and Natality Show
Mortality and Natality
Page Click and PASSED
Mortality
Page Mortality
Page
Page Button Proceed to
Natality and Natality Show
Mortality and Natality
Page Click and PASSED
Mortality
Page Mortality
Page
Type Button Proceed to Show Natality
Natality and Natality and and Mortality
Mortality Page Mortality Page
Click PASSED
Page

Proceed to
Category Natality and Natality and
Button Mortality Show Natality
Mortality Page Click and Mortality PASSED
Page
Page
 108

Sex Button Proceed to Show Natality

Natality and Natality and and Mortality
Mortality Mortality Page
Page Click PASSED
Page

Birth and Date Proceed to Show Natality

Died Natality and Natality and and Mortality
Mortality Mortality Page
Page Click PASSED
Page

Proceed to
Submit Record Natality and Natality Show Natality
Button Mortality and and Mortality
Page Click Page PASSED
Mortality
Page

Table 11 shows the Functionality Testing in Natality and Mortality

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.
 109

Table 12. Function Testing in User Management Page

Test Navigation Expected

Action Action Result Status
Sequence Path Result
Search User Proceed to Show User
Button Management User Management
Page Management Page
Page Click PASSED

Sex Button User Proceed to Show User

Management User Managemen
Page Managemen t Page
t Page Click PASSED

User Proceed to Show User

Columns Management User Managemen
Button Page Managemen t Page
Click PASSED
t Page
Proceed to Show User
Add New New User User Management
Button Record Page Managemen Page
Click PASSED
t Page
View Button User Proceed to User Show User
Management Management Management
Page Page Click Page PASSED

Edit Button User Proceed to User Show User

Management Management Management
Page Page Click Page PASSED
Delete Button User Proceed to User Show User
Management Management Management
Page Page Click Page PASSED
Page Button User Proceed to User Show User
Management Management Management
Page Page Click Page PASSED
New User Record Proceed to User Show User
Sex Button Page Management Management
Page Click Page PASSED
User Proceed to User Show User
Submit Button Management Management Management
Page Page Click Page PASSED

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,
 110

the results of the testing of each button are passed.

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

Minus Button Reports Page Click PASSED
Reports Page Page

Generated Proceed to Print Show Reports

Reports Button Print Page Click PASSED
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.

 111

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.

 112

Browser Compatibility Testing

Table 15. Function Testing in Browser Compatibility Testing

Web Expected Actual Results Status/Result Recommended

Browser Results
All buttons were placed
properly, the layout
Google All buttons was properly displayed
Chrome and elements and all of the elements’ Passed Yes
are in place sizes
were resized
accordingly
All buttons were placed
properly, the layout
Microsoft All buttons was properly displayed
Edge and elements and all of the elements’ Passed Yes
are in place sizes
were resized
accordingly
All buttons were placed
properly, the layout
Mozilla All buttons was properly displayed
Firefox and elements and all of the elements’ Passed Yes
are in place sizes
were resized
accordingly

Table 7 shows the browser testing results. Google Chrome, Microsoft Edge,

and Mozilla Firefox were used to test the web browsers. Both Google Chrome and

Microsoft Edge fit the graphics, buttons, and design to the screen, however Mozilla

Firefox's interface buttons and design are slightly larger, but the browser responds

fast enough.

When considering user interface, they are all almost at the same level, but

Chrome with an additional feature takes the win at it. The developers recommend
 113

Google Chrome because it is compatible with a variety of features and, in addition

to being by far the most popular browser, it is designed to be the fastest web

browser.

Project Evaluation

Table 16. ISO 25010 Evaluation results of the Non-IT Respondents

Characteristic Rating Interpretation

Functional Suitability 4.36 Excellent

Performance Efficiency 4.46 Excellent

Usability 4.38 Excellent

Reliability 4.46 Excellent

Security 4.42 Excellent

Compatibility 4.47 Excellent

Portability 4.48 Excellent

Maintainability 4.54 Excellent

Overall Mean 4.45 Excellent

In terms of Functional Suitability, the developed project obtained a rating of

4.36 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.

 114

In terms of Performance Efficiency, the developed project attained a

rating of 4.46 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.38 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.46 from

the non-IT respondents. This means that the non-IT respondents agreed that the

developed project performs consistently and reliably under normal operation.

In terms of Security, the developed project obtained a rating of 4.42 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.

In terms of Compatibility, the developed project obtained a rating

of 4.47 from the non-IT respondents. This suggests the system functions well with

different hardware, software, and other systems that non-IT users might be familiar

with. In simpler terms, the system can be easily integrated into their existing work

environment without requiring complex changes.

In terms in Portability, the developed project obtained a rating

of 4.48 from the non-IT respondents. indicates the system can be easily

transferred to different working environments or platforms (like different computers

or operating systems) without requiring significant modifications. This makes the

 115

system adaptable for non-IT users who might not have a standardized technical

environment.

Regards in Maintainability, the developed project obtained a rating

of 4.54 from the non-IT respondents. It signifies that non-IT users can easily

address minor issues or perform basic upkeep on the system without needing

extensive technical support. This could involve adding new data, customizing

settings within the system's allowed range, or troubleshooting common problems.

Overall, the developed project obtained a rating of 4.45 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, secure, user-friendly, easy to maintain, and adaptable for non-

technical users.
 116

Table 17. ISO 25010 Evaluation results of the IT Expert Respondents

Characteristic Rating Interpretation

Functional Suitability 4.56 Excellent

Performance Efficiency 4.49 Excellent

Usability 4.39 Excellent

Compatibility 4.54 Excellent

Reliability 4.61 Excellent

Security 4.48 Excellent

Maintainability 4.52 Excellent

Portability 4.64 Excellent

Overall Mean 4.53 Excellent

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.56 from IT respondents. This means that some of the 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.49 from IT respondents. This means that the IT respondents agreed that the

developed project performs its task efficiently.

In terms of Usability, the developed project attained a rating of 4.39 from the IT

respondents. This means that the IT respondents agreed that the developed project

is usable, learnable, and easy to operate.

 117

In terms of Reliability, the developed project attained a rating of 4.54 from the

IT respondents. This means that the IT respondents agreed that the developed

project performs consistently and reliably under normal operation.

Regarding Security, the developed project obtained a rating of 4.61 from the

IT respondents. This means that the IT respondents generally agree that the

developed project can protect sensitive data and ensure that data are accessible

only to authorized users.

In terms of Compatibility, the developed project obtained a rating

of 4.48 from the IT respondents. This suggests the system functions well with

different hardware, software, and other systems that IT users might be familiar

with. In simpler terms, the system can be easily integrated into their existing work

environment without requiring complex changes.

In terms of Portability, the developed project obtained a rating

of 4.64 from the IT respondents. indicates the system can be easily transferred to

different working environments or platforms (like different computers or operating

systems) without requiring significant modifications. This makes the system

adaptable for IT users who might not have a standardized technical environment.

Regards in Maintainability, the developed project obtained a rating

of 4.52 from the IT respondents. It signifies that IT users can easily address minor

issues or perform basic upkeep on the system without needing extensive technical

support. This could involve adding new data, customizing settings within the

system's allowed range, or troubleshooting common problems.

 118

Overall, the developed project obtained a rating of 4.53 from the non-IT

respondents and was interpreted as “Excellent”. This means that IT respondents

generally agree that the developed project is functional, efficient, usable, reliable,

and secure.
 119

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.53 with an interpretation of “Excellent” from IT Experts and

a total mean of 4.45 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.
 120

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.45” (Excellent) from Non-IT and a total score

of “4.53” (Excellent) from the IT experts using ISO/IEC 25010.

5. The project was documented.

 121

Recommendations

The development of the health management system is advantageous to the

barangay health workers in San Nicolas Health Unit, as well as to the residents of

Brgy. San Nicolas. 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.
 122

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_tok

en=aCgRtCGPUuEAAAAA:rBN_rEFD7dqHgMnyozinfLT5D_LAdKFfV0Dt_EHHb

o3GGl6xnhDq6P3CVjQHYf32Q7JLPzVlbu8

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-

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

UNOTechnologies.https://www.unotech.io/clinic-management-systemsoftware

Smart Hospital Diabetic Clinic Patient Management System. nursing license map

(2022), https://nursinglicensemap.com/resources/healthcare-
 123

102 careers/what-is-healthcare-management/ health and safety authority

(2023),https://www.hsa.ie/eng/topics/managing_health_and_safety/safety_and_h

ealt h_management_systems/

Feder, M (2022), https://www.phoenix.edu/blog/what-is-health-

informationmanagement-definitions-and-examples.html Nash, David (2022),

https://home.liebertpub.com/publications/populationhealthmanagement/301/over

view

Kestrel Tellevate (2023),https://goktl.com/management-systems-back-tobasics/

Span Consulting (2023), https://www.spanexperts.com/management-systems

Transition Support (2023),

https://transitionsupport.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_tok

en=aCgRtCGPUuEAAAAA:rBN_rEFD7dqHgMnyozinfLT5D_LAdKFfV0Dt_EHHb

o3GGl6xnhDq6P3CVjQHYf32Q7JLPzVlbu8

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-

103 Changes in access to health services during the COVID-19 pandemic: a

 124

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-

managementsystem-software
 125

Appendix A
Gantt Chart
126
 127

Appendix B
Testing and Evaluation Instrument
128
129
 130

Appendix C
Pictures Taken During Testing and Evaluation
 131

Evaluation of Nurse and BNS/BHW

 132

Appendix D
IT Expert’s Profile
133
134
135
136
137
138
139
140
 141

Appendix E
Evaluation Matrix
 142

ISO 25010 EVALUATION RESULT OF NON-IT EXPERTS

CHARACTERISTICS SUB-CHARACTERISTICS 5 4 3 2 1 TALLY MEAN TOTAL MEAN
Functional Completeness 88 121 11 0 0 220 4.35
Functional
Sustainability Functional Correctness 94 107 19 0 0 220 4.34 4.36
Functional Appropriateness 95 117 8 0 0 220 4.40
Time Performance 108 108 4 0 0 220 4.47
Performance
Efficiency Resource Utilization 114 101 5 0 0 220 4.50 4.46
Capacity 101 111 8 0 0 220 4.42
Operability 88 129 3 0 0 220 4.39
Usability
Learnability 83 131 6 0 0 220 4.35 4.38
Understandability 90 128 2 0 0 220 4.40
Maturity 110 108 2 0 0 220 4.56
Reliability
Fault Tolerance 104 112 4 0 0 220 4.45 4.46
Compliance 101 113 6 0 0 220 4.43
Confidentiality 104 115 1 0 0 220 4.47
Security
Integrity 78 142 0 0 0 220 4.35 4.42
Availability 96 124 0 0 0 220 4.44
Hardware 109 108 3 0 0 220 4.48
Compatibility
Software 108 108 4 0 0 220 4.47 4.47
Data 100 120 0 0 0 220 4.46
Adaptability 121 87 12 0 0 220 4.52
Portability
Installability 115 98 7 0 0 220 4.49 4.48
Replaceability 104 108 8 0 0 220 4.44
Analyzability 103 126 9 0 0 220 4.75
Maintainability
Modifiability 108 107 6 0 0 220 4.48 4.54
Testability 96 113 11 0 0 220 4.39

ISO 25010 EVALUATION RESULT OF IT EXPERTS

CHARACTERISTICS SUB-CHARACTERISTICS 5 4 3 2 1 TALLY MEAN TOTAL MEAN
Functional Completeness 6 2 2 0 0 10 4.45
Functional
Sustainability Functional Correctness 3 4 3 0 0 10 4.36 4.56
Functional Appropriateness 3 5 2 0 0 10 4.34
Time Performance 2 2 5 1 0 10 4.37
Performance
Efficiency Resource Utilization 6 1 3 0 0 10 4.52 4.49
Capacity 5 4 1 0 0 10 4.50
Operability 4 4 1 1 0 10 4.32
Usability
Learnability 4 2 4 0 0 10 4.35 4.39
Understandability 2 1 5 1 1 10 4.32
Maturity 4 3 3 0 0 10 4.56
Reliability
Fault Tolerance 5 4 1 0 0 10 4.45 4.54
Compliance 7 2 1 0 0 10 4.41
Confidentiality 7 1 2 0 0 10 4.45
Security
Integrity 5 5 0 0 0 10 4.33 4.61
Availability 6 4 0 0 0 10 4.45
Hardware 3 4 3 0 0 10 4.31
Compatibility
Software 8 2 0 0 0 10 4.56 4.48
Data 3 5 2 0 0 10 4.48
Adaptability 4 2 3 1 0 10 4.38
Portability
Installability 3 3 4 0 0 10 4.36 4.52
 143

Replaceability 3 2 5 0 0 10 4.38
Analyzability 6 3 1 0 0 10 4.52
Maintainability
Modifiability 7 2 1 0 0 10 4.60 4.64
Testability 3 5 1 1 0 10 4.34

Appendix F
User’s Manual
 144

Login Page

1 - Click to add user email.

2 - Click to add the password.

3 - Click to sign up.

4 - Click to select remember the user.

5 - Click to change the password

 145

Menu Page

1 - Click to go to the dashboard page.

2 - Click to go to the residents page.

3 - Click to go to the consultation page.

4 - Click to go to the immunizations page.

5 - Click to go into the natality and mortality page.

6 - Click to go to the user management page.

7 - Click to go into reports page.

8 - Click to go into setting page.

9 - Click to logout to the system.

 146

Dashboard Page

1 - Click to view the total of patient records.

2 - Click to view the total of consultation records.

 147

3 - Click to view the total of immunization records.

4 - Click to view the total of natality and mortality rate.

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.

Residents Page

1 - Click to search resident's name.

2 - Click to select sex.

3 - Click to select a column.

4 - Click to add a new resident record.

5 - Click to view, edit, and delete residents records.

 148

6 - Click to type personal information to update residents records.

7 - Click to submit the record.

8 - Click to cancel.

Consultation Page

1 - Click to search patient name.

 149

2 - Click to select sex.

3 - Click to select a column.

4 - Click to add a new consultation.

5 - Click to view, edit, and delete consultation records.

6 - Click to type personal information to add a new consultation record.

7 - It displays the geographic Information.

 150

8 – Click all the personal medical history, and type down the past surgical history

and date done.

9 – Click all the family medical history and type down the past surgical history and

date done.
 151

10 – Click all the social history.

11 – Click all the immunization vaccine that have been injected into the patient.

12 – Type down all the other immunization vaccines already administered to the

patients.
 152

13 – Click and put all the family planning, menstrual, and pregnancy history.

14 – Type all the patients physical examination.

 153

15 – Click all the patient's pertinent findings per system.

16 – Click all the patient's pertinent findings per system.

 154

17 – Click all the doctor’s assessments.

18 – Type down the other doctor’s assessments.

 155

Immunization Page

1 - Click to search for the patient’s name.

2 - Click to select sex.

3 - Click to select a column.

4 - Click to add a new patient record.

5 - Click to view, edit, and delete patient’s immunization records.

 156

6 – Click and put all the information needed for immunization records for senior

citizens.

7 – Display the card for the senior immunization record.

8 – Click to print the card for the senior immunization record.

9 – Click to back to the senior citizens records.

 157

10 - Click and put all the information needed for immunization records for infants.

11 - Click and put all the information needed for immunization records for infants.
 158

12 - Click and put all the information needed for immunization records for infants.

13 - Click and put all the information needed for immunization records for infants

and click the submit button to officially saved the record.

 159

Natality and Mortality Page

 160

1 – Click to select sex.

2 – Click to select columns.

3 – Click to add a new record.

4 – Click to edit or delete the records of natality and mortality data.

5 – Click and put all the information needed for a new record of death and birth.

User Management Page

 161

1 - Click to see the registered user's record.

2 – Click to select sex.

3 – Click to select columns.

4 - Click to add new users.

5 - Click to update the status of users.

 162

6 – Click and type all the information needed for a new user record.

Report Page

1 - Click to see the name of the patient that has a diagnosis.

2 – Click to see the diagnosis of the patient.

3 – Click to filter the starting date of the patients consulted.

4 - Click to filter to the end date of the patients that the admin want to see.

5 – Click to generate a report

6 – Click to see the history and summary report

 163

7 – Displays the history report of all the patients from the specific date consulted.

8 – Click to be back on the report page.

9 – Click to print the history report.

10 – Displays the summary report of all the patients from the specific date

consulted.
 164

11 – Click to be back on the report page.

12 – Click to print the summary report.

1 – Type all the needed information of the admin/user.

 165

Appendix G
Source Code
 166

LogIn
import { Button, Checkbox, Input, Link } from '@nextui-org/react';
import { signIn, useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import Image from 'next/image';
import { FormEvent, useState } from 'react';
import { useToast } from '@/components/providers/ToastProvider';
import logo from '/public/img/san-nicolas-seal.png';
export default function Login() {
const { addToast } = useToast();
const { status } = useSession();
const router = useRouter();
const [credentials, setCredentials] = useState<{
email: string;
password: string;
}>({
email: '',
password: '',
});
const [loading, setLoading] = useState(false);
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
try {
setLoading(true);
const response = await signIn('credentials', {
redirect: false,
callbackUrl: '/',
...credentials,
});

if (!!!response?.ok) {
throw new Error(response?.error ?? '');
}
// TODO: Check for user role and redirect them to the appropriate page

await router.push('/dashboard');
} catch (err) {
if (err instanceof Error) {
addToast({
message: err.message,
type: 'danger',
});
}
} finally {
setLoading(false);
}
if (status === 'authenticated') {
await router.push('/dashboard').catch((err) => console.log(err));
 167

}
};
return (
<main className="bg-gray-50 dark:bg-gray-900">
<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen
lg:py-0">
<Image
className="w-36 h-36 mb-4"
src={logo}
alt="logo"
width="144"
height="144"
/>
<div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md
xl:p-0 dark:bg-gray-800 dark:border-gray-700">
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl
dark:text-white text-center">
Sign in to your account
</h1>
<form
className="space-y-4 md:space-y-6"
action="#"
method="POST"
// eslint-disable-next-line @typescript-eslint/no-misused-promises
onSubmit={handleSubmit}
>
<Input
type="email"
label="Your email"
labelPlacement="outside"
placeholder="[email protected]"
onChange={(e) =>
setCredentials((prev) => ({
...prev,
email: e.target.value,
}))
}
value={credentials.email}
required
/>
<Input
type="password"
label="Your password"
labelPlacement="outside"
placeholder="••••••••"
onChange={(e) =>
setCredentials((prev) => ({
 168

...prev,
password: e.target.value,
}))
}
value={credentials.password}
required
/>
<div className="flex items-center justify-between">
<Checkbox size="sm">Remember me</Checkbox>
<Link href="/auth/forgot-password" size="sm">
Forgot password?
</Link>
</div>
<Button
type="submit"
color="primary"
radius="sm"
isLoading={loading}
disabled={loading}
fullWidth
>
Sign in
</Button>
</form>
</div>
</div>
</div>
</main>
);
}

Consultation
import {
Button,
Chip,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownSection,
DropdownTrigger,
Input,
Pagination,
Selection,
SortDescriptor,
Spinner,
Table,
TableBody,
TableCell,
 169

TableColumn,
TableHeader,
TableRow,
User,
useDisclosure,
import { useToast } from '@/components/providers/ToastProvider';
import ViewConsultations from
'@/components/reusables/Modals/Consultations/ViewConsultations';
const COLUMNS: Column[] = [
{ name: 'ID', uid: 'id', sortable: false },
{ name: 'NAME', uid: 'name', sortable: true },
{ name: 'SEX', uid: 'sex', sortable: false },
{ name: 'FIRST VISIT', uid: 'firstVisit', sortable: true },
{ name: 'RECENT VISIT', uid: 'dateEncountered', sortable: true },
{ name: 'DIAGNOSIS', uid: 'diagnosis', sortable: false },
{ name: 'ACTIONS', uid: 'actions', sortable: false },
];
type ColumnType = (typeof COLUMNS)[number]['uid'];

const INITIAL_VISIBLE_COLUMNS: ColumnType[] = [

'name',
'dateEncountered',
'diagnosis',
'actions',
];
const sexOptions = [
{ name: 'Male', uid: 'Male' },
{ name: 'Female', uid: 'Female' },
];
export default function Consultations() {
const [filterValue, setFilterValue] = useState('');
const debouncedFilterValue = useDebounce<string>(filterValue);
const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
const [visibleColumns, setVisibleColumns] = useState<Selection>(
new Set(INITIAL_VISIBLE_COLUMNS),
);
const [sexFilter, setSexFilter] = useState<Selection>('all');
const [limit, setLimit] = useState<Key>(10);
const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
column: 'age',
direction: 'ascending',
});
const [page, setPage] = useState(1);
});
const pages = data?.totalPages ?? 1;
const headerColumns: Column[] = useMemo(() => {
if (visibleColumns === 'all') return COLUMNS;
 170

return COLUMNS.filter((column) =>

Array.from(visibleColumns).includes(column.uid),
);
}, [visibleColumns]);

const filteredItems = useMemo(() => {

let filteredData = [...(data?.data ?? [])];

if (
sexFilter !== 'all' &&
Array.from(sexFilter).length !== sexOptions.length
){
filteredData = filteredData.filter((data) =>
Array.from(sexFilter).includes(data?.sex ?? ''),
);
}

return filteredData;
}, [sexFilter, data?.data]);

const onSearchChange = useCallback((value?: string) => {

if (value) {
setFilterValue(value);
setPage(1);
} else {
setFilterValue('');
}
}, []);

const onClear = useCallback(() => {

setFilterValue('');
setPage(1);
}, []);

const handleDeleteConsultation = async (id: string) => {

if (!confirm('Are you sure you want to delete this record?')) {
return;
}
try {
await tConsultationDeleteById.mutateAsync({ id });

addToast({
message: 'Successfully deleted a consultation.',
type: 'success',
});
} catch (err) {
if (err instanceof Error) {
addToast({
 171

message: err.message,
type: 'danger',
});
}
}
};
const topContent = (
<div className="flex flex-col gap-4">
</DropdownTrigger>
<DropdownMenu
disallowEmptySelection
aria-label="Sex Filters"
closeOnSelect={false}
selectedKeys={sexFilter}
selectionMode="multiple"
onSelectionChange={setSexFilter}
>
{sexOptions.map((status) => (
<DropdownItem key={status.uid} className="capitalize">
{(status.name ?? '').toUpperCase()}
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
<Dropdown>
<DropdownTrigger className="hidden sm:flex">
<Button endContent={<MdExpandMore />} variant="flat">
Columns
</Button>
</DropdownTrigger>
<DropdownMenu
aria-label="Table Columns"
disallowEmptySelection
closeOnSelect={false}
selectedKeys={visibleColumns}
selectionMode="multiple"
onSelectionChange={setVisibleColumns}
>
{COLUMNS.map((column) => (
<DropdownItem key={column.uid} className="capitalize">
{(column.name ?? '').toUpperCase()}
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
<Button
color="primary"
endContent={<MdAdd />}
 172

onPress={() => {
const bottomContent = (
<div className="py-2 px-2 flex justify-between items-center">
<Dropdown placement="bottom-start">
<DropdownTrigger className="hidden sm:flex">
<Button endContent={<MdExpandMore />} variant="flat">
{limit.toString()} per page
</Button>
</DropdownTrigger>
<DropdownMenu
aria-label="Table row per page"
selectionMode="multiple"
selectedKeys={[limit.toString()] as Iterable<Key>}
onAction={(key) => {
setLimit(Number(key));
setPage(1);
}}
>
<DropdownSection title="Rows per page">
{[10, 25, 50, 100].map((value) => (
<DropdownItem key={value} textValue={`${value} per page`}>
{value} / page
</DropdownItem>
type Item = inferProcedureOutput<
AppRouter['consultations']['read']
>['data'][number];

const renderCell = useCallback((patient: Item, columnKey: Key) => {

const firstVisit = [...patient.consultations].pop();
const lastVisit = patient.consultations[0] ?? undefined;

switch (columnKey) {
case 'name':
return (
<User
avatarProps={{
radius: 'lg',
fallback: <Initials value={patient?.full_name ?? ''} />,
}}
description={
patient?.birth_date
? moment(patient?.birth_date).format('MMM. DD, YYYY')
: ''
}
name={patient?.full_name ?? ''}
>
{patient?.first_name ?? ''}
</User>
 173

);
case 'firstVisit':
return firstVisit
? moment(firstVisit.created_at).format('MMM. DD, YYYY')
: '';
case 'dateEncountered':
return lastVisit
? moment(lastVisit.created_at).format('MMM. DD, YYYY')
color="primary" variant="light">
<MdMoreVert className="text-lg" />
</Button>
</DropdownTrigger>
<DropdownMenu aria-label="Table Actions">
<DropdownItem
onPress={() => {
setSelectedId(patient.id);
onViewOpen();
}}
>
View
</DropdownItem>
<DropdownItem
onPress={() =>
<TableCell>{renderCell(item, columnKey)}</TableCell>
)}
</TableRow>
)}
</TableBody>
</Table>
<AddConsultation isOpen={isOpen} onOpenChange={onOpenChange} />
<ViewConsultations
isOpen={isViewOpen}
onOpenChange={onViewOpenChange}
patientId={selectedId}
/>
</MainLayout>
</ConsultationProvider>
);
}

Dashboard
import { Link } from '@nextui-org/react';
import {
LuActivity,
LuArrowDown,
LuArrowUp,
LuClipboard,
LuFrown,
 174

LuPill,
} from 'react-icons/lu';

import cn from 'classnames';

import {
Chart as ChartJS,
ArcElement,
Tooltip,
Legend,
CategoryScale,
LinearScale,
BarElement,
Title,
} from 'chart.js';

import { Pie, Bar } from 'react-chartjs-2';

ChartJS.register(
ArcElement,
Tooltip,
Legend,
CategoryScale,
LinearScale,
BarElement,
Title,
);

import MainLayout from '@/components/layouts/MainLayout';

import { trpc } from '@/utils/trpc';

const labels = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
];
export default function Dashboard() {
const { data: dashboardData } = trpc.dashboard.stats.useQuery();
const { data: dashboardGraph } = trpc.dashboard.graphs.useQuery();
 175

return (
<MainLayout>
<h2 className="text-medium font-semibold mb-4">Last 30 days</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
<div className="rounded-lg overflow-hidden bg-white dark:border shadow dark:bg-inherit
dark:border-gray-600">
<div className="px-5 py-4">
<div className="grid grid-cols-[auto_1fr] gap-4">
<span className="rounded-lg bg-slate-500 w-12 h-12 grid justify-center items-center
text-white text-xl">
<LuActivity />
</span>
<div>
<h3 className="text-gray-400 font-medium text-sm">
Total Patients
</h3>
<div className="flex items-end gap-2">
<p className="text-2xl font-bold leading-tight">
{dashboardData?.patient_current ?? 0}
</p>
<div
className={cn({
'flex gap-1': true,
'text-green-400':
(dashboardData?.patient_current ?? 0) >=
(dashboardData?.patient_previous ?? 0),
'text-red-400':
(dashboardData?.patient_current ?? 0) <
(dashboardData?.patient_previous ?? 0),
})}
>
{(dashboardData?.patient_current ?? 0) >=
(dashboardData?.patient_previous ?? 0) ? (
<LuArrowUp />
):(
<LuArrowDown />
)}
<span className="text-sm">
{(dashboardData?.patient_current ?? 0) -
(dashboardData?.patient_previous ?? 0)}
</span>
<div className="px-5 py-3 bg-gray-50 dark:bg-gray-800">
<Link href="/patients" size="sm">
View all
bg-white dark:border shadow dark:bg-inherit dark:border-gray-600">
<div className="px-5 py-4">
<div className="grid grid-cols-[auto_1fr] gap-4">
 176

<span className="rounded-lg bg-slate-500 w-12 h-12 grid justify-center items-center

text-white text-xl">
<LuClipboard />
</span>
<div>
<h3 className="text-gray-400 font-medium text-sm">
Total Consultations
</h3>
<div className="flex items-end gap-2">
<p className="text-2xl font-bold leading-tight">
{dashboardData?.consultation_current ?? 0}
</p>
<div
className={cn({
'flex gap-1': true,
'text-green-400':
(dashboardData?.consultation_current ?? 0) >=
(dashboardData?.consultation_previous ?? 0),
'text-red-400': (dashboardData?.consultation_current ?? 0) <
(dashboardData?.consultation_previous ?? 0),
})}
>
{(dashboardData?.consultation_current ?? 0) >= (dashboardData?.consultation_previous
?? 0) ? (
<LuArrowUp />
):(
<LuArrowDown />
)}
<span className="text-sm">
{(dashboardData?.consultation_current ?? 0) -
(dashboardData?.consultation_previous ?? 0)}
-800">
<Link href="/consultations" size="sm">
View all
rounded-lg overflow-hidden bg-white dark:border shadow dark:bg-inherit dark:border-gray-
600">
<div className="px-5 py-4">
<div className="grid grid-cols-[auto_1fr] gap-4">
<span className="rounded-lg bg-slate-500 w-12 h-12 grid justify-center items-center
text-white text-xl">
<LuPill />
</span>
<div>
<h3 className="text-gray-400 font-medium text-sm">
Total Immunizations
</h3>
<div className="flex items-end gap-2">
<p className="text-2xl font-bold leading-tight">
 177

{(dashboardData?.infant_current ?? 0) + (dashboardData?.senior_citizen_current ?? 0)}

(dashboardData?.infant_current ?? 0) + (dashboardData?.senior_citizen_current ??
0) >=
(dashboardData?.infant_previous ?? 0) +
(dashboardData?.senior_citizen_previous ?? 0),
(dashboardData?.senior_citizen_current ?? 0) -
((dashboardData?.infant_previous ?? 0) +
(
<div className="rounded-lg overflow-hidden bg-white dark:border shadow dark:bg-inherit
dark:border-gray-600">
<div className="px-5 py-4">
<div className="grid grid-cols-[auto_1fr] gap-4">
<span className="rounded-lg bg-red-500 w-12 h-12 grid justify-center items-center
text-white text-xl">
<LuFrown />
</span>
<div>
<h3 className="text-gray-400 font-medium text-sm">
Total Deaths
</h3>
(dashboardData?.death_previous ?? 0),
'text-green-400':
(dashboardData?.death_current ?? 0) <
(dashboardData?.death_previous ?? 0),
})}
>
{(dashboardData?.death_current ?? 0) >=
(dashboardData?.death_previous ?? 0) ? (
<LuArrowUp />
):(
<LuArrowDown />
)}
<span className="text-sm">
{(dashboardData?.death_current ?? 0) -
(dashboardData?.death_previous ?? 0)}
<div className="px-5 py-3 bg-gray-50 dark:bg-gray-800">
<Link href="/death-rate" size="sm">
="rounded-lg overflow-hidden bg-white dark:border shadow dark:bg-inherit dark:border-gray-
600 mb-4">
<div className="px-5 py-4">
<h3 className="text-gray-400 font-medium text-sm mb-4">
Natality and Mortality
</h3>
{
label: 'Natality',
data:
dashboardGraph?.death_rates.natality ?? Array(12).fill(0),
backgroundColor: 'rgba(255, 99, 132, 0.5)',
 178

},
{
label: 'Mortality',
data:
dashboardGraph?.death_rates.mortality ?? Array(12).fill(0),
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
],

Appendix H
Curriculum Vitae
179
180
181
182
183
184