Outline of Whole Project

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 58

SR NO. DESCRIPTION PAGE NO.

Introduction -
1.1 Purpose 2
1 1.2 Scope 2
1.3 Definition, Acronyms, Abbreviations 2
1.4 Ovaries 2
Introduction -
2 2.1 About Institute 4
2.2 About Companies 5
Software Requirement Specification -
3.1 Product Perspective
3.1.1 System Inference
3.1.2 System Specifications
3
3.1.2.1 H/W Requirement
3.1.2.2 S/W Requirement
3.1.3 Communication Interfaces
3.2 Product Function
Functional Specification
4 4.1 User Of The System
4.2 Module Of The System
System Design
5 5.1 Data Flow Diagram
5.2 ER Diagram
Backend Development
6.1 Routes Appointment Router, Message Router,
6 User Router
6.2 Model appointmentSchema, messageSchema,
userSchema
Frontend Developement
7.1 AboutUs.jsx
7.2 Appoitment.jsx
7
7.3 Home.jsx
7.4 Login.jsx
7.5 Register.jsx
Dashboard Development
8.1 AddNewAdmin.jsx
8.2 AddNewDoctor.jsx
8.3 Dashboard.jsx
8
8.4 Doctors.jsx
8.5 Login.jsx
8.6 Messages.jsx
8.7 Sidebar.jsx
9 Result & Discussion
10 Conclusion

P a g e 1 | 58
1.1 PURPOSE:
This software will help the company to be more efficient in registration of their patients and manage
appointments, records of patients. It enables doctors and admin to view and modify appointments
schedules if required. The purpose of this project is to computerize all details regarding patient details
and hospital details.

1.2 SCOPE:
The system will be used as the application that serves hospitals, clinic, dispensaries or other health
institutions. The intention of the system is to increase the number of patients that can be treated and
managed properly. If the hospital management system is file based, management of the hospital has to
put much effort on securing the files. They can be easily damaged by fire, insects and natural
disasters. Also could be misplaced by losing data and information.

1.3 DEFINITIONS, ACRONYMS, and ABBREVIATIONS

1. Cardiologist - treats heart disease.

2. Pediatrician - treats infants, toddlers, children and teenagers.

3. Plastic Surgeon - restores, reconstructs, corrects or improves in the shape and appearance of damaged
body structures, especially the face.

4. Psychiatrist - treats patients with mental and emotional disorders.

5. Ophthalmologist - treats eye defects, injuries, and diseases

6. ENT- Ear, Nose and Throat Specialist.

1.4 OVERVIEW

Our application contains two modules – the admin module and the user module. Our application will not
only help the admin to preview the monthly and/or yearly data but it will also allow them to edit, add or
update records. The software will also help the admin to monitor the transactions made by the patients
and generate confirmations for the same. The admin will be able to manage and update information about
doctors.

The user module can be accessed by both the doctors and the patients. The doctor can confirm and/or
cancel appointments. The doctors can even add prescriptions for their patients using our application. The
patients will be able to apply for the appointment and make transaction for the same, and can even cancel
appointments with the doctors. They can track details about the previous transactions made by them.

Advantages:

P a g e 2 | 58
 The system automates the manual procedure of managing hospital activities.

 Doctors can view their patients’ treatment records and details easily.

 The system is convenient and flexible to be used.

 It saves their time, efforts and resources.

Disadvantages

 Requires large database.

 The admin has to manually keep updating the information by entering the details in the system.

 Need Internet connection.

P a g e 3 | 58
2.1 About Institute:

BCA (Bachelor of Computer Application) is 3 years (6 semesters) full time program run by Silver Oak
University. It is a professional undergraduate program which focuses mainly on computer application
concepts. The course is designed to guide the student from basic concepts to train them up to the recent
advanced technological practices in the industries. Imparting the latest required technical skill set through
hands-on Hi-tech IT laboratories experiences is emphasized at every stage of the program and brings
awareness to the future prospects in the modern IT world.

The course is designed to provide step by step basic and advance technical knowledge along with hand
on experience useful in computer industry. The course develops computer professionals, with strong
fundamental knowledge, understanding of recent development tools used in computer industry, also
creates foundation of future research.

The syllabus of B.C.A. is design by Silver Oak College of Computer Application (SOCCA), Silver
Oak University which include strong practical syllabus as per demand of global market and theory
syllabus including technology of hardware and software.

Silver Oak College of Computer Applications (SOCCA) was established in the year 2019. With the
University’s expansion and steady growth, Department of Computer Applications aims to prepare
students for corporate life through contemporary academic rigor, which shall build their competence in
various Computer Applications discipline. Silver Oak University (SOU) has made an attempt to look
forward to bridge the gap between the academic degree and the corporate industry requirements thus
enable the students to achieve excellence in every aspect of life.

Courses:-

 Bachelor of Computer Application(BCA)

 Bachelor of Science in (CS/IT)

 Integrated M.Sc. (Information Technology)

 Master of Computer Application(MCA)

 Master of Science in Information Technology(M.Sc.-IT)

 Cyber Security & Digital Forensics(M.Sc.-IT)

P a g e 4 | 58
2.2 About Companies:

TECH AMDAVAD LLP.

CIN:-ACA-8799

Tech Amdavad LLP specialize in developing custom software for enterprise, web and mobile platforms.
Our focus is constantly on delivering innovative, yet simple and costeffective software solutions that
provide real business value to our customers. We pride ourselves on being able to interpret and anticipate
our customers' needs and deliver a solution that exceeds their expectations.

ADDRESS:

5/1,5TH FLOOR,

NAGINDAS CHAMBERS,

OPP. AUDA OFFCE, USMANPURA,

ASHARAMROAD, AHMEDABAD,

380013, BHARAT.

P a g e 5 | 58
Software Requirement Specification

3.1 Product Perspective

This Hospital Patient Info Management System is a self-contained system that manages activities of the
hospital. Due to improperly managed details medical center faces quite a lot of difficulties in accessing
past data as well as managing present data. The fully functional automated hospital management system
which will be developed through this project will eliminate the disadvantages caused by the manual
system by improving the reliability, efficiency and performance. The usage of a database to store patient,
employee, stock details etc. will accommodate easy access, retrieval, and search and manipulation of data.
The access limitations provided through access privilege levels will enhance the security of the system.
The system will facilitate concurrent access and convenient management of activities of the medical
center.

3.1.1 System Interfaces

User Interfaces

 This section provides a detailed description of all inputs into and outputs from the system. It also
gives a description of the hardware, software and communication interfaces and provides basic
prototypes of the user interface.
 The protocol used shall be HTTP.
 The Port number used will be 4000.
 There shall be logical address of the system in IPv4 format.

Hardware Interfaces

 Laptop/Desktop PC-Purpose of this is to give information when Patients ask information about
doctors, medicine available lab tests etc. To perform such Action it need very efficient computer
otherwise due to that reason patients have to wait for a long time to get what they ask for.
 Wi-Fi router - Wi-Fi router is used to for internetwork operations inside of a hospital and simply
data transmission from pc’s to sever.

Software Interfaces

 MongoDB Cloud - Database connectivity and management .


 OS Windows 10/11- Very user friendly and common OS.

3.1.2 System Specifications

P a g e 6 | 58
3.1.2.1 H/W Requirement

 Core i5 processor
 2GB Ram.
 20GB of hard disk space in terminal machines
 1TB hard disk space in Server Machine

3.1.2.2 S/W Requirement

 Windows 10 or above operating system


 Mongodb Cloud

3.1.3 Communication Interfaces

 NIC (Network Interface Card) – It is a computer hardware component that allows a computer
to connect to a network. NICs may be used for both wired and wireless connections.
 TCP/IP protocol- Internet service provider to access and share information over the Internet.

2.2 Product functions

 Provide access to registered users only.


 Registration of new patients.
 Enable patient to view their record.
 Enable patient to update their record.
 Generate appointment date and timing.
 Confirmation by doctor.
 Modification in schedule by patient.
 Admin access to patient’s record.
 Admin can view monthly/yearly records.

Functional Specification

P a g e 7 | 58
4.1 USER OF THE SYSTEM:

ADMIN:

 Manages user accounts (adding/removing/editing doctors, patients, or other staff).


 Configures system settings and access permissions.
 Generates reports and analyzes system data.
 May have access to advanced features like system logs or audit trails.
 May be able to create system announcements or educational resources accessible to patients or
doctors (potentially related to "message learn").

DOCTOR:

 Reviews and approves/denies appointment requests.


 Manages their appointments and patient schedules.
 Views and updates patient medical records.
 Sends messages to patients for appointment reminders, test results, or follow-up instructions.

PATIENT:

 Makes appointment requests through the system.


 Views and manages their appointments.
 Accesses medical records (potentially with limitations).
 Sends messages to doctors or the hospital for non-urgent inquiries (refer to "message learn"
point).
 May be able to update some personal information (depending on system design).

4.2 MODULE OF THE SYSTEM:

REGISTRATION:

P a g e 8 | 58
 Users can register for the system by providing necessary information such as:
 Full name
 Email address
 Password
 Phone
 adharNumber
 Additional details like Dob, gender

LOGIN:

 Registered users can log in to the system using their credentials (email and password and
Confirmpassword).
 The system verifies the provided login credentials against the stored user data.
 If the credentials are valid, the user gains access to their account and the system's features.

5. SYSTEM DESIGN

P a g e 9 | 58
5.1Data Flow Diagram

 Class Diagram

P a g e 10 | 58
P a g e 11 | 58
 Sequence Diagram

P a g e 12 | 58
Use Case Diagram:

Entity Relationship Diagram


P a g e 13 | 58
 Deployment Diagram:

P a g e 14 | 58
Backend development:

6.1 Router:
P a g e 15 | 58
6.1.1 APPOINTMENTROUTER

First, express.js module was imported and assigned to a variable “express”. Then, the other line of code

creates an instance of the express application by calling express function.

/post (POST): Creates a new appointment (requires patient authentication).

/getall (GET): Retrieves all appointments (requires admin authentication).

/update/:id (PUT): Updates the status of a specific appointment (requires admin authentication). Path
variable :id identifies the appointment.

/delete/:id (DELETE): Deletes a specific appointment (requires admin authentication). Path variable :id
identifies the appointment.

6.1.2 MESSAGEROUTER:

P a g e 16 | 58
/send (POST): Sends a message (details on sender/recipient/content not specified).

- Functionality might depend on user roles and authorization (not provided).

/getall (GET): Retrieves all messages (requires admin authentication).

- Likely used for administrative purposes or message history management.

P a g e 17 | 58
6.1.3 USERROUTER:

Registration:

- Patients: POST /patient/register (patient registration function)

Login:

- All users: POST /login (handles login for patients, admins, and potentially doctors)

Admin Privileged Actions:

- New Admin: POST /admin/addnew (requires admin authentication to add new admins)

- New Doctor: POST /doctor/addnew (requires admin authentication to add new doctors)

- All Doctors: GET /doctors (retrieves a list of all doctors)

User Information:

P a g e 18 | 58
- Patient Details: GET /patient/me (requires patient authentication to access their data)

- Admin Details: GET /admin/me (requires admin authentication to access their data)

Logout:

- Patient Logout: GET /patient/logout (requires patient authentication to log out)

- Admin Logout: GET /admin/logout (requires admin authentication to log out)

6.2MODELS

6.2.1 AppointmentSchema:
7 const appointmentSchema = new mongoose.Schema({
8 firstName: {
9 type: String,
10 required: [true, "First Name Is Required!"],
11 minLength: [3, "First Name Must Contain At Least 3 Characters!"],
12 },
13 lastName: {
14 type: String,
15 required: [true, "Last Name Is Required!"],
16 minLength: [3, "Last Name Must Contain At Least 3 Characters!"],
17 },
18 email: {
19 type: String,
20 required: [true, "Email Is Required!"],
21 validate: [validator.isEmail, "Provide A Valid Email!"],
22 },
23 phone: {
24 type: String,
25 required: [true, "Phone Is Required!"],
26 minLength: [10, "Phone Number Must Contain Exact 11 Digits!"],
27 maxLength: [10, "Phone Number Must Contain Exact 11 Digits!"],
28 },
29 adharNumber: {
30 type: String,
31 required: [true, "adharNumber Is Required!"],
32 minLength: [12, "adharNumber Must Contain Only 12 Digits!"],
33 maxLength: [12, "adharNumber Must Contain Only 12 Digits!"],
34 },
35 dob: {
36 type: Date,
37 required: [true, "DOB Is Required!"],
38 },
P a g e 19 | 58
39 gender: {
40 type: String,
41 required: [true, "Gender Is Required!"],
42 enum: ["Male", "Female"],
43 },
44 appointment_date: {
45 type: String,
46 required: [true, "Appointment Date Is Required!"],
47 },
48 department: {
49 type: String,
50 required: [true, "Department Name Is Required!"],
51 },
52 doctor: {
53 firstName: {
54 type: String,
55 required: [true, "Doctor Name Is Required!"],
56 },
57 lastName: {
58 type: String,
59 required: [true, "Doctor Name Is Required!"],
60 },
61 },
62 hasVisited: {
63 type: Boolean,
64 default: false,
65 },
66 address: {
67 type: String,
68 required: [true, "Address Is Required!"],
69 },
70 doctorId: {
71 type: mongoose.Schema.ObjectId,
72 required: [true, "Doctor Id Is Invalid!"],
73 },
74 patientId: {
75 type: mongoose.Schema.ObjectId,
76 ref: "User",
77 required: [true, "Patient Id Is Required!"],
78 },
79 status: {
80 type: String,
81 enum: ["Pending", "Accepted", "Rejected"],
82 default: "Pending",
83 },
P a g e 20 | 58
84 });
85

Patient Information:

 First Name (required, min 3 characters)


 Last Name (required, min 3 characters)
 Email (required, validated)
 Phone Number (required, 10 digits)
 Aadhar Number (required, 12 digits)
 Date of Birth (required)
 Gender (required, "Male" or "Female")
 Address (required)
 Patient ID (required, references "User" model)

Appointment Details:

 Appointment Date (required, format not specified)


 Department (required)
 Doctor Name (required, first and last name) - Potentially references another model
 Has Visited (boolean, default: false)
 Status (required, "Pending", "Accepted", or "Rejected")

Relationships:

 Doctor ID (required, references another model - not explicitly defined here)

Frontend development

P a g e 21 | 58
6.2.2 MessageSchema:

const messageSchema = new mongoose.Schema({


firstName: {
type: String,
required: true,
minLength: [3, "First Name Must Contain At Least 3 Characters!"],
},
lastName: {
type: String,
required: true,
minLength: [3, "Last Name Must Contain At Least 3 Characters!"],
},
email: {
type: String,
required: true,
validate: [validator.isEmail, "Provide A Valid Email!"],
},
phone: {
type: String,
required: true,
minLength: [10, "Phone Number Must Contain Exact 11 Digits!"],
maxLength: [10, "Phone Number Must Contain Exact 11 Digits!"],
},
message: {
type: String,
required: true,
minLength: [10, "Message Must Contain At Least 10 Characters!"],
},
});

export const Message = mongoose.model("Message", messageSchema);

P a g e 22 | 58
Sender Information (likely Patient or Doctor):

 First Name (required, min 3 characters)


 Last Name (required, min 3 characters)
 Email (required, validated)
 Phone Number (required, 10 digits)

Message Content:

Message Body (required, min 10 characters)

Note:

The schema doesn't explicitly define who sends/receives messages.

Additional fields like timestamps or recipient information might be present in the full schema, but aren't
shown here.

6.2.3UserSchema:

const userSchema = new mongoose.Schema({


firstName: {
type: String,
required: [true, "First Name Is Required!"],
minLength: [3, "First Name Must Contain At Least 3 Characters!"],
},
lastName: {
type: String,
required: [true, "Last Name Is Required!"],
minLength: [3, "Last Name Must Contain At Least 3 Characters!"],
},
email: {
type: String,
required: [true, "Email Is Required!"],
validate: [validator.isEmail, "Provide A Valid Email!"],
},
phone: {
type: String,
required: [true, "Phone Is Required!"],
minLength: [10, "Phone Number Must Contain Exact 11 Digits!"],

P a g e 23 | 58
maxLength: [10, "Phone Number Must Contain Exact 11 Digits!"],
},
adharNumber: {
type: String,
required: [true, "adharNumber Is Required!"],
minLength: [12, "adharNumber Must Contain Only 12 Digits!"],
maxLength: [12, "adharNumber Must Contain Only 12 Digits!"],
},
dob: {
type: Date,
required: [true, "DOB Is Required!"],
},
gender: {
type: String,
required: [true, "Gender Is Required!"],
enum: ["Male", "Female"],
},
password: {
type: String,
required: [true, "Password Is Required!"],
minLength: [8, "Password Must Contain At Least 8 Characters!"],
select: false,
},
role: {
type: String,
required: [true, "User Role Required!"],
enum: ["Patient", "Doctor", "Admin"],
},
doctorDepartment: {
type: String,
},
docAvatar: {
public_id: String,
url: String,
},
});

Basic Information (required):

 First Name (min 3 characters)


 Last Name (min 3 characters)
 Email (validated)
 Phone Number (10 digits)

P a g e 24 | 58
 Aadhar Number (12 digits)
 Date of Birth
 Gender ("Male" or "Female")
 Password (min 8 characters, excluded from user selections)
 User Role ("Patient", "Doctor", or "Admin")

Optional Doctor-Specific Fields:

 Doctor Department
 Doctor Avatar details (public ID and URL)

7. Frontend Development

7.1 AboutUs.jsx

import React from "react";

P a g e 25 | 58
import Hero from "../components/Hero";
import Biography from "../components/Biography";
const AboutUs = () => {
return (
<>
<Hero
title={"Learn More About Us | Lifecare Medical Institute"}
imageUrl={"/about.png"}
/>
<Biography imageUrl={"/whoweare.png"} />
</>
);
};

export default AboutUs;

7.2 Appointment.jsx

import React from "react";


import Hero from "../components/Hero";
import AppointmentForm from "../components/AppointmentForm";

const Appointment = () => {


return (
<>
<Hero
title={"Schedule Your Appointment | Lifecare Medical Institute"}
imageUrl={"/signin.png"}
/>
<AppointmentForm/>
</>
);
};

export default Appointment;

7.3 Home.jsx

import React, { useContext } from "react";


import Hero from "../components/Hero";

P a g e 26 | 58
import Biography from "../components/Biography";
import MessageForm from "../components/MessageForm";
import Departments from "../components/Departments";

const Home = () => {


return (
<>
<Hero
title={
"Welcome to Lifecare Medical Institute | Your Trusted Healthcare Provider"
}
imageUrl={"/hero.png"}
/>
<Biography imageUrl={"/about.png"} />
<Departments />
<MessageForm />
</>
);
};

export default Home;

7.4 Login.jsx

import axios from "axios";


import React, { useContext, useState } from "react";
import { toast } from "react-toastify";
import { Context } from "../main";
import { Link, useNavigate, Navigate } from "react-router-dom";

const Login = () => {


const { isAuthenticated, setIsAuthenticated } = useContext(Context);

const [email, setEmail] = useState("");


const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");

const navigateTo = useNavigate();

const handleLogin = async (e) => {


e.preventDefault();
try {
await axios

P a g e 27 | 58
.post(
"http://localhost:4000/api/v1/user/login",
{ email, password, confirmPassword, role: "Patient" },
{
withCredentials: true,
headers: { "Content-Type": "application/json" },
}
)
.then((res) => {
toast.success(res.data.message);
setIsAuthenticated(true);
navigateTo("/");
setEmail("");
setPassword("");
setConfirmPassword("");
});
} catch (error) {
toast.error(error.response.data.message);
}
};

if (isAuthenticated) {
return <Navigate to={"/"} />;
}

return (
<>
<div className="container form-component login-form">
<h2>Sign In</h2>
<p>Please Login To Continue</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat culpa
voluptas expedita itaque ex, totam ad quod error?
</p>
<form onSubmit={handleLogin}>
<input
type="text"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
P a g e 28 | 58
onChange={(e) => setPassword(e.target.value)}
/>
<input
type="password"
placeholder="Confirm Password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
<div
style={{
gap: "10px",
justifyContent: "flex-end",
flexDirection: "row",
}}
>
<p style={{ marginBottom: 0 }}>Not Registered?</p>
<Link
to={"/register"}
style={{ textDecoration: "none", color: "#271776ca" }}
>
Register Now
</Link>
</div>
<div style={{ justifyContent: "center", alignItems: "center" }}>
<button type="submit">Login</button>
</div>
</form>
</div>
</>
);
};

export default Login;

7.5 Register.jsx

import axios from "axios";


import React, { useContext, useState } from "react";

P a g e 29 | 58
import { toast } from "react-toastify";
import { Context } from "../main";
import { Link, Navigate, useNavigate } from "react-router-dom";

const Register = () => {


const { isAuthenticated, setIsAuthenticated } = useContext(Context);

const [firstName, setFirstName] = useState("");


const [lastName, setLastName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [adharNumber, setadharNumber] = useState("");
const [dob, setDob] = useState("");
const [gender, setGender] = useState("");
const [password, setPassword] = useState("");

const navigateTo = useNavigate();

const handleRegistration = async (e) => {


e.preventDefault();
try {
await axios
.post(
"http://localhost:4000/api/v1/user/patient/register",
{ firstName, lastName, email, phone, adharNumber, dob, gender, password },
{
withCredentials: true,
headers: { "Content-Type": "application/json" },
}
)
.then((res) => {
toast.success(res.data.message);
setIsAuthenticated(true);
navigateTo("/");
setFirstName("");
setLastName("");
setEmail("");
setPhone("");
setadharNumber("");
setDob("");
setGender("");
setPassword("");
});
} catch (error) {
toast.error(error.response.data.message);
P a g e 30 | 58
}
};

if (isAuthenticated) {
return <Navigate to={"/"} />;
}

return (
<>
<div className="container form-component register-form">
<h2>Sign Up</h2>
<p>Please Sign Up To Continue</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat culpa
voluptas expedita itaque ex, totam ad quod error?
</p>
<form onSubmit={handleRegistration}>
<div>
<input
type="text"
placeholder="First Name"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
/>
<input
type="text"
placeholder="Last Name"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
/>
</div>
<div>
<input
type="text"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="number"
placeholder="Mobile Number"
value={phone}
onChange={(e) => setPhone(e.target.value)}
/>
</div>
P a g e 31 | 58
<div>
<input
type="number"
placeholder="adharNumber"
value={adharNumber}
onChange={(e) => setadharNumber(e.target.value)}
/>
<input
type={"date"}
placeholder="Date of Birth"
value={dob}
onChange={(e) => setDob(e.target.value)}
/>
</div>
<div>
<select value={gender} onChange={(e) => setGender(e.target.value)}>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div
style={{
gap: "10px",
justifyContent: "flex-end",
flexDirection: "row",
}}
>
<p style={{ marginBottom: 0 }}>Already Registered?</p>
<Link
to={"/signin"}
style={{ textDecoration: "none", color: "#271776ca" }}
>
Login Now
</Link>
</div>
<div style={{ justifyContent: "center", alignItems: "center" }}>
<button type="submit">Register</button>
</div>
P a g e 32 | 58
</form>
</div>
</>
);
};

export default Register;

8. Dashboard Development

8.1 AddNewAdmin.jsx

import React, { useContext, useState } from "react";


import { Context } from "../main";
import { Navigate, useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import axios from "axios";

const AddNewAdmin = () => {


const { isAuthenticated, setIsAuthenticated } = useContext(Context);

const [firstName, setFirstName] = useState("");


const [lastName, setLastName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [adharNumber, setadharNumber] = useState("");
const [dob, setDob] = useState("");
const [gender, setGender] = useState("");
const [password, setPassword] = useState("");

const navigateTo = useNavigate();

const handleAddNewAdmin = async (e) => {


e.preventDefault();
try {
await axios
.post(
"http://localhost:4000/api/v1/user/admin/addnew",
{ firstName, lastName, email, phone, adharNumber, dob, gender, password },
{
withCredentials: true,
headers: { "Content-Type": "application/json" },
P a g e 33 | 58
}
)
.then((res) => {
toast.success(res.data.message);
setIsAuthenticated(true);
navigateTo("/");
setFirstName("");
setLastName("");
setEmail("");
setPhone("");
setadharNumber("");
setDob("");
setGender("");
setPassword("");
});
} catch (error) {
toast.error(error.response.data.message);
}
};

if (!isAuthenticated) {
return <Navigate to={"/login"} />;
}

return (
<section className="page">
<section className="container form-component add-admin-form">
<img src="/logo.png" alt="logo" className="logo"/>
<h1 className="form-title">ADD NEW ADMIN</h1>
<form onSubmit={handleAddNewAdmin}>
<div>
<input
type="text"
placeholder="First Name"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
/>
<input
type="text"
placeholder="Last Name"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
/>
</div>
<div>
P a g e 34 | 58
<input
type="text"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="number"
placeholder="Mobile Number"
value={phone}
onChange={(e) => setPhone(e.target.value)}
/>
</div>
<div>
<input
type="number"
placeholder="adharNumber"
value={adharNumber}
onChange={(e) => setadharNumber(e.target.value)}
/>
<input
type={"date"}
placeholder="Date of Birth"
value={dob}
onChange={(e) => setDob(e.target.value)}
/>
</div>
<div>
<select value={gender} onChange={(e) => setGender(e.target.value)}>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div style={{ justifyContent: "center", alignItems: "center" }}>
<button type="submit">ADD NEW ADMIN</button>
</div>
</form>
</section>
P a g e 35 | 58
</section>
);
};

export default AddNewAdmin;

8.2 AddNewDoctor.jsx

import React, { useContext, useState } from "react";


import { Navigate, useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import { Context } from "../main";
import axios from "axios";

const AddNewDoctor = () => {


const { isAuthenticated, setIsAuthenticated } = useContext(Context);

const [firstName, setFirstName] = useState("");


const [lastName, setLastName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [adharNumber, setadharNumber] = useState("");
const [dob, setDob] = useState("");
const [gender, setGender] = useState("");
const [password, setPassword] = useState("");
const [doctorDepartment, setDoctorDepartment] = useState("");
const [docAvatar, setDocAvatar] = useState("");
const [docAvatarPreview, setDocAvatarPreview] = useState("");

const navigateTo = useNavigate();

const departmentsArray = [
"Pediatrics",
"Orthopedics",
"Cardiology",
"Neurology",
"Oncology",
"Radiology",
"Physical Therapy",
"Dermatology",
"ENT",
];

P a g e 36 | 58
const handleAvatar = (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
setDocAvatarPreview(reader.result);
setDocAvatar(file);
};
};

const handleAddNewDoctor = async (e) => {


e.preventDefault();
try {
const formData = new FormData();
formData.append("firstName", firstName);
formData.append("lastName", lastName);
formData.append("email", email);
formData.append("phone", phone);
formData.append("password", password);
formData.append("adharNumber", adharNumber);
formData.append("dob", dob);
formData.append("gender", gender);
formData.append("doctorDepartment", doctorDepartment);
formData.append("docAvatar", docAvatar);
await axios
.post("http://localhost:4000/api/v1/user/doctor/addnew", formData, {
withCredentials: true,
headers: { "Content-Type": "multipart/form-data" },
})
.then((res) => {
toast.success(res.data.message);
setIsAuthenticated(true);
navigateTo("/");
setFirstName("");
setLastName("");
setEmail("");
setPhone("");
setadharNumber("");
setDob("");
setGender("");
setPassword("");
});
} catch (error) {
toast.error(error.response.data.message);
}
P a g e 37 | 58
};

if (!isAuthenticated) {
return <Navigate to={"/login"} />;
}
return (
<section className="page">
<section className="container add-doctor-form">
<img src="/logo.png" alt="logo" className="logo"/>
<h1 className="form-title">REGISTER A NEW DOCTOR</h1>
<form onSubmit={handleAddNewDoctor}>
<div className="first-wrapper">
<div>
<img
src={
docAvatarPreview ? `${docAvatarPreview}` : "/docHolder.jpg"
}
alt="Doctor Avatar"
/>
<input type="file" onChange={handleAvatar} />
</div>
<div>
<input
type="text"
placeholder="First Name"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
/>
<input
type="text"
placeholder="Last Name"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
/>
<input
type="text"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="number"
placeholder="Mobile Number"
value={phone}
onChange={(e) => setPhone(e.target.value)}
P a g e 38 | 58
/>
<input
type="number"
placeholder="adharNumber"
value={adharNumber}
onChange={(e) => setadharNumber(e.target.value)}
/>
<input
type={"date"}
placeholder="Date of Birth"
value={dob}
onChange={(e) => setDob(e.target.value)}
/>
<select
value={gender}
onChange={(e) => setGender(e.target.value)}
>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<select
value={doctorDepartment}
onChange={(e) => {
setDoctorDepartment(e.target.value);
}}
>
<option value="">Select Department</option>
{departmentsArray.map((depart, index) => {
return (
<option value={depart} key={index}>
{depart}
</option>
);
})}
</select>
<button type="submit">Register New Doctor</button>
</div>
</div>
P a g e 39 | 58
</form>
</section>
</section>
);
};

export default AddNewDoctor;

8.3 Dashboard.jsx

import React, { useContext, useEffect, useState } from "react";


import { Context } from "../main";
import { Navigate } from "react-router-dom";
import axios from "axios";
import { toast } from "react-toastify";
import { GoCheckCircleFill } from "react-icons/go";
import { AiFillCloseCircle } from "react-icons/ai";

const Dashboard = () => {


const [appointments, setAppointments] = useState([]);

useEffect(() => {
const fetchAppointments = async () => {
try {
const { data } = await axios.get(
"http://localhost:4000/api/v1/appointment/getall",
{ withCredentials: true }
);
setAppointments(data.appointments);
} catch (error) {
setAppointments([]);
}
};
fetchAppointments();
}, []);

const handleUpdateStatus = async (appointmentId, status) => {


try {
const { data } = await axios.put(
`http://localhost:4000/api/v1/appointment/update/${appointmentId}`,
{ status },
{ withCredentials: true }
);

P a g e 40 | 58
setAppointments((prevAppointments) =>
prevAppointments.map((appointment) =>
appointment._id === appointmentId
? { ...appointment, status }
: appointment
)
);
toast.success(data.message);
} catch (error) {
toast.error(error.response.data.message);
}
};

const { isAuthenticated, admin } = useContext(Context);


if (!isAuthenticated) {
return <Navigate to={"/login"} />;
}

return (
<>
<section className="dashboard page">
<div className="banner">
<div className="firstBox">
<img src="/doc.png" alt="docImg" />
<div className="content">
<div>
<p>Hello ,</p>
<h5>
{admin &&
`${admin.firstName} ${admin.lastName}`}{" "}
</h5>
</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Facilis, nam molestias. Eaque molestiae ipsam commodi neque.
Assumenda repellendus necessitatibus itaque.
</p>
</div>
</div>
<div className="secondBox">
<p>Total Appointments</p>
<h3>1500</h3>
</div>
<div className="thirdBox">
<p>Registered Doctors</p>
P a g e 41 | 58
<h3>10</h3>
</div>
</div>
<div className="banner">
<h5>Appointments</h5>
<table>
<thead>
<tr>
<th>Patient</th>
<th>Date</th>
<th>Doctor</th>
<th>Department</th>
<th>Status</th>
<th>Visited</th>
</tr>
</thead>
<tbody>
{appointments && appointments.length > 0
? appointments.map((appointment) => (
<tr key={appointment._id}>
<td>{`${appointment.firstName} ${appointment.lastName}`}</td>
<td>{appointment.appointment_date.substring(0, 16)}</td>
<td>{`${appointment.doctor.firstName} ${appointment.doctor.lastName}`}</td>
<td>{appointment.department}</td>
<td>
<select
className={
appointment.status === "Pending"
? "value-pending"
: appointment.status === "Accepted"
? "value-accepted"
: "value-rejected"
}
value={appointment.status}
onChange={(e) =>
handleUpdateStatus(appointment._id, e.target.value)
}
>
<option value="Pending" className="value-pending">
Pending
</option>
<option value="Accepted" className="value-accepted">
Accepted
</option>
<option value="Rejected" className="value-rejected">
P a g e 42 | 58
Rejected
</option>
</select>
</td>
<td>{appointment.hasVisited === true ? <GoCheckCircleFill className="green"/> :
<AiFillCloseCircle className="red"/>}</td>
</tr>
))
: "No Appointments Found!"}
</tbody>
</table>

{}
</div>
</section>
</>
);
};

export default Dashboard;

8.4 Doctors.jsx

import axios from "axios";


import React, { useContext, useEffect, useState } from "react";
import { toast } from "react-toastify";
import { Context } from "../main";
import { Navigate } from "react-router-dom";

const Doctors = () => {


const [doctors, setDoctors] = useState([]);
const { isAuthenticated } = useContext(Context);
useEffect(() => {
const fetchDoctors = async () => {
try {
const { data } = await axios.get(
"http://localhost:4000/api/v1/user/doctors",
{ withCredentials: true }
);
setDoctors(data.doctors);
} catch (error) {
toast.error(error.response.data.message);
}

P a g e 43 | 58
};
fetchDoctors();
}, []);

if (!isAuthenticated) {
return <Navigate to={"/login"} />;
}
return (
<section className="page doctors">
<h1>DOCTORS</h1>
<div className="banner">
{doctors && doctors.length > 0 ? (
doctors.map((element) => {
return (
<div className="card">
<img
src={element.docAvatar && element.docAvatar.url}
alt="doctor avatar"
/>
<h4>{`${element.firstName} ${element.lastName}`}</h4>
<div className="details">
<p>
Email: <span>{element.email}</span>
</p>
<p>
Phone: <span>{element.phone}</span>
</p>
<p>
DOB: <span>{element.dob.substring(0, 10)}</span>
</p>
<p>
Department: <span>{element.doctorDepartment}</span>
</p>
<p>
adharNumber: <span>{element.adharNumber}</span>
</p>
<p>
Gender: <span>{element.gender}</span>
</p>
</div>
</div>
);
})
):(
<h1>No Registered Doctors Found!</h1>
P a g e 44 | 58
)}
</div>
</section>
);
};

export default Doctors;

8.5 Login.jsx

import React, { useContext, useState } from "react";


import { Navigate, useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import { Context } from "../main";
import axios from "axios";

const Login = () => {


const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");

const { isAuthenticated, setIsAuthenticated } = useContext(Context);

const navigateTo = useNavigate();

const handleLogin = async (e) => {


e.preventDefault();
try {
await axios
.post(
"http://localhost:4000/api/v1/user/login",
{ email, password, confirmPassword, role: "Admin" },
{
withCredentials: true,
headers: { "Content-Type": "application/json" },
}
)
.then((res) => {
toast.success(res.data.message);
setIsAuthenticated(true);
navigateTo("/");
setEmail("");
setPassword("");

P a g e 45 | 58
setConfirmPassword("");
});
} catch (error) {
toast.error(error.response.data.message);
}
};

if (isAuthenticated) {
return <Navigate to={"/"} />;
}

return (
<>
<section className="container form-component">
<img src="/logo.png" alt="logo" className="logo" />
<h1 className="form-title">WELCOME TO ZEECARE</h1>
<p>Only Admins Are Allowed To Access These Resources!</p>
<form onSubmit={handleLogin}>
<input
type="text"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<input
type="password"
placeholder="Confirm Password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
<div style={{ justifyContent: "center", alignItems: "center" }}>
<button type="submit">Login</button>
</div>
</form>
</section>
</>
);
};

P a g e 46 | 58
export default Login;

8.6 Messages.jsx

import axios from "axios";


import React, { useContext, useEffect, useState } from "react";
import { toast } from "react-toastify";
import { Context } from "../main";
import { Navigate } from "react-router-dom";

const Messages = () => {


const [messages, setMessages] = useState([]);
const { isAuthenticated } = useContext(Context);
useEffect(() => {
const fetchMessages = async () => {
try {
const { data } = await axios.get(
"http://localhost:4000/api/v1/message/getall",
{ withCredentials: true }
);
setMessages(data.messages);
} catch (error) {
console.log(error.response.data.message);
}
};
fetchMessages();
}, []);

if (!isAuthenticated) {
return <Navigate to={"/login"} />;
}

return (
<section className="page messages">
<h1>MESSAGE</h1>
<div className="banner">
{messages && messages.length > 0 ? (
messages.map((element) => {
return (
<div className="card" key={element._id}>
<div className="details">
<p>
First Name: <span>{element.firstName}</span>

P a g e 47 | 58
</p>
<p>
Last Name: <span>{element.lastName}</span>
</p>
<p>
Email: <span>{element.email}</span>
</p>
<p>
Phone: <span>{element.phone}</span>
</p>
<p>
Message: <span>{element.message}</span>
</p>
</div>
</div>
);
})
):(
<h1>No Messages!</h1>
)}
</div>
</section>
);
};

export default Messages;

8.7 Sidebar.jsx

import React, { useContext, useState } from "react";


import { TiHome } from "react-icons/ti";
import { RiLogoutBoxFill } from "react-icons/ri";
import { AiFillMessage } from "react-icons/ai";
import { GiHamburgerMenu } from "react-icons/gi";
import { FaUserDoctor } from "react-icons/fa6";
import { MdAddModerator } from "react-icons/md";
import { IoPersonAddSharp } from "react-icons/io5";
import axios from "axios";
import { toast } from "react-toastify";
import { Context } from "../main";
import { useNavigate } from "react-router-dom";

const Sidebar = () => {

P a g e 48 | 58
const [show, setShow] = useState(false);

const { isAuthenticated, setIsAuthenticated } = useContext(Context);

const handleLogout = async () => {


await axios
.get("http://localhost:4000/api/v1/user/admin/logout", {
withCredentials: true,
})
.then((res) => {
toast.success(res.data.message);
setIsAuthenticated(false);
})
.catch((err) => {
toast.error(err.response.data.message);
});
};

const navigateTo = useNavigate();

const gotoHomePage = () => {


navigateTo("/");
setShow(!show);
};
const gotoDoctorsPage = () => {
navigateTo("/doctors");
setShow(!show);
};
const gotoMessagesPage = () => {
navigateTo("/messages");
setShow(!show);
};
const gotoAddNewDoctor = () => {
navigateTo("/doctor/addnew");
setShow(!show);
};
const gotoAddNewAdmin = () => {
navigateTo("/admin/addnew");
setShow(!show);
};

return (
<>
<nav
style={!isAuthenticated ? { display: "none" } : { display: "flex" }}
P a g e 49 | 58
className={show ? "show sidebar" : "sidebar"}
>
<div className="links">
<TiHome onClick={gotoHomePage} />
<FaUserDoctor onClick={gotoDoctorsPage} />
<MdAddModerator onClick={gotoAddNewAdmin} />
<IoPersonAddSharp onClick={gotoAddNewDoctor} />
<AiFillMessage onClick={gotoMessagesPage} />
<RiLogoutBoxFill onClick={handleLogout} />
</div>
</nav>
<div
className="wrapper"
style={!isAuthenticated ? { display: "none" } : { display: "flex" }}
>
<GiHamburgerMenu className="hamburger" onClick={() => setShow(!show)} />
</div>
</>
);
};

export default Sidebar;

9. Result & Discussion

9.1 Registration

P a g e 50 | 58
9.2 Login

9.3 HomePage

P a g e 51 | 58
9.4 Appointment:

P a g e 52 | 58
P a g e 53 | 58
9.5 About us:

P a g e 54 | 58
 Dashboard:

Admin Login Page:

Admin HomePage:

REGISTER A NEW DOCTOR:


P a g e 55 | 58
ADD NEW ADMIN:

P a g e 56 | 58
Doctor information:

P a g e 57 | 58
Message Watch:

10. Conclusion:

Improved Efficiency: Streamlines appointment scheduling, record management, billing, and


communication, reducing administrative burdens.

Enhanced Patient Care: Facilitates access to medical records, appointment reminders, and potentially
educational resources.

Better Decision-Making: Provides insights through data analysis for informed management decisions
and resource allocation.

Increased Revenue: Streamlines billing and collections, potentially improving financial management.

Enhanced Communication: Enables better communication between patients, doctors, and staff for
improved care coordination.

Future Trends: As technology advances, HMS can integrate features like:

AI-powered Diagnostics: Assisting in diagnosis and treatment planning.

Robotic Surgery: Enhancing surgical precision and minimally invasive procedures.

Remote Patient Monitoring:Enabling improved care outside hospital settings.

Personalized Medicine:Tailoring treatments based on individual patient data.

P a g e 58 | 58

You might also like