Professional Documents
Culture Documents
Outline of Whole Project
Outline of Whole Project
Outline of Whole Project
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.
3. Plastic Surgeon - restores, reconstructs, corrects or improves in the shape and appearance of damaged
body structures, especially the face.
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.
Disadvantages
The admin has to manually keep updating the information by entering the details in the system.
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:-
P a g e 4 | 58
2.2 About Companies:
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,
ASHARAMROAD, AHMEDABAD,
380013, BHARAT.
P a g e 5 | 58
Software Requirement Specification
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.
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
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
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.
Functional Specification
P a g e 7 | 58
4.1 USER OF THE SYSTEM:
ADMIN:
DOCTOR:
PATIENT:
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:
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
/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).
P a g e 17 | 58
6.1.3 USERROUTER:
Registration:
Login:
- All users: POST /login (handles login for patients, admins, and potentially doctors)
- New Admin: POST /admin/addnew (requires admin authentication to add new admins)
- New Doctor: POST /doctor/addnew (requires admin authentication to add new 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:
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:
Appointment Details:
Relationships:
Frontend development
P a g e 21 | 58
6.2.2 MessageSchema:
P a g e 22 | 58
Sender Information (likely Patient or Doctor):
Message Content:
Note:
Additional fields like timestamps or recipient information might be present in the full schema, but aren't
shown here.
6.2.3UserSchema:
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,
},
});
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")
Doctor Department
Doctor Avatar details (public ID and URL)
7. Frontend Development
7.1 AboutUs.jsx
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"} />
</>
);
};
7.2 Appointment.jsx
7.3 Home.jsx
P a g e 26 | 58
import Biography from "../components/Biography";
import MessageForm from "../components/MessageForm";
import Departments from "../components/Departments";
7.4 Login.jsx
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>
</>
);
};
7.5 Register.jsx
P a g e 29 | 58
import { toast } from "react-toastify";
import { Context } from "../main";
import { Link, Navigate, useNavigate } from "react-router-dom";
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>
</>
);
};
8. Dashboard Development
8.1 AddNewAdmin.jsx
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>
);
};
8.2 AddNewDoctor.jsx
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);
};
};
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>
);
};
8.3 Dashboard.jsx
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();
}, []);
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);
}
};
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>
</>
);
};
8.4 Doctors.jsx
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>
);
};
8.5 Login.jsx
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
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>
);
};
8.7 Sidebar.jsx
P a g e 48 | 58
const [show, setShow] = useState(false);
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>
</>
);
};
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 HomePage:
P a g e 56 | 58
Doctor information:
P a g e 57 | 58
Message Watch:
10. Conclusion:
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.
P a g e 58 | 58