├── .gitignore ├── src ├── styles │ ├── log.css │ ├── specialityCard.css │ ├── member.css │ ├── medicineInfo.css │ ├── nursaryCard.css │ ├── hospitalCard.css │ ├── docnurse.css │ ├── speciality.css │ ├── requestAppointment.css │ ├── search.css │ ├── appointmentBooking.css │ ├── pharmaCard.css │ ├── appointments.css │ └── hero.css ├── assets │ ├── images │ │ ├── bg │ │ │ ├── bg1.jpg │ │ │ ├── bg2.jpg │ │ │ ├── bg3.jpg │ │ │ ├── bg4.jpg │ │ │ └── download.jpg │ │ ├── users │ │ │ ├── user1.jpg │ │ │ ├── user2.jpg │ │ │ ├── user3.jpg │ │ │ ├── user4.jpg │ │ │ └── user5.jpg │ │ └── logos │ │ │ ├── materialprowhite.svg │ │ │ ├── adminprowhite.svg │ │ │ ├── materialpro.svg │ │ │ └── adminpro.svg │ └── scss │ │ ├── style.scss │ │ ├── layout │ │ ├── _container.scss │ │ └── _sidebar.scss │ │ └── _variables.scss ├── components │ ├── image │ │ ├── hospital.jpg │ │ └── sprite.svg │ ├── memberShip.jsx │ ├── docMemberShip.jsx │ ├── landing.jsx │ ├── appointmentsPage.jsx │ ├── profile.jsx │ ├── log.jsx │ ├── nursaryCards.jsx │ ├── specialityCards.jsx │ ├── dashboard │ │ ├── Blog.js │ │ ├── Feeds.js │ │ ├── SalesChart.js │ │ └── ProjectTable.js │ ├── appointments.jsx │ ├── search.jsx │ ├── pharmaCard.jsx │ ├── success.jsx │ ├── hospitalCards.jsx │ ├── appointmentsMenu.jsx │ ├── doctorNurseCards.jsx │ ├── medicineInfo.jsx │ ├── pharmacyCard.jsx │ ├── navigation.jsx │ ├── hero.jsx │ ├── imageSlider.jsx │ ├── appointmentBooking.jsx │ ├── pharmacy.jsx │ ├── nursary.jsx │ ├── speciality.jsx │ ├── login.jsx │ ├── create.jsx │ ├── hospital.jsx │ ├── signIn.jsx │ ├── requestAppointment.jsx │ ├── loginAdmin.jsx │ ├── signUp.jsx │ ├── appointmentMessage.jsx │ ├── hospitalForm.jsx │ ├── member.jsx │ └── docMember.jsx ├── views │ ├── About.js │ ├── ui │ │ ├── Badges.js │ │ ├── Buttons.js │ │ ├── Alerts.js │ │ ├── Cards.js │ │ ├── Breadcrumbs.js │ │ ├── Forms.js │ │ ├── Grid.js │ │ └── Tables.js │ └── Starter.js ├── layouts │ ├── Logo.js │ ├── loader │ │ ├── Loader.js │ │ └── loader.scss │ ├── FullLayout.js │ ├── Sidebar.js │ └── Header.js ├── index.js ├── index.css ├── routes │ └── Router.js └── app.js ├── public └── index.html ├── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /src/styles/log.css: -------------------------------------------------------------------------------- 1 | .popupStylesc{ 2 | 3 | 4 | 5 | 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/images/bg/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinemug/healthSavy/HEAD/src/assets/images/bg/bg1.jpg -------------------------------------------------------------------------------- /src/assets/images/bg/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinemug/healthSavy/HEAD/src/assets/images/bg/bg2.jpg -------------------------------------------------------------------------------- /src/assets/images/bg/bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinemug/healthSavy/HEAD/src/assets/images/bg/bg3.jpg -------------------------------------------------------------------------------- /src/assets/images/bg/bg4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinemug/healthSavy/HEAD/src/assets/images/bg/bg4.jpg -------------------------------------------------------------------------------- /src/assets/images/bg/download.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinemug/healthSavy/HEAD/src/assets/images/bg/download.jpg -------------------------------------------------------------------------------- /src/assets/images/users/user1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinemug/healthSavy/HEAD/src/assets/images/users/user1.jpg -------------------------------------------------------------------------------- /src/assets/images/users/user2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinemug/healthSavy/HEAD/src/assets/images/users/user2.jpg -------------------------------------------------------------------------------- /src/assets/images/users/user3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinemug/healthSavy/HEAD/src/assets/images/users/user3.jpg -------------------------------------------------------------------------------- /src/assets/images/users/user4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinemug/healthSavy/HEAD/src/assets/images/users/user4.jpg -------------------------------------------------------------------------------- /src/assets/images/users/user5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinemug/healthSavy/HEAD/src/assets/images/users/user5.jpg -------------------------------------------------------------------------------- /src/components/image/hospital.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinemug/healthSavy/HEAD/src/components/image/hospital.jpg -------------------------------------------------------------------------------- /src/views/About.js: -------------------------------------------------------------------------------- 1 | import { Row, Col, Card, CardBody, CardTitle, Button } from "reactstrap"; 2 | 3 | const About = () => { 4 | return

About

; 5 | }; 6 | 7 | export default About; 8 | -------------------------------------------------------------------------------- /src/views/ui/Badges.js: -------------------------------------------------------------------------------- 1 | import { Badge, Button, Card, CardBody, CardTitle, Row, Col } from "reactstrap"; 2 | 3 | const Badges = () => { 4 | return

Hey

; 5 | }; 6 | 7 | export default Badges; 8 | -------------------------------------------------------------------------------- /src/assets/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import "./variables"; 2 | 3 | @import "~bootstrap/scss/bootstrap"; 4 | @import "~bootstrap-icons/font/bootstrap-icons.scss"; 5 | @import "./layout/sidebar"; 6 | @import "./layout/container"; -------------------------------------------------------------------------------- /src/components/memberShip.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Member from "./member"; 3 | const memberShip = () => { 4 | return ( 5 | <> 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default memberShip; 12 | -------------------------------------------------------------------------------- /src/components/docMemberShip.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import DocMember from "./docMember"; 3 | const docMemberShip = () => { 4 | return ( 5 | <> 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default docMemberShip; 12 | -------------------------------------------------------------------------------- /src/components/landing.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ImageSlider from "./imageSlider"; 3 | const Landing = () => { 4 | return ( 5 | <> 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default Landing; 12 | -------------------------------------------------------------------------------- /src/layouts/Logo.js: -------------------------------------------------------------------------------- 1 | import { ReactComponent as LogoDark } from "../assets/images/logos/adminpro.svg"; 2 | import { Link } from "react-router-dom"; 3 | 4 | const Logo = () => { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | }; 11 | 12 | export default Logo; 13 | -------------------------------------------------------------------------------- /src/views/ui/Buttons.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { 3 | Button, 4 | ButtonGroup, 5 | Card, 6 | CardBody, 7 | CardTitle, 8 | Row, 9 | Col, 10 | } from "reactstrap"; 11 | 12 | const Messages = () => { 13 | return

Messages

; 14 | }; 15 | 16 | export default Messages; 17 | -------------------------------------------------------------------------------- /src/layouts/loader/Loader.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./loader.scss"; 3 | import { Spinner } from "reactstrap"; 4 | 5 | const Loader = () => ( 6 |
7 |
8 | 9 |
10 |
11 | ); 12 | export default Loader; 13 | -------------------------------------------------------------------------------- /src/components/appointmentsPage.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AppointmentsMenu from "./appointmentsMenu"; 3 | import Speciality from "./speciality"; 4 | 5 | const AppointmentsPage = () => { 6 | return ( 7 | <> 8 | 9 | 10 | ); 11 | }; 12 | 13 | export default AppointmentsPage; 14 | -------------------------------------------------------------------------------- /src/components/profile.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Create from "./create"; 3 | import Login from "./login"; 4 | import LoginAdmin from "./loginAdmin"; 5 | const Profile = () => { 6 | return ( 7 | <> 8 |
9 | 10 |
11 | 12 | ); 13 | }; 14 | 15 | export default Profile; 16 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Health Savy 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/components/log.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import LoginForm from "./signIn"; 3 | import "../styles/log.css"; 4 | const Log = () => { 5 | return ( 6 | <> 7 |
8 |
9 | 10 |
11 | 12 | ); 13 | }; 14 | 15 | export default Log; 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # healthSavy 2 | Health Savy is a website that helps people to find pharmacies and hospitals near them depending on their search inputs,you can also book appointments with recoganized doctors online or get private doctors and nurses to care for you at home 3 | 4 | note that This site is still under construction , for more info visit it at https://healthy-savvy.vercel.app/ 5 | -------------------------------------------------------------------------------- /src/layouts/loader/loader.scss: -------------------------------------------------------------------------------- 1 | .fallback-spinner { 2 | position: relative; 3 | display: flex; 4 | height: 100vh; 5 | width: 100%; 6 | } 7 | .loading { 8 | position: absolute; 9 | left: calc(50% - 35px); 10 | top: 50%; 11 | width: 55px; 12 | height: 55px; 13 | border-radius: 50%; 14 | -webkit-box-sizing: border-box; 15 | box-sizing: border-box; 16 | border: 3px solid transparent; 17 | } 18 | -------------------------------------------------------------------------------- /src/views/ui/Alerts.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import AppointmentMessage from "../../components/appointmentMessage"; 3 | import { 4 | Alert, 5 | UncontrolledAlert, 6 | Card, 7 | CardBody, 8 | CardTitle, 9 | } from "reactstrap"; 10 | 11 | const Alerts = () => { 12 | return ( 13 | <> 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default Alerts; 20 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { BrowserRouter } from "react-router-dom"; 4 | import "./index.css"; 5 | // import "./assets/scss/style.scss"; 6 | import App from "./app"; 7 | import "bootstrap/dist/css/bootstrap.css"; 8 | const root = createRoot(document.getElementById("root")); 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /src/styles/specialityCard.css: -------------------------------------------------------------------------------- 1 | .specialityCardContainer{ 2 | 3 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 4 | width:150px; 5 | height:150px; 6 | border-radius: 10px; 7 | 8 | 9 | } 10 | .lungs{ 11 | 12 | font-size: 80px; 13 | color: #ad2020; 14 | 15 | } 16 | .lungsContainer{ 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | } 21 | .cardi{ 22 | font-weight: bolder; 23 | color: grey; 24 | margin-left: 30px; 25 | 26 | } 27 | .docs{ 28 | margin-left: 35px; 29 | } 30 | -------------------------------------------------------------------------------- /src/components/nursaryCards.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ".././styles/nursaryCard.css"; 3 | const NursaryCards = ({ title, description, img }) => { 4 | return ( 5 | <> 6 |
12 |
13 |

{title}

14 |

{description}

15 |
16 |
17 | 18 | ); 19 | }; 20 | 21 | export default NursaryCards; 22 | -------------------------------------------------------------------------------- /src/views/ui/Cards.js: -------------------------------------------------------------------------------- 1 | import { 2 | Card, 3 | CardImg, 4 | CardText, 5 | CardBody, 6 | CardTitle, 7 | CardSubtitle, 8 | CardGroup, 9 | Button, 10 | Row, 11 | Col, 12 | } from "reactstrap"; 13 | import Blog from "../../components/dashboard/Blog"; 14 | import bg1 from "../../assets/images/bg/bg1.jpg"; 15 | import bg2 from "../../assets/images/bg/bg2.jpg"; 16 | import bg3 from "../../assets/images/bg/bg3.jpg"; 17 | import bg4 from "../../assets/images/bg/bg4.jpg"; 18 | 19 | const PatientList = () => { 20 | return

Patient List

; 21 | }; 22 | 23 | export default PatientList; 24 | -------------------------------------------------------------------------------- /src/components/specialityCards.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ".././styles/specialityCard.css"; 3 | import { GiLungs } from "react-icons/gi"; 4 | const SpecialityCard = () => { 5 | return ( 6 | <> 7 |
8 |
9 | 10 |
11 |
12 |

Cardiologist

13 |

23 doctors

14 |
15 |
16 | 17 | ); 18 | }; 19 | 20 | export default SpecialityCard; 21 | -------------------------------------------------------------------------------- /src/assets/scss/layout/_container.scss: -------------------------------------------------------------------------------- 1 | .pageWrapper { 2 | min-height: 100vh; 3 | } 4 | 5 | .contentArea { 6 | flex-grow: 1; 7 | max-width: 1300px; 8 | margin: 0 auto; 9 | } 10 | 11 | .card { 12 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); 13 | margin-bottom: 30px; 14 | } 15 | 16 | .circle-box { 17 | width: 40px; 18 | height: 40px; 19 | line-height: 40px; 20 | text-align: center; 21 | border-radius: 100%; 22 | 23 | &.lg-box { 24 | width: 60px; 25 | height: 60px; 26 | font-size: 21px; 27 | line-height: 60px; 28 | } 29 | } 30 | 31 | .button-group .btn { 32 | margin: 3px; 33 | } 34 | 35 | table th { 36 | font-weight: 500; 37 | } -------------------------------------------------------------------------------- /src/components/dashboard/Blog.js: -------------------------------------------------------------------------------- 1 | import { 2 | Card, 3 | CardBody, 4 | CardImg, 5 | CardSubtitle, 6 | CardText, 7 | CardTitle, 8 | Button, 9 | } from "reactstrap"; 10 | 11 | const Blog = (props) => { 12 | return ( 13 | 14 | 15 | 16 | {props.title} 17 | {props.subtitle} 18 | {props.text} 19 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default Blog; 26 | -------------------------------------------------------------------------------- /src/components/appointments.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Hero from "./hero"; 3 | import { NavLink, Link } from "react-router-dom"; 4 | import { Fade } from "react-awesome-reveal"; 5 | const Appointments = () => { 6 | return ( 7 | <> 8 | 9 | 10 | 16 | 17 | 18 | 19 | ); 20 | }; 21 | 22 | export default Appointments; 23 | -------------------------------------------------------------------------------- /src/assets/images/logos/materialprowhite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/search.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BsSearch } from "react-icons/bs"; 3 | import ".././styles/search.css"; 4 | const Search = ({ facility, speciality, search }) => { 5 | return ( 6 | <> 7 |
8 |
9 |

10 | {/* 11 | 12 | {" "} */} 13 | See Nearby {facility} {speciality} 14 |

15 |
16 |
17 | 18 |
19 |
20 | 21 | ); 22 | }; 23 | 24 | export default Search; 25 | -------------------------------------------------------------------------------- /src/styles/member.css: -------------------------------------------------------------------------------- 1 | .formi{ 2 | width: 100%; 3 | max-width: 100%; 4 | overflow-x: hidden; 5 | padding:20px; 6 | } 7 | .apply{ 8 | font-size:14px; 9 | color: dodgerblue; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | @media only screen and (min-width: 1200px){ 16 | 17 | .formi{ 18 | width: 600px; 19 | max-width: 100%; 20 | overflow-x: hidden; 21 | margin-left: 500px; 22 | } 23 | .apply{ 24 | font-size:30px; 25 | margin-bottom: 40px; 26 | color: dodgerblue; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | } 31 | .formi input{ 32 | margin-top: 15px; 33 | } 34 | 35 | 36 | 37 | } -------------------------------------------------------------------------------- /src/components/pharmaCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavLink } from "react-router-dom"; 3 | import ".././styles/pharmaCard.css"; 4 | const PharmaCard = ({ img, medicineName }) => { 5 | return ( 6 | <> 7 |
8 |
14 |
{medicineName}
15 |
16 | 17 | 18 | 19 |
20 |
21 | 22 | ); 23 | }; 24 | 25 | export default PharmaCard; 26 | -------------------------------------------------------------------------------- /src/components/success.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaCheckCircle } from "react-icons/fa"; 3 | import { NavLink } from "react-router-dom"; 4 | const Success = ({ description }) => { 5 | return ( 6 | <> 7 |
8 |
9 |
10 | 11 |
12 |
13 | {description} 14 |
15 | 16 | 19 | 20 |
21 |
22 | 23 | ); 24 | }; 25 | 26 | export default Success; 27 | -------------------------------------------------------------------------------- /src/components/hospitalCards.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { HiLocationMarker } from "react-icons/hi"; 3 | import ".././styles/hospitalCard.css"; 4 | const HospitalCards = ({ hospitalImg, hospitalName, hospitalKm }) => { 5 | return ( 6 | <> 7 |
8 |
14 |
{hospitalName}
15 |
16 | 17 | {" "} 18 | Located {hospitalKm} 19 | 20 |
21 |
22 | 23 | ); 24 | }; 25 | 26 | export default HospitalCards; 27 | -------------------------------------------------------------------------------- /src/assets/images/logos/adminprowhite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/scss/layout/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @import url("../_variables.scss"); 2 | 3 | .sidebarArea { 4 | flex-shrink: 0; 5 | width: 261px; 6 | // margin-top: 180px; 7 | background-color: #1e2a35; 8 | 9 | .nav-link { 10 | color: rgba(255, 255, 255, 0.5); 11 | } 12 | 13 | .sidenav-bg:hover { 14 | background-color: rgba(255, 255, 255, 0.1); 15 | // border-radius: $border-radius; 16 | 17 | .nav-link { 18 | color: white; 19 | } 20 | } 21 | 22 | .sidenav-bg .active { 23 | background-color: #2962ff; 24 | // border-radius: $border-radius; 25 | color: white; 26 | } 27 | } 28 | 29 | // @include media-breakpoint-down(lg) { 30 | .sidebarArea { 31 | position: fixed; 32 | height: 100%; 33 | overflow: auto; 34 | top: 0; 35 | // z-index: 1; 36 | // margin-left: -$sidebarWidth; 37 | transition: 0.2s ease-in; 38 | 39 | &.showSidebar { 40 | margin-left: 0px; 41 | } 42 | } 43 | 44 | // } -------------------------------------------------------------------------------- /src/components/appointmentsMenu.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ".././styles/appointments.css"; 3 | import { BiMenuAltLeft } from "react-icons/bi"; 4 | import { AiOutlineSearch } from "react-icons/ai"; 5 | const AppointmentsMenu = () => { 6 | return ( 7 | <> 8 |
9 |
10 |
11 | 12 |
13 |
Welcome
14 |
15 |
16 | 17 |
18 |
Find your doctor or nurse
19 |
20 | {" "} 21 | 22 | 23 |
24 |
25 | 26 | ); 27 | }; 28 | 29 | export default AppointmentsMenu; 30 | -------------------------------------------------------------------------------- /src/components/doctorNurseCards.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ".././styles/docnurse.css"; 3 | import { Link } from "react-router-dom"; 4 | const DoctorNurseCards = ({ image, name, field }) => { 5 | return ( 6 | <> 7 |
8 |
19 |
20 |

{name}

21 |

{field}

22 | 23 |

Appointment

24 | 25 |
26 |
27 | 28 | ); 29 | }; 30 | 31 | export default DoctorNurseCards; 32 | -------------------------------------------------------------------------------- /src/layouts/FullLayout.js: -------------------------------------------------------------------------------- 1 | import { Outlet } from "react-router-dom"; 2 | import Sidebar from "./Sidebar"; 3 | import Header from "./Header"; 4 | import { Container } from "reactstrap"; 5 | import "../assets/scss/layout/_container.scss"; 6 | const FullLayout = () => { 7 | return ( 8 |
9 | {/********header**********/} 10 | {/*
*/} 11 |
12 | {/********Sidebar**********/} 13 | 16 | {/********Content Area**********/} 17 |
25 | {/********Middle Content**********/} 26 | {/* */} 27 | 28 | {/* */} 29 |
30 |
31 |
32 | ); 33 | }; 34 | 35 | export default FullLayout; 36 | -------------------------------------------------------------------------------- /src/styles/medicineInfo.css: -------------------------------------------------------------------------------- 1 | .overlayStyless{ 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100%; 7 | background-color: rgba(0, 0, 0, 0.5); 8 | z-index: 1; 9 | } 10 | .popupStyless{ 11 | position: fixed; 12 | top: 50%; 13 | left: 50%; 14 | transform: translate(-50%, -50%); 15 | width: 300px; 16 | height: 320px; 17 | background-color: white; 18 | z-index: 2; 19 | border-radius: 5px; 20 | padding: 20px; 21 | box-sizing: border-box; 22 | max-width:100%; 23 | } 24 | .medInfoimg{ 25 | height: 160px; 26 | background-size: contain; 27 | background-repeat: no-repeat; 28 | 29 | } 30 | .medName{ 31 | font-size: 12px; 32 | color: grey; 33 | font-weight: bolder; 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | } 38 | .medDesc{ 39 | font-size: 11px; 40 | font-style: italic; 41 | color: grey; 42 | } 43 | .backBtn{ 44 | background: #3590e6; 45 | color: white; 46 | border: 1px solid dodgerblue; 47 | font-size: 12px; 48 | margin-top: 20px; 49 | font-style: italic; 50 | } 51 | -------------------------------------------------------------------------------- /src/components/medicineInfo.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ".././styles/medicineInfo.css"; 3 | import { NavLink } from "react-router-dom"; 4 | const MedicineInfo = () => { 5 | return ( 6 | <> 7 |
8 |
9 |
15 |
Paracetamol
16 |
17 | Paracetamol, also known as acetaminophen, is a medication used to 18 | treat pain and fever. It is typically used for mild to moderate pain 19 | relief. It is available in various forms such as tablets, capsules, 20 | and syrup. 21 |
22 |
23 | 24 | 25 | 26 |
27 |
28 | 29 | ); 30 | }; 31 | 32 | export default MedicineInfo; 33 | -------------------------------------------------------------------------------- /src/components/pharmacyCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Pharmacy from "./pharmacy"; 3 | const PharmacyCard = ({ img, medicineName }) => { 4 | return ( 5 | <> 6 |
11 | Card image cap 12 |
13 |
{medicineName}
14 |
15 |

24 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure, 25 | sapiente! 26 |

27 | 34 |
35 | 36 | ); 37 | }; 38 | 39 | export default PharmacyCard; 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "healthsavy", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.10.6", 7 | "animate.css": "^4.1.1", 8 | "axios": "^1.3.4", 9 | "bootstrap": "^4.1.3", 10 | "bootstrap-icons": "^1.10.3", 11 | "node-sass": "^6.0.1", 12 | "react": "^18.2.0", 13 | "react-apexcharts": "^1.4.0", 14 | "react-awesome-reveal": "^4.2.3", 15 | "react-dom": "^18.2.0", 16 | "react-icons": "^4.7.1", 17 | "react-router-dom": "^6.8.1", 18 | "react-scripts": "5.0.1", 19 | "react-slick": "^0.29.0", 20 | "reactstrap": "^9.1.6", 21 | "sass": "^1.58.3", 22 | "slick-carousel": "^1.8.1", 23 | "web-vitals": "^3.1.1" 24 | }, 25 | "scripts": { 26 | "start": "react-scripts start", 27 | "build": "react-scripts build", 28 | "eject": "react-scripts eject" 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | }, 42 | "devDependencies": { 43 | "tailwindcss": "^3.2.7" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/components/navigation.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { FaBars, FaTimes } from "react-icons/fa"; 3 | import { NavLink } from "react-router-dom"; 4 | export const Navigation = () => { 5 | const [isOpen, setIsOpen] = useState(false); 6 | 7 | const handleToggle = () => { 8 | setIsOpen(!isOpen); 9 | }; 10 | 11 | return ( 12 |
13 | 16 | {/*
Health Savy
*/} 17 | 49 | z 50 |
51 | ); 52 | }; 53 | -------------------------------------------------------------------------------- /src/views/ui/Breadcrumbs.js: -------------------------------------------------------------------------------- 1 | import { 2 | Row, 3 | Col, 4 | Card, 5 | CardBody, 6 | CardTitle, 7 | Breadcrumb, 8 | BreadcrumbItem, 9 | } from "reactstrap"; 10 | 11 | const Breadcrumbs = () => { 12 | return ( 13 | 14 | 15 | {/* --------------------------------------------------------------------------------*/} 16 | {/* Card-1*/} 17 | {/* --------------------------------------------------------------------------------*/} 18 | 19 | 20 | 21 | Basic Breadcrumbs 22 | 23 | 24 | 25 | Home 26 | 27 | 28 | 29 | Home 30 | 31 | Library 32 | 33 | 34 | 35 | Home 36 | 37 | 38 | Library 39 | 40 | Data 41 | 42 | 43 | 44 | 45 | 46 | ); 47 | }; 48 | 49 | export default Breadcrumbs; 50 | -------------------------------------------------------------------------------- /src/styles/nursaryCard.css: -------------------------------------------------------------------------------- 1 | .nurse-service-card { 2 | background-color: #fff; 3 | border-radius: 8px; 4 | box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Add box shadow */ 5 | padding: 16px; 6 | margin: 16px; 7 | height: auto; 8 | max-width: 300px; 9 | height:220px; 10 | /* background-size: contain; */ 11 | background-size: cover; 12 | background-position: center; 13 | background-repeat: no-repeat; 14 | 15 | } 16 | .serviceHeader{ 17 | color: grey; 18 | text-shadow: 1px 1px 1px black; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | margin-top: 20px; 23 | } 24 | 25 | .nurse-service-card h2 { 26 | font-size: 16px; 27 | margin-bottom: 8px; 28 | font-weight: bolder; 29 | color: rgb(234, 199, 199); 30 | text-shadow: 1px 1px 1px black; 31 | 32 | } 33 | 34 | .nurse-service-card p { 35 | font-size: 12px; 36 | line-height: 1.5; 37 | font-weight: bolder; 38 | color: azure; 39 | text-shadow: 1px 1px 1px black; 40 | margin-bottom: 0; 41 | } 42 | .nurTcontainer{ 43 | margin-top: 100px; 44 | 45 | } 46 | .app{ 47 | display: flex; 48 | flex-direction: column; 49 | justify-content: center; 50 | align-items: center; 51 | } 52 | @media only screen and (min-width: 481px) and (max-width: 1024px) { 53 | .app{ 54 | display: grid; 55 | grid-template-columns: 1fr 1fr 1fr; 56 | } 57 | 58 | } 59 | @media only screen and (min-width: 1200px) { 60 | .app{ 61 | display: grid; 62 | grid-template-columns: 1fr 1fr 1fr 1fr; 63 | } 64 | 65 | } -------------------------------------------------------------------------------- /src/components/hero.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { BsArrowRightShort } from "react-icons/bs"; 4 | import Fade from "react-awesome-reveal"; 5 | import ".././styles/hero.css"; 6 | 7 | const Hero = ({ title, description, image, fn, link }) => { 8 | return ( 9 | <> 10 |
16 |
17 |

18 | {title}{" "} 19 |

20 |

21 | {description} 22 |

23 |
24 |
25 | 26 | 30 | 31 | 32 | 33 |
34 | 35 |
36 | 37 |
38 |
39 | 43 | 44 |
45 | 46 |
47 | 48 |
49 |
50 | 51 | ); 52 | }; 53 | 54 | export default Hero; 55 | -------------------------------------------------------------------------------- /src/components/imageSlider.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import Hero from "./hero"; 6 | function ImageSlider() { 7 | const images = ["hello", "goodbye", "and everything in between"]; 8 | 9 | const settings = { 10 | dots: true, 11 | infinite: true, 12 | speed: 500, 13 | slidesToShow: 1, 14 | slidesToScroll: 1, 15 | autoplay: true, 16 | autoplaySpeed: 2000, 17 | }; 18 | 19 | return ( 20 |
21 |
22 | 23 | 28 | 33 | 38 | 43 | 44 |
45 |
46 | ); 47 | } 48 | 49 | export default ImageSlider; 50 | -------------------------------------------------------------------------------- /src/styles/hospitalCard.css: -------------------------------------------------------------------------------- 1 | .hospitalCardContainer{ 2 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 3 | height:100px; 4 | width: 150px; 5 | margin-bottom: 70px; 6 | 7 | } 8 | .imageContainer{ 9 | height: 100px; 10 | 11 | background-size: cover; 12 | background-position: center;} 13 | .hospitalName{ 14 | font-size: 12px; 15 | color:grey; 16 | font-size: bold; 17 | display: flex; 18 | justify-content: center; 19 | 20 | } 21 | .locationContainer{ 22 | font-size: 12px; 23 | font-style: italic; 24 | display: flex; 25 | justify-content: center; 26 | color: grey; 27 | 28 | } 29 | .hosCardsContainer{ 30 | display: grid; 31 | grid-template-columns: repeat(2,1fr); 32 | margin-left: 20px; 33 | } 34 | @media only screen and (min-width: 481px) and (max-width: 1024px) { 35 | .hosCardsContainer{ 36 | display: grid; 37 | grid-template-columns: repeat(4,1fr); 38 | margin-left: 20px; 39 | 40 | } 41 | .hospitalName{ 42 | font-size: 14px; 43 | color:grey; 44 | font-size: bold; 45 | display: flex; 46 | justify-content: center; 47 | font-weight: bolder; 48 | 49 | } 50 | .locationContainer{ 51 | font-size: 12px; 52 | font-style: italic; 53 | display: flex; 54 | justify-content: center; 55 | color: grey; 56 | font-weight: bolder; 57 | 58 | } 59 | 60 | 61 | } 62 | @media only screen and (min-width: 1200px) { 63 | .hosCardsContainer{ 64 | display: grid; 65 | grid-template-columns: repeat(6,1fr); 66 | margin-left: 50px; 67 | 68 | } 69 | 70 | } -------------------------------------------------------------------------------- /src/components/appointmentBooking.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useNavigate, Link } from "react-router-dom"; 3 | import ".././styles/appointmentBooking.css"; 4 | const AppointmentBooking = () => { 5 | const navigate = useNavigate(); 6 | 7 | const handleCancel = () => { 8 | navigate("/appointmentsPage"); 9 | }; 10 | 11 | return ( 12 | <> 13 |
14 |
15 |
16 | 19 |
20 |
21 |
22 | 26 |
27 |
Dr.Kex Markessy
28 |
_Cardiologist
29 |
30 |
31 |
32 | Dr.Markessy is a famous world recoganized cardilogist,with over 33 | 20 years of experience ,want to hire him as your private doctor? 34 | book an appointment with him. 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 |
44 |
45 |
46 | 47 | ); 48 | }; 49 | 50 | export default AppointmentBooking; 51 | -------------------------------------------------------------------------------- /src/styles/docnurse.css: -------------------------------------------------------------------------------- 1 | .docNurseContainer{ 2 | max-width: 100%; 3 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 4 | height: 150px; 5 | margin-top: 40px; 6 | border-radius: 20px; 7 | display: flex; 8 | flex-direction: row; 9 | 10 | gap: 20px; 11 | } 12 | 13 | 14 | .medImage{ 15 | /* background-image: url("https://images.theconversation.com/files/304957/original/file-20191203-66986-im7o5.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=1200.0&fit=crop"); */ 16 | width:150px; 17 | height:150px; 18 | border-radius: 75px; 19 | background-size: contain; 20 | background-repeat: no-repeat; 21 | } 22 | .docNurseDescription{ 23 | display: flex; 24 | flex-direction: column; 25 | justify-content: center; 26 | align-items: center; 27 | margin-top: 40px; 28 | } 29 | .doci{ 30 | font-weight: bolder; 31 | } 32 | .cari{ 33 | margin-top: -12px; 34 | color: grey; 35 | font-weight: bold; 36 | 37 | } 38 | .appointment{ 39 | margin-left: 100px; 40 | margin-top: 10px; 41 | color: #56a2e9; 42 | text-shadow: 1px 1px 1px black; 43 | 44 | } 45 | 46 | @media only screen and (min-width: 481px) and (max-width: 1024px) { 47 | 48 | 49 | .docNurseContainer{ 50 | max-width: 100%; 51 | width: 400px; 52 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 53 | height: 150px; 54 | margin-top: 40px; 55 | border-radius: 20px; 56 | display: flex; 57 | flex-direction: row; 58 | 59 | gap: 20px; 60 | } 61 | 62 | 63 | } 64 | @media only screen and (min-width: 1200px) { 65 | .docNurseContainer{ 66 | max-width: 100%; 67 | width: 400px; 68 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 69 | height: 150px; 70 | margin-top: 40px; 71 | border-radius: 20px; 72 | display: flex; 73 | flex-direction: row; 74 | margin-left: 36px; 75 | 76 | gap: 20px; 77 | } 78 | 79 | 80 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | .navigation { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | padding: 20px; 6 | height: 111px; 7 | background-color: #fafcfb; 8 | 9 | color: #fff; 10 | } 11 | 12 | .toggle-button { 13 | display: none; 14 | } 15 | 16 | .menu { 17 | display: flex; 18 | list-style: none; 19 | margin: 0; 20 | padding: 0; 21 | flex-direction: column; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | 26 | .menu li { 27 | margin: 10px 0; 28 | } 29 | 30 | .menu a { 31 | color: #919192; 32 | font-size: 12px; 33 | text-decoration: none; 34 | } 35 | 36 | /* mobile */ 37 | 38 | @media screen and (max-width: 768px) { 39 | .navigation { 40 | flex-direction: column; 41 | align-items: flex-start; 42 | } 43 | 44 | .toggle-button { 45 | display: block; 46 | background-color: transparent; 47 | border: none; 48 | font-size: 24px; 49 | color: #42cccf; 50 | cursor: pointer; 51 | } 52 | 53 | .menu { 54 | display: none; 55 | width: 100%; 56 | margin: 0; 57 | z-index: 999; 58 | padding: 20px; 59 | background-color: #fafcfb; 60 | text-align: center; 61 | transition: all 0.3s ease; 62 | } 63 | .menu li{ 64 | border-bottom: 1px solid grey; 65 | display: block; 66 | 67 | } 68 | .open { 69 | display: flex; 70 | flex-direction: column; 71 | max-width: 100%; 72 | } 73 | } 74 | .overall{ 75 | max-width: 100%; 76 | width:100%; 77 | height: auto; 78 | } 79 | 80 | /* big screens */ 81 | @media screen and (min-width: 768px) { 82 | .navigation { 83 | flex-direction: column; 84 | align-items: center; 85 | justify-content: center; 86 | } 87 | 88 | .menu { 89 | display: flex; 90 | flex-direction: row; 91 | justify-content: center; 92 | align-items: center; 93 | width: auto; 94 | padding: 0; 95 | } 96 | 97 | .menu li { 98 | margin: 0 10px; 99 | } 100 | .menu a { 101 | font-size: 12px; 102 | } 103 | } 104 | 105 | 106 | * button{ 107 | cursor: pointer; 108 | } 109 | * body{ 110 | height:auto 111 | } -------------------------------------------------------------------------------- /src/components/dashboard/Feeds.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Card, 4 | CardBody, 5 | CardTitle, 6 | ListGroup, 7 | CardSubtitle, 8 | ListGroupItem, 9 | Button, 10 | } from "reactstrap"; 11 | 12 | const FeedData = [ 13 | { 14 | title: "You have 10 Appointments waiting for your Feedback ", 15 | icon: "bi bi-bell", 16 | color: "primary", 17 | date: "6 minute ago", 18 | }, 19 | { 20 | title: "20 people viewed your profile", 21 | icon: "bi bi-person", 22 | color: "info", 23 | date: "2 minute ago", 24 | }, 25 | { 26 | title: "You have an appointment in 30 minutes", 27 | icon: "bi bi-hdd", 28 | color: "danger", 29 | date: "Just Now", 30 | }, 31 | { 32 | title: "Patients are giving you Good Reviews", 33 | icon: "bi bi-bag-check", 34 | color: "success", 35 | date: "1 minute ago", 36 | }, 37 | { 38 | title: "Weekend Appointments pending", 39 | icon: "bi bi-bell", 40 | color: "dark", 41 | date: "4 minute ago", 42 | }, 43 | { 44 | title: "Meeting ", 45 | icon: "bi bi-hdd", 46 | color: "warning", 47 | date: "6 minute ago", 48 | }, 49 | ]; 50 | 51 | const Feeds = () => { 52 | return ( 53 | 54 | 55 | Feeds 56 | 57 | Recent activities 58 | 59 | 60 | {FeedData.map((feed, index) => ( 61 | 68 | 75 | {feed.title} 76 | 77 | {feed.date} 78 | 79 | 80 | ))} 81 | 82 | 83 | 84 | ); 85 | }; 86 | 87 | export default Feeds; 88 | -------------------------------------------------------------------------------- /src/assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | /*******************/ 2 | // Theme Fonts 3 | /********************/ 4 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap"); 5 | $font-family-sans-serif: "Montserrat", sans-serif; 6 | /*******************/ 7 | // Theme Colors 8 | /********************/ 9 | $primary: #2962ff; 10 | $info: #26c6da; 11 | $danger: #f62d51; 12 | $success: #39c449; 13 | $warning: #ffbc34; 14 | $dark: #1e2a35; 15 | $light: #eaf2fb; 16 | $secondary: #35363b; 17 | 18 | $theme-colors: ( 19 | "primary": $primary, 20 | "secondary": $secondary, 21 | "success": $success, 22 | "info": $info, 23 | "warning": $warning, 24 | "danger": $danger, 25 | "light": $light, 26 | "dark": $dark, 27 | "light-primary": #d6e4f3, 28 | "light-success": #d5f3f2, 29 | "light-info": #d3edfa, 30 | "light-warning": #f8ecdc, 31 | "light-danger": #f8dddd, 32 | ); 33 | // scss-docs-start gray-color-variables 34 | $white: #fff !default; 35 | $gray-100: #f8f9fa !default; 36 | $gray-200: #f2f7f8 !default; 37 | $gray-300: #dee2e6 !default; 38 | $gray-400: #ced4da !default; 39 | $gray-500: #adb5bd !default; 40 | $gray-600: #757e85 !default; 41 | $gray-700: #495057 !default; 42 | $gray-800: #343a40 !default; 43 | $gray-900: #1e2a35 !default; 44 | $black: #000 !default; 45 | 46 | /*******************/ 47 | // Theme Text Contrast 48 | /********************/ 49 | $min-contrast-ratio: 2; 50 | $font-weight-bold: 500 !default; 51 | /*******************/ 52 | // Theme body bg & text color 53 | /********************/ 54 | $body-bg: $gray-200 !default; 55 | $body-color: $gray-900 !default; 56 | $gradient: linear-gradient(-90deg, rgba($white, 0.5), rgba($white, 0)) !default; 57 | 58 | /*******************/ 59 | // Theme common variable 60 | /********************/ 61 | $border-radius: 0.3rem !default; 62 | $box-shadow: 0 0.5rem 1rem rgba($black, 0.05); 63 | $headings-font-weight: 400 !default; 64 | $h5-font-size: 1.05rem !default; 65 | $h6-font-size: 0.875rem !default; 66 | $card-border-width: 0 !default; 67 | $card-box-shadow: $box-shadow !default; 68 | $grid-gutter-width: 1.85rem !default; 69 | 70 | $input-bg: $white !default; 71 | /*******************/ 72 | // Theme btn 73 | /********************/ 74 | $btn-focus-width: 0px; 75 | 76 | /*******************/ 77 | // Theme sidebar width 78 | /********************/ 79 | $sidebarWidth: 260px; 80 | $sidebarColor: $dark; 81 | -------------------------------------------------------------------------------- /src/components/pharmacy.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Hero from "./hero"; 3 | import Search from "./search"; 4 | import PharmaCard from "./pharmaCard"; 5 | import { NavLink, Link } from "react-router-dom"; 6 | import Member from "./member"; 7 | 8 | const Pharmacy = () => { 9 | const [showContainer, setShowContainer] = useState(false); 10 | 11 | const handleButtonClick = () => { 12 | setShowContainer(!showContainer); 13 | }; 14 | 15 | return ( 16 | <> 17 | 24 | 25 | 30 |

31 | Top Seaches 32 |

33 |
34 | 38 | 42 | 46 | 50 | 54 | 58 |
59 | 60 | ); 61 | }; 62 | 63 | export default Pharmacy; 64 | -------------------------------------------------------------------------------- /src/layouts/Sidebar.js: -------------------------------------------------------------------------------- 1 | import { Button, Nav, NavItem } from "reactstrap"; 2 | import { Link, useLocation } from "react-router-dom"; 3 | import "../assets/scss/layout/_sidebar.scss"; 4 | const navigation = [ 5 | { 6 | title: "Overwiew", 7 | href: "/dashboard/starter", 8 | icon: "bi bi-speedometer2", 9 | }, 10 | { 11 | title: "Appointments", 12 | href: "/dashboard/alerts", 13 | icon: "bi bi-bell", 14 | }, 15 | { 16 | title: "Messages", 17 | href: "/dashboard/buttons", 18 | icon: "bi bi-hdd-stack", 19 | }, 20 | { 21 | title: "Patient List", 22 | href: "/dashboard/cards", 23 | icon: "bi bi-card-text", 24 | }, 25 | { 26 | title: "Free hours", 27 | href: "/dashboard/grid", 28 | icon: "bi bi-columns", 29 | }, 30 | { 31 | title: "Table", 32 | href: "/dashboard/table", 33 | icon: "bi bi-layout-split", 34 | }, 35 | { 36 | title: "Forms", 37 | href: "/dashboard/forms", 38 | icon: "bi bi-textarea-resize", 39 | }, 40 | { 41 | title: "About", 42 | href: "/dashboard/about", 43 | icon: "bi bi-people", 44 | }, 45 | ]; 46 | 47 | const Sidebar = () => { 48 | const showMobilemenu = () => { 49 | document.getElementById("sidebarArea").classList.toggle("showSidebar"); 50 | }; 51 | let location = useLocation(); 52 | 53 | return ( 54 |
55 |
56 | 63 |
64 |
65 | 82 |
83 |
84 | ); 85 | }; 86 | 87 | export default Sidebar; 88 | -------------------------------------------------------------------------------- /src/styles/speciality.css: -------------------------------------------------------------------------------- 1 | .specialityHeader{ 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: space-between; 5 | margin-top: 50PX; 6 | max-width: 100%; 7 | } 8 | .speciality{ 9 | font-weight: bolder; 10 | margin-left: 10px; 11 | 12 | } 13 | .view{ 14 | color:#3590e6; 15 | margin-right:10px; 16 | } 17 | .containerCard{ 18 | display: grid; 19 | grid-template-columns:1fr 1fr ; 20 | gap:3px; 21 | margin-left: 20px; 22 | max-width: 100%; 23 | } 24 | .docnuContainer{ 25 | display: flex; 26 | flex-direction: column; 27 | gap:0px; 28 | max-width: 100%; 29 | } 30 | .top{ 31 | font-size: bold; 32 | margin-top: 30px; 33 | font-size: 20px; 34 | margin-left: 20px; 35 | color: #3590e6; 36 | } 37 | .one{ 38 | max-width: 100%; 39 | width: 100%; 40 | } 41 | .two{ 42 | max-width: 100%; 43 | width: 100%; 44 | } 45 | .three{ 46 | max-width: 100%; 47 | width: 100%; 48 | } 49 | @media only screen and (min-width: 481px) and (max-width: 1024px) { 50 | 51 | 52 | 53 | .containerCard{ 54 | display: grid; 55 | grid-template-columns:1fr 1fr 1fr 1fr ; 56 | gap:3px; 57 | margin-left: 20px; 58 | max-width: 100%; 59 | 60 | } 61 | 62 | 63 | .speciality{ 64 | font-weight: bolder; 65 | font-size: 20px; 66 | margin-left: 20px; 67 | 68 | } 69 | .view{ 70 | color:#3590e6; 71 | margin-right: 20px; 72 | font-size: 18px; 73 | 74 | } 75 | .docnuContainer{ 76 | display: grid; 77 | grid-template-columns: 1fr 1fr; 78 | max-width: 100%; 79 | } 80 | 81 | 82 | 83 | } 84 | @media only screen and (min-width: 1200px) { 85 | 86 | .containerCard{ 87 | display: flex; 88 | justify-content: center; 89 | } 90 | 91 | .speciality{ 92 | font-weight: bolder; 93 | font-size: 20px; 94 | margin-left: 400px; 95 | 96 | } 97 | .view{ 98 | color:#3590e6; 99 | margin-right: 20px; 100 | font-size: 18px; 101 | margin-right: 400px; 102 | 103 | } 104 | .three{ 105 | display: grid; 106 | grid-template-columns: 1fr 1fr; 107 | margin-left: 100px; 108 | max-width: 100%; 109 | width: 100%; 110 | } 111 | 112 | 113 | .top{ 114 | margin-top: 60px; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /src/components/dashboard/SalesChart.js: -------------------------------------------------------------------------------- 1 | import { Card, CardBody, CardSubtitle, CardTitle, Row, Col } from "reactstrap"; 2 | import Chart from "react-apexcharts"; 3 | 4 | const SalesChart = () => { 5 | const options = { 6 | chart: { 7 | toolbar: { 8 | show: false, 9 | }, 10 | stacked: false, 11 | }, 12 | dataLabels: { 13 | enabled: false, 14 | }, 15 | stroke: { 16 | show: true, 17 | width: 4, 18 | colors: ["transparent"], 19 | }, 20 | legend: { 21 | show: true, 22 | }, 23 | plotOptions: { 24 | bar: { 25 | horizontal: false, 26 | columnWidth: "30%", 27 | borderRadius: 2, 28 | }, 29 | }, 30 | colors: ["#0d6efd", "#009efb", "#6771dc"], 31 | xaxis: { 32 | categories: [ 33 | "Jan", 34 | "Feb", 35 | "Mar", 36 | "Apr", 37 | "May", 38 | "Jun", 39 | "Jul", 40 | "Aug", 41 | "Sep", 42 | ], 43 | }, 44 | responsive: [ 45 | { 46 | breakpoint: 1024, 47 | options: { 48 | plotOptions: { 49 | bar: { 50 | columnWidth: "60%", 51 | borderRadius: 7, 52 | }, 53 | }, 54 | }, 55 | }, 56 | ], 57 | }; 58 | const series = [ 59 | { 60 | name: "2020", 61 | data: [20, 40, 50, 30, 40, 50, 30, 30, 40], 62 | }, 63 | { 64 | name: "2022", 65 | data: [10, 20, 40, 60, 20, 40, 50, 60, 20], 66 | }, 67 | ]; 68 | 69 | return ( 70 | 71 | 72 | Medical Conditions Summary 73 | 74 | Yearly Report 75 | 76 |
77 | 78 | 79 |
Malaria
80 |

49 people

81 | 82 | 83 |
Cough
84 |

500 people

85 | 86 | 87 |
Covid
88 |

11 people

89 | 90 | 91 |
92 | 93 | 94 | 95 | ); 96 | }; 97 | 98 | export default SalesChart; 99 | -------------------------------------------------------------------------------- /src/styles/requestAppointment.css: -------------------------------------------------------------------------------- 1 | .overlay{ 2 | 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | height: 100%; 8 | background-color: rgba(0, 0, 0, 0.5); 9 | z-index: 1; 10 | } 11 | 12 | 13 | 14 | .popup{ 15 | 16 | position: fixed; 17 | top: 50%; 18 | left: 50%; 19 | transform: translate(-50%, -50%); 20 | width: 300px; 21 | height: auto; 22 | background-color: white; 23 | z-index: 2; 24 | border-radius: 5px; 25 | padding: 20px; 26 | box-sizing: border-box, 27 | } 28 | .title{ 29 | font-size: 20px; 30 | font-weight: bolder; 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | margin-top: 20px; 35 | } 36 | .form{ 37 | display: flex; 38 | flex-direction: column; 39 | align-items: center; 40 | margin: 20px auto; 41 | padding: 20px; 42 | border: 1px solid #ccc; 43 | border-radius: 5px; 44 | max-width: 500px; 45 | background-color: #f7f7f7; 46 | } 47 | .text, 48 | input[type="number"], 49 | input[type="tel"], 50 | input[type="password"], 51 | select, 52 | textarea { 53 | width: 100%; 54 | padding: 10px; 55 | margin: 10px 0; 56 | border: 1px solid #ccc; 57 | border-radius: 4px; 58 | box-sizing: border-box; 59 | font-size: 12px; 60 | } 61 | .text, 62 | input[type="number"], 63 | input[type="tel"], 64 | input[type="password"], 65 | select, 66 | textarea:focus { 67 | outline: none; 68 | } 69 | textarea::placeholder{ 70 | font-size: 10px; 71 | font-style: italic; 72 | } 73 | input[type="submit"] { 74 | background-color: #43D5CB; 75 | color: white; 76 | padding: 12px 20px; 77 | border: none; 78 | border-radius: 4px; 79 | cursor: pointer; 80 | font-size: 12px; 81 | font-weight: bolder; 82 | margin-top: 20px; 83 | } 84 | input[type="submit"]:hover { 85 | background-color: white; 86 | color:#43D5CB; 87 | } 88 | label{ 89 | font-size: 12px; 90 | } 91 | .cancel{ 92 | background-color: transparent; 93 | border: none; 94 | font-size: 20px; 95 | cursor: pointer; 96 | } 97 | .form{ 98 | width:100%; 99 | max-width: 100%; 100 | } 101 | .error { 102 | color: red; 103 | font-size: 0.8rem; 104 | margin-top: 0.5rem; 105 | } 106 | -------------------------------------------------------------------------------- /src/views/Starter.js: -------------------------------------------------------------------------------- 1 | import { Col, Row } from "reactstrap"; 2 | import SalesChart from "../components/dashboard/SalesChart"; 3 | import Feeds from "../components/dashboard/Feeds"; 4 | import ProjectTables from "../components/dashboard/ProjectTable"; 5 | 6 | import Blog from "../components/dashboard/Blog"; 7 | import bg1 from "../assets/images/bg/bg1.jpg"; 8 | import bg2 from "../assets/images/bg/bg2.jpg"; 9 | import bg3 from "../assets/images/bg/bg3.jpg"; 10 | import bg4 from "../assets/images/bg/bg4.jpg"; 11 | 12 | const BlogData = [ 13 | { 14 | image: bg1, 15 | title: "This is simple blog", 16 | subtitle: "2 comments, 1 Like", 17 | description: 18 | "This is a wider card with supporting text below as a natural lead-in to additional content.", 19 | btnbg: "primary", 20 | }, 21 | { 22 | image: bg2, 23 | title: "Lets be simple blog", 24 | subtitle: "2 comments, 1 Like", 25 | description: 26 | "This is a wider card with supporting text below as a natural lead-in to additional content.", 27 | btnbg: "primary", 28 | }, 29 | { 30 | image: bg3, 31 | title: "Don't Lamp blog", 32 | subtitle: "2 comments, 1 Like", 33 | description: 34 | "This is a wider card with supporting text below as a natural lead-in to additional content.", 35 | btnbg: "primary", 36 | }, 37 | { 38 | image: bg4, 39 | title: "Simple is beautiful", 40 | subtitle: "2 comments, 1 Like", 41 | description: 42 | "This is a wider card with supporting text below as a natural lead-in to additional content.", 43 | btnbg: "primary", 44 | }, 45 | ]; 46 | 47 | const Starter = () => { 48 | return ( 49 |
50 | {/***Top Cards***/} 51 | 52 | {/***Sales & Feed***/} 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | {/***Table ***/} 62 | 63 | 64 | 65 | 66 | 67 | {/***Blog Cards***/} 68 | {/* 69 | {BlogData.map((blg, index) => ( 70 | 71 | 78 | 79 | ))} 80 | */} 81 |
82 | ); 83 | }; 84 | 85 | export default Starter; 86 | -------------------------------------------------------------------------------- /src/routes/Router.js: -------------------------------------------------------------------------------- 1 | import { lazy } from "react"; 2 | import { Navigate } from "react-router-dom"; 3 | 4 | /****Layouts*****/ 5 | const FullLayout = lazy(() => import("../layouts/FullLayout.js")); 6 | 7 | /***** Pages ****/ 8 | 9 | const Starter = lazy(() => import("../views/Starter.js")); 10 | const About = lazy(() => import("../views/About.js")); 11 | const Alerts = lazy(() => import("../views/ui/Alerts")); 12 | const Badges = lazy(() => import("../views/ui/Badges")); 13 | const Buttons = lazy(() => import("../views/ui/Buttons")); 14 | const Cards = lazy(() => import("../views/ui/Cards")); 15 | const Grid = lazy(() => import("../views/ui/Grid")); 16 | const Tables = lazy(() => import("../views/ui/Tables")); 17 | const Forms = lazy(() => import("../views/ui/Forms")); 18 | const Breadcrumbs = lazy(() => import("../views/ui/Breadcrumbs")); 19 | const Landing = lazy(() => import("../components/landing.jsx")); 20 | const Hospital = lazy(() => import("../components/hospital.jsx")); 21 | const Pharmacy = lazy(() => import("../components/pharmacy.jsx")); 22 | const Nursary = lazy(() => import("../components/nursary.jsx")); 23 | const Appointments = lazy(() => import("../components/appointments.jsx")); 24 | const Profile = lazy(() => import("../components/profile.jsx")); 25 | /*****Routes******/ 26 | 27 | const ThemeRoutes = [ 28 | { 29 | path: "/", 30 | element: , 31 | }, 32 | { 33 | path: "/profile", 34 | element: , 35 | }, 36 | { 37 | path: "/pharmacy", 38 | element: , 39 | }, 40 | { 41 | path: "/nursary", 42 | element: , 43 | }, 44 | { 45 | path: "/appointments", 46 | element: , 47 | }, 48 | { path: "/Hospital", element: }, 49 | { 50 | path: "/dashboard", 51 | element: , 52 | children: [ 53 | { path: "/dashboard", element: }, 54 | { path: "/dashboard/starter", exact: true, element: }, 55 | { path: "/dashboard/about", exact: true, element: }, 56 | { path: "/dashboard/alerts", exact: true, element: }, 57 | { path: "/dashboard/badges", exact: true, element: }, 58 | { path: "/dashboard/buttons", exact: true, element: }, 59 | { path: "/dashboard/cards", exact: true, element: }, 60 | { path: "/dashboard/grid", exact: true, element: }, 61 | { path: "/dashboard/table", exact: true, element: }, 62 | { path: "/dashboard/forms", exact: true, element: }, 63 | { path: "/dashboard/breadcrumbs", exact: true, element: }, 64 | ], 65 | }, 66 | ]; 67 | 68 | export default ThemeRoutes; 69 | -------------------------------------------------------------------------------- /src/components/nursary.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Fade from "react-awesome-reveal"; 3 | import Hero from "./hero"; 4 | import { NavLink } from "react-router-dom"; 5 | import NursaryCards from "./nursaryCards"; 6 | const Nursary = () => { 7 | return ( 8 | <> 9 | 10 | 15 | 16 |
Our services
17 |
18 | 19 | 24 | 29 | 34 | 39 | 44 | 49 | 54 | 55 |
56 | 57 | ); 58 | }; 59 | 60 | export default Nursary; 61 | -------------------------------------------------------------------------------- /src/components/speciality.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ".././styles/speciality.css"; 3 | import Fade from "react-awesome-reveal"; 4 | import DoctorNurseCards from "./doctorNurseCards"; 5 | import SpecialityCard from "./specialityCards"; 6 | const Speciality = () => { 7 | return ( 8 | <> 9 |
10 |

specliality

11 |

view all

12 |
{" "} 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 |
23 |

Top Doctors

24 |
25 | 26 | 31 | 36 | 41 | 46 | 47 |
48 |
49 |
50 |

Top Nurses

51 |
52 | 53 | 58 | 63 | 68 | 69 |
70 |
71 |
72 | 73 | ); 74 | }; 75 | 76 | export default Speciality; 77 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Hero from "./components/hero.jsx"; 3 | import ImageSlider from "./components/imageSlider.jsx"; 4 | import { Navigation } from "./components/navigation.jsx"; 5 | import Landing from "./components/landing"; 6 | import { Route, Routes } from "react-router-dom"; 7 | import "animate.css"; 8 | 9 | import Create from "./components/create.jsx"; 10 | import Pharmacy from "./components/pharmacy.jsx"; 11 | import Hospital from "./components/hospital"; 12 | import Nursary from "./components/nursary"; 13 | import Appointments from "./components/appointments"; 14 | import Profile from "./components/profile"; 15 | import Login from "./components/login"; 16 | import Log from "./components/log"; 17 | import AppointmentsPage from "./components/appointmentsPage"; 18 | import AppointmentBooking from "./components/appointmentBooking"; 19 | import RequestAppointment from "./components/requestAppointment"; 20 | import MedicineInfo from "./components/medicineInfo"; 21 | import SignUp from "./components/signUp"; 22 | import Starter from "./views/Starter"; 23 | import FullLayout from "./layouts/FullLayout"; 24 | import Alerts from "./views/ui/Alerts"; 25 | import Badges from "./views/ui/Badges"; 26 | import Tables from "./views/ui/Tables"; 27 | import Forms from "./views/ui/Forms"; 28 | import Buttons from "./views/ui/Buttons"; 29 | import Cards from "./views/ui/Cards"; 30 | import Grid from "./views/ui/Grid"; 31 | import Breadcrumbs from "./views/ui/Breadcrumbs"; 32 | import About from "./views/About"; 33 | import Member from "./components/member"; 34 | import DocMember from "./components/docMember"; 35 | import HospitalForm from "./components/hospitalForm"; 36 | 37 | const App = () => { 38 | return ( 39 | <> 40 | 41 | 42 | } /> 43 | } /> 44 | } /> 45 | } /> 46 | } /> 47 | } /> 48 | } /> 49 | } /> 50 | } /> 51 | } /> 52 | } /> 53 | } /> 54 | } /> 55 | }> 56 | } /> 57 | } /> 58 | } /> 59 | } /> 60 | } /> 61 | } /> 62 | } /> 63 | } /> 64 | } /> 65 | 66 | 67 | } /> 68 | } /> 69 | } /> 70 | 71 | 72 | ); 73 | }; 74 | 75 | export default App; 76 | -------------------------------------------------------------------------------- /src/components/login.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BsGoogle } from "react-icons/bs"; 3 | import { NavLink } from "react-router-dom"; 4 | 5 | const Login = () => { 6 | return ( 7 | <> 8 |

9 |

10 |

11 |
12 |
13 |

16 | Login with Your account 17 |

18 |

19 |

20 |
21 |
22 | 23 | 28 |
29 |
30 |
31 | 32 | 37 |
38 |
39 |
40 | 41 | 46 |
47 |
48 |

49 |
58 | 68 |
69 | 70 |

71 |
79 | 80 | 90 |
91 |
92 |
93 |

94 | if you don't have an account? 95 | 96 | {" "} 97 | Create an account 98 | 99 |

100 |
101 |
102 |
103 | 104 | ); 105 | }; 106 | 107 | export default Login; 108 | -------------------------------------------------------------------------------- /src/layouts/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { 4 | Navbar, 5 | Collapse, 6 | Nav, 7 | NavItem, 8 | NavbarBrand, 9 | UncontrolledDropdown, 10 | DropdownToggle, 11 | DropdownMenu, 12 | DropdownItem, 13 | Dropdown, 14 | Button, 15 | } from "reactstrap"; 16 | import Logo from "./Logo"; 17 | import { ReactComponent as LogoWhite } from "../assets/images/logos/adminprowhite.svg"; 18 | import user1 from "../assets/images/users/user4.jpg"; 19 | 20 | const Header = () => { 21 | const [isOpen, setIsOpen] = React.useState(false); 22 | 23 | const [dropdownOpen, setDropdownOpen] = React.useState(false); 24 | 25 | const toggle = () => setDropdownOpen((prevState) => !prevState); 26 | const Handletoggle = () => { 27 | setIsOpen(!isOpen); 28 | }; 29 | const showMobilemenu = () => { 30 | document.getElementById("sidebarArea").classList.toggle("showSidebar"); 31 | }; 32 | return ( 33 | 40 |
41 |
42 |

Dr.Ngoga

43 |
44 | 45 | 46 | 47 | 54 |
55 |
56 | 68 |
69 | 70 | 71 | 94 | 95 | 96 | profile 102 | 103 | 104 | Info 105 | My Account 106 | Edit Profile 107 | 108 | Inbox 109 | Logout 110 | 111 | 112 | 113 | 114 | ); 115 | }; 116 | 117 | export default Header; 118 | -------------------------------------------------------------------------------- /src/assets/images/logos/materialpro.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/styles/search.css: -------------------------------------------------------------------------------- 1 | .searchDescription{ 2 | font-family: 'Inter'; 3 | font-style: normal; 4 | font-weight: 400; 5 | font-size: 13px; 6 | line-height: 30px; 7 | text-align: center; 8 | 9 | color: #98A7AD; 10 | 11 | } 12 | .searchBoxContainter{ 13 | background: #43D5CB; 14 | border-radius: 100px; 15 | } 16 | .seric{ 17 | font-size: 15px; 18 | color: white; 19 | margin-right: 20px; 20 | cursor:pointer} 21 | 22 | .searchBox{ 23 | width: 251px; 24 | height: 50px; 25 | background: #43D5CB; 26 | border-radius: 100px; 27 | border: none; 28 | font-family: 'Inter'; 29 | font-style: normal; 30 | font-weight: 200; 31 | font-size: 14px; 32 | line-height: 10px; 33 | text-align: center; 34 | 35 | color: white; 36 | } 37 | .searchBox::placeholder{ 38 | color:white; 39 | font-size: 12px; 40 | font-weight: lighter; 41 | 42 | } 43 | .searchBox:focus{ 44 | outline:none 45 | } 46 | .searchContainer{ 47 | display: flex; 48 | flex-direction: column; 49 | justify-content: center; 50 | gap: 2px; 51 | align-items: center; 52 | } 53 | 54 | .searchDescriptionContainer{ 55 | margin-top: 10px; 56 | } 57 | 58 | 59 | @media only screen and (min-width: 481px) and (max-width: 1024px) { 60 | .searchDescription{ 61 | width: 700px; 62 | height: 120px; 63 | font-family: 'Inter'; 64 | font-style: normal; 65 | font-weight: 400; 66 | font-size: 25px; 67 | line-height: 30px; 68 | text-align: center; 69 | 70 | color: #98A7AD; 71 | 72 | } 73 | .searchBox{ 74 | width: 651px; 75 | height: 70px; 76 | background: #43D5CB; 77 | border-radius: 100px; 78 | border: none; 79 | font-family: 'Inter'; 80 | font-style: normal; 81 | font-weight: 400; 82 | font-size: 15px; 83 | line-height: 10px; 84 | 85 | text-align: center; 86 | 87 | color: white; 88 | } 89 | .searchBox::placeholder{ 90 | color:white 91 | } 92 | .searchBox:focus{ 93 | outline:none 94 | } 95 | .searchContainer{ 96 | display: flex; 97 | flex-direction: column; 98 | justify-content: center; 99 | gap: 2px; 100 | align-items: center; 101 | } 102 | .searchDescriptionContainer{ 103 | margin-top: 40px; 104 | } 105 | .searchBoxContainter{ 106 | margin-top: -50px; 107 | } 108 | 109 | } 110 | 111 | @media only screen and (min-width: 1200px) { 112 | 113 | 114 | .searchDescription{ 115 | width: 700px; 116 | height: 120px; 117 | font-family: 'Inter'; 118 | font-style: normal; 119 | font-weight: 400; 120 | font-size: 18px; 121 | line-height: 30px; 122 | text-align: center; 123 | 124 | color: #98A7AD; 125 | 126 | } 127 | 128 | .searchBoxContainter{ 129 | background: #43D5CB; 130 | border-radius: 100px; 131 | } 132 | .seric{ 133 | font-size: 20px; 134 | color: white; 135 | margin-right: 20px; 136 | cursor:pointer} 137 | .searchBox{ 138 | width: 500px; 139 | height: 50px; 140 | border: none; 141 | font-family: 'Inter'; 142 | font-style: normal; 143 | /* font-weight: 400; */ 144 | font-size: 17px; 145 | line-height: 10px; 146 | 147 | text-align: center; 148 | 149 | color: white; 150 | } 151 | .searchBox::placeholder{ 152 | color:white; 153 | font-size: 12px; 154 | 155 | } 156 | .searchBox:focus{ 157 | outline:none 158 | } 159 | .searchContainer{ 160 | display: flex; 161 | flex-direction: column; 162 | justify-content: center; 163 | gap: 2px; 164 | align-items: center; 165 | } 166 | .searchDescriptionContainer{ 167 | margin-top: 40px; 168 | } 169 | .searchBoxContainter{ 170 | margin-top: -50px; 171 | } 172 | } -------------------------------------------------------------------------------- /src/components/create.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BsGoogle } from "react-icons/bs"; 3 | import { NavLink } from "react-router-dom"; 4 | 5 | function Create() { 6 | return ( 7 | <> 8 |

9 |

10 |

11 |
12 |
13 |

21 | Create new account 22 |

23 |

24 |

25 |
26 |
27 | 28 | 33 |
34 |
35 |
36 | 37 | 42 |
43 |
44 |
45 | 46 | 51 |
52 |
53 |
54 | 57 | 62 |
63 |
64 |

65 |
74 | 84 |
85 | 86 |

87 |
95 | 96 | 106 |
107 |
108 |
109 |

110 | if you already have an account? 111 | 112 | {" "} 113 | Login Here 114 | 115 |

116 |
117 |
118 |
119 | 120 | ); 121 | } 122 | 123 | export default Create; 124 | -------------------------------------------------------------------------------- /src/styles/appointmentBooking.css: -------------------------------------------------------------------------------- 1 | .overlayStyles{ 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100%; 7 | background-color: rgba(0, 0, 0, 0.5); 8 | z-index: 1; 9 | } 10 | .popupStyles{ 11 | position: fixed; 12 | top: 50%; 13 | left: 50%; 14 | transform: translate(-50%, -50%); 15 | width: 300px; 16 | height: 580px; 17 | background-color: white; 18 | z-index: 2; 19 | border-radius: 5px; 20 | padding: 20px; 21 | box-sizing: border-box; 22 | max-width:100%; 23 | } 24 | .helperImage{ 25 | width: 300px; 26 | height: 300px; 27 | max-width: 100%; 28 | } 29 | .helperImageContainer{ 30 | display:flex; 31 | justify-content: center; 32 | align-items: center;} 33 | .helperName{ 34 | font-weight: bolder; 35 | margin-left: 70px; 36 | } 37 | .helperDescription{ 38 | color: grey; 39 | margin-left: 80px; 40 | } 41 | .helperDesc{ 42 | color: grey; 43 | font-weight: bolder; 44 | font-style: italic; 45 | font-size: 12px; 46 | margin-top: 10px; 47 | } 48 | .bookingButtons{ 49 | display: flex; 50 | flex-direction: row; 51 | margin-top: 50px; 52 | gap: 10px; 53 | margin-top: 20px; 54 | } 55 | .price{ 56 | width: 70px; 57 | border-radius: 10%; 58 | border:1px solid grey; 59 | background: white; 60 | color: #43D5CB; 61 | font-weight: bolder; 62 | } 63 | .book{ 64 | height:50px; 65 | border-radius: 10%; 66 | background: #43D5CB; 67 | color: white; 68 | border: none; 69 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 70 | font-size: 14px; 71 | } 72 | .book:focus{ 73 | outline:none; 74 | } 75 | .four{ 76 | max-width: 100%; 77 | width: 100%; 78 | } 79 | .five{ 80 | max-width: 100%; 81 | width: 100%; 82 | } 83 | .six{ 84 | max-width: 100%; 85 | width: 100%; 86 | } 87 | .cancel{ 88 | background-color: transparent; 89 | border: none; 90 | font-size: 20px; 91 | cursor: pointer; 92 | } 93 | @media only screen and (min-width: 481px) and (max-width: 1024px) { 94 | .popupStyles{ 95 | position: fixed; 96 | top: 50%; 97 | left: 50%; 98 | transform: translate(-50%, -50%); 99 | width: 500px; 100 | height: 700px; 101 | background-color: white; 102 | z-index: 2; 103 | border-radius: 5px; 104 | padding: 20px; 105 | box-sizing: border-box, 106 | } 107 | .helperImage{ 108 | width: 400px; 109 | height: 400px; 110 | max-width: 100%; 111 | } 112 | .helperName{ 113 | font-weight: bolder; 114 | margin-left: 170px; 115 | margin-top: 5px; 116 | } 117 | .helperDescription{ 118 | color: grey; 119 | margin-left: 180px; 120 | } 121 | .helperDesc{ 122 | font-size: 16px; 123 | } 124 | 125 | .bookingButtons{ 126 | display: flex; 127 | flex-direction: row; 128 | margin-top: 50px; 129 | gap: 10px; 130 | justify-content: center; 131 | align-items: center; } 132 | 133 | 134 | } 135 | @media only screen and (min-width: 1200px) { 136 | .popupStyles{ 137 | position: fixed; 138 | top: 50%; 139 | left: 50%; 140 | transform: translate(-50%, -50%); 141 | width: 800px; 142 | height:500px; 143 | background-color: white; 144 | z-index: 2; 145 | border-radius: 5px; 146 | padding: 20px; 147 | box-sizing: border-box, 148 | } 149 | .helperImage{ 150 | width: 300px; 151 | height: 300px; 152 | max-width: 100%; 153 | } 154 | .six{ 155 | display: grid; 156 | grid-template-columns: 1fr 1fr; 157 | } 158 | .helperDesc{ 159 | font-size: 16px; 160 | margin-top: 100px; 161 | } 162 | .bookingButtons{ 163 | margin-left: 400px; 164 | gap: 90px; 165 | } 166 | .price{ 167 | width: 100px; 168 | margin-left: -60px; 169 | } 170 | .book{ 171 | width:200px; 172 | border-radius: 50px; 173 | } 174 | } -------------------------------------------------------------------------------- /src/styles/pharmaCard.css: -------------------------------------------------------------------------------- 1 | .pharmaCardContainer{ 2 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 3 | width:170px; 4 | height:150px; 5 | border-radius: 10px; 6 | 7 | 8 | } 9 | .pharmaImage{ 10 | width:170px; 11 | height:80px; 12 | background-size: cover; 13 | background-repeat: no-repeat; 14 | background-position: center; 15 | } 16 | .medicineName{ 17 | color: grey; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | font-size: 12px; 22 | margin-top: 10px; 23 | } 24 | .medBtnContainer{ 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | 29 | } 30 | 31 | .medBtn{ 32 | border: 1px solid #43D5CB; 33 | font-size: 12px; 34 | text-align: center; 35 | background: #43D5CB; 36 | color: white; 37 | height: 30px; 38 | font-style: italic; 39 | border-radius: 5px; 40 | margin-top: 5px;} 41 | .containerPharma { 42 | display: grid; 43 | grid-template-columns: repeat(2,1fr); 44 | grid-gap: 20px; 45 | max-width: 100%; 46 | width: 100%; 47 | } 48 | 49 | 50 | 51 | @media only screen and (min-width: 481px) and (max-width: 1024px) { 52 | 53 | .pharmaCardContainer{ 54 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 55 | width:300px; 56 | height:200px; 57 | border-radius: 10px; 58 | 59 | 60 | } 61 | .pharmaImage{ 62 | height:100px; 63 | background-size: cover; 64 | background-repeat: no-repeat; 65 | background-position: center; 66 | background-size: contain; 67 | width: 300px; 68 | 69 | } 70 | .medicineName{ 71 | color: grey; 72 | display: flex; 73 | justify-content: center; 74 | align-items: center; 75 | font-size: 18px; 76 | margin-top: 10px; 77 | } 78 | .medBtnContainer{ 79 | display: flex; 80 | justify-content: center; 81 | align-items: center; 82 | 83 | } 84 | 85 | .medBtn{ 86 | border: 1px solid #43D5CB; 87 | font-size: 16px; 88 | text-align: center; 89 | background: #43D5CB; 90 | color: white; 91 | height: 40px; 92 | 93 | font-style: italic; 94 | border-radius: 5px; 95 | margin-top: 16px; 96 | width:100px} 97 | .containerPharma { 98 | display: grid; 99 | grid-template-columns: repeat(2,1fr); 100 | grid-gap: 20px; 101 | /* margin-left: 30px; */ 102 | padding-left: 40px; 103 | max-width: 100%; 104 | width: 100%; 105 | } 106 | 107 | 108 | } 109 | @media only screen and (min-width: 1200px) { 110 | 111 | 112 | .pharmaCardContainer{ 113 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 114 | width:300px; 115 | height:200px; 116 | border-radius: 10px; 117 | 118 | 119 | } 120 | .pharmaImage{ 121 | height:100px; 122 | background-size: cover; 123 | background-repeat: no-repeat; 124 | background-position: center; 125 | background-size: contain; 126 | width: 300px; 127 | 128 | } 129 | .medicineName{ 130 | color: grey; 131 | display: flex; 132 | justify-content: center; 133 | align-items: center; 134 | font-size: 18px; 135 | margin-top: 10px; 136 | } 137 | .medBtnContainer{ 138 | display: flex; 139 | justify-content: center; 140 | align-items: center; 141 | 142 | } 143 | 144 | .medBtn{ 145 | border: 1px solid #43D5CB; 146 | font-size: 16px; 147 | text-align: center; 148 | background: #43D5CB; 149 | color: white; 150 | height: 40px; 151 | 152 | font-style: italic; 153 | border-radius: 5px; 154 | margin-top: 16px; 155 | width:100px} 156 | .containerPharma { 157 | display: grid; 158 | grid-template-columns: repeat(4,1fr); 159 | grid-gap: 20px; 160 | /* margin-left: 30px; */ 161 | padding-left: 40px; 162 | max-width: 100%; 163 | width: 100%; 164 | } 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | } 173 | -------------------------------------------------------------------------------- /src/views/ui/Forms.js: -------------------------------------------------------------------------------- 1 | import { 2 | Card, 3 | Row, 4 | Col, 5 | CardTitle, 6 | CardBody, 7 | Button, 8 | Form, 9 | FormGroup, 10 | Label, 11 | Input, 12 | FormText, 13 | } from "reactstrap"; 14 | 15 | const Forms = () => { 16 | return ( 17 | 18 | 19 | {/* --------------------------------------------------------------------------------*/} 20 | {/* Card-1*/} 21 | {/* --------------------------------------------------------------------------------*/} 22 | 23 | 24 | 25 | Form Example 26 | 27 | 28 |
29 | 30 | 31 | 37 | 38 | 39 | 40 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | This is some placeholder block-level help text for the above 81 | input. It's a bit lighter and easily wraps to a new line. 82 | 83 | 84 | 85 | Radio Buttons 86 | 87 | {" "} 88 | 92 | 93 | 94 | {" "} 95 | 99 | 100 | 101 | {" "} 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 |
110 | 111 | 112 | 113 | 114 | ); 115 | }; 116 | 117 | export default Forms; 118 | -------------------------------------------------------------------------------- /src/components/hospital.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Hero from "./hero"; 3 | import { BsSearch } from "react-icons/bs"; 4 | import Fade from "react-awesome-reveal"; 5 | import HospitalCards from "./hospitalCards"; 6 | import axios from "axios"; 7 | import { Link } from "react-router-dom"; 8 | 9 | const Hospital = () => { 10 | const [searchText, setSearchText] = useState(""); 11 | const [hospitals, setHospitals] = useState([]); 12 | const [showTopSearches, setShowTopSearches] = useState(true); 13 | const handleSearch = async () => { 14 | try { 15 | const response = await axios.post( 16 | `https://health-savvy.onrender.com/api/search/hospital?specialization=${searchText}` 17 | // { specialization: searchText } 18 | ); 19 | console.log(response); 20 | const data = response.data; 21 | 22 | setHospitals(data); 23 | } catch (error) { 24 | console.error(error); 25 | } 26 | setShowTopSearches(false); 27 | console.log(searchText); 28 | }; 29 | return ( 30 | <> 31 | 37 |
38 |
39 |

40 | See Nearby Hospitals specialized in your medical 41 | condition 42 |

43 |
44 |
45 | setSearchText(e.target.value)} 51 | /> 52 | 53 | 54 | {" "} 55 |
56 |
57 |
58 |

Top Searches

59 |
60 |
61 | {hospitals.map((hospital) => ( 62 | 73 | ))} 74 | {hospitals.length === 0 && showTopSearches && ( 75 | <> 76 | 81 | 86 | 91 | 96 | 101 | {" "} 106 | 107 | )} 108 |
109 | 110 | ); 111 | }; 112 | 113 | export default Hospital; 114 | -------------------------------------------------------------------------------- /src/assets/images/logos/adminpro.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/views/ui/Grid.js: -------------------------------------------------------------------------------- 1 | import { Container, Col, Row, Card, CardBody, CardTitle } from "reactstrap"; 2 | 3 | const Grid = () => { 4 | return ( 5 |
6 | {/* --------------------------------------------------------------------------------*/} 7 | {/* Start Inner Div*/} 8 | {/* --------------------------------------------------------------------------------*/} 9 | {/* --------------------------------------------------------------------------------*/} 10 | {/* Row*/} 11 | {/* --------------------------------------------------------------------------------*/} 12 | 13 | 14 | Grid Layout 15 | 16 | 17 | 18 | 19 | 20 |
.col
21 | 22 | 23 | 24 | 25 |
.col
26 | 27 | 28 |
.col
29 | 30 | 31 |
.col
32 | 33 | 34 |
.col
35 | 36 | 37 | 38 | 39 |
.col-3
40 | 41 | 42 |
43 | .col-auto - variable width content 44 |
45 | 46 | 47 |
.col-3
48 | 49 | 50 | 51 | 52 |
.col-6
53 | 54 | 55 |
.col-6
56 | 57 | 58 | 59 | 60 |
.col-6 .col-sm-4
61 | 62 | 63 |
.col-6 .col-sm-4
64 | 65 | 66 |
.col-sm-4
67 | 68 | 69 | 70 | 77 |
78 | .col-sm-6 .col-sm-order-2 .col-sm-offset-2 79 |
80 | 81 | 82 | 83 | 90 |
91 | .col-sm-12 .col-md-6 .col-md-offset-3 92 |
93 | 94 | 95 | 96 | 102 |
103 | .col-sm .col-sm-offset-1 104 |
105 | 106 | 112 |
113 | .col-sm .col-sm-offset-1 114 |
115 | 116 | 117 | 118 | 119 | 120 | {/* --------------------------------------------------------------------------------*/} 121 | {/* Row*/} 122 | {/* --------------------------------------------------------------------------------*/} 123 | 124 | {/* --------------------------------------------------------------------------------*/} 125 | {/* End Inner Div*/} 126 | {/* --------------------------------------------------------------------------------*/} 127 |
128 | ); 129 | }; 130 | 131 | export default Grid; 132 | -------------------------------------------------------------------------------- /src/views/ui/Tables.js: -------------------------------------------------------------------------------- 1 | import ProjectTables from "../../components/dashboard/ProjectTable"; 2 | import { Row, Col, Table, Card, CardTitle, CardBody } from "reactstrap"; 3 | 4 | const Tables = () => { 5 | return ( 6 | 7 | {/* --------------------------------------------------------------------------------*/} 8 | {/* table-1*/} 9 | {/* --------------------------------------------------------------------------------*/} 10 | 11 | 12 | 13 | {/* --------------------------------------------------------------------------------*/} 14 | {/* table-2*/} 15 | {/* --------------------------------------------------------------------------------*/} 16 | 17 | 18 | 19 | 20 | Table with Border 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
53 | 54 | 55 | 56 | {/* --------------------------------------------------------------------------------*/} 57 | {/* table-3*/} 58 | {/* --------------------------------------------------------------------------------*/} 59 | 60 | 61 | 62 | 63 | Table with Striped 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
96 | 97 | 98 | 99 | {/* --------------------------------------------------------------------------------*/} 100 | {/* table-3*/} 101 | {/* --------------------------------------------------------------------------------*/} 102 | 103 | 104 | 105 | 106 | Table with Hover 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
139 | 140 | 141 | 142 | 143 | ); 144 | }; 145 | 146 | export default Tables; 147 | -------------------------------------------------------------------------------- /src/components/signIn.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Link, useNavigate } from "react-router-dom"; 3 | import { FaEnvelope, FaLock } from "react-icons/fa"; 4 | import axios from "axios"; 5 | 6 | const LoginForm = () => { 7 | const navigate = useNavigate(); 8 | const [formInputs, setFormInputs] = useState({ 9 | email: "", 10 | password: "", 11 | }); 12 | const [formErrors, setFormErrors] = useState({ 13 | email: "", 14 | password: "", 15 | }); 16 | 17 | const validateEmail = (email) => { 18 | const re = /\S+@\S+\.\S+/; 19 | return re.test(email); 20 | }; 21 | 22 | const handleInputChange = (event) => { 23 | const { name, value } = event.target; 24 | setFormInputs({ ...formInputs, [name]: value }); 25 | setFormErrors({ ...formErrors, [name]: "" }); 26 | }; 27 | 28 | const handleFormSubmit = (event) => { 29 | event.preventDefault(); 30 | let errors = {}; 31 | if (!validateEmail(formInputs.email)) { 32 | errors.email = "Invalid email address"; 33 | } 34 | if (formInputs.password.length < 4) { 35 | errors.password = "Password must be at least 5 characters"; 36 | } 37 | if (Object.keys(errors).length === 0) { 38 | axios 39 | .post("https://health-savvy.onrender.com/api/client/login", formInputs) 40 | .then((response) => { 41 | console.log(response); 42 | navigate("/requestAppointment"); 43 | }) 44 | .catch((error) => { 45 | console.log(error); 46 | setFormErrors({ 47 | ...formErrors, 48 | password: "Invalid email or password", 49 | }); 50 | }); 51 | } else { 52 | setFormErrors(errors); 53 | } 54 | }; 55 | 56 | return ( 57 |
58 |
59 |
60 |
61 |
62 |

65 | Login before you send request 66 |

67 |
68 |
69 |
70 |
71 | 72 |
73 |
74 | 75 | 76 | 77 |
78 | 90 | {formErrors.email && ( 91 |
{formErrors.email}
92 | )} 93 |
94 |
95 |
96 | 97 |
98 |
99 | 100 | 101 | 102 |
103 | 115 | {formErrors.password && ( 116 |
117 | {formErrors.password} 118 |
119 | )} 120 |
121 |
122 | 125 |
{" "} 126 |
127 |

134 | Don't have an account? Sign up here 135 |

136 |
137 |
138 |
139 |
140 |
141 |
142 | ); 143 | }; 144 | 145 | export default LoginForm; 146 | -------------------------------------------------------------------------------- /src/components/requestAppointment.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import ".././styles/requestAppointment.css"; 3 | import { useNavigate, Link } from "react-router-dom"; 4 | import Success from "./success"; 5 | import axios from "axios"; 6 | const RequestAppointment = () => { 7 | const [showSuccessPopup, setShowSuccessPopup] = useState(false); 8 | const [email, setEmail] = useState(""); 9 | 10 | const navigate = useNavigate(); 11 | const [formInputs, setFormInputs] = useState({ 12 | name: "", 13 | number: "", 14 | message: "", 15 | }); 16 | const [formValidity, setFormValidity] = useState({ 17 | name: true, 18 | number: true, 19 | message: true, 20 | }); 21 | const [formSubmitted, setFormSubmitted] = useState(false); 22 | 23 | const handleInputChange = (event) => { 24 | const { name, value } = event.target; 25 | setFormInputs({ ...formInputs, [name]: value }); 26 | }; 27 | const handleFormSubmit = async (event) => { 28 | event.preventDefault(); 29 | const { name, number, message } = formInputs; 30 | const isNameValid = name.trim().length > 2; 31 | const isNumberValid = number.trim().length === 10; 32 | const isMessageValid = message.trim().length > 10; 33 | setFormValidity({ 34 | name: isNameValid, 35 | number: isNumberValid, 36 | message: isMessageValid, 37 | }); 38 | setFormSubmitted(true); 39 | 40 | if (isNameValid && isMessageValid) { 41 | try { 42 | const response = await axios.post( 43 | `https://health-savvy.onrender.com/api/booking/doctor/64131981b8cc5d7abe053c06`, 44 | { 45 | email, 46 | phoneNumber: number, 47 | message, 48 | }, 49 | { 50 | headers: { 51 | Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY0MTE5MTg1OGRjNGRhM2MwMWQ4N2ExYyIsImlhdCI6MTY3ODk2ODE5OCwiZXhwIjoxNjgxNTYwMTk4fQ.emaGc0NuimiWtwn97FpXcs-ALv_g-WQbyUGEvzYbsvo`, 52 | }, 53 | } 54 | ); 55 | console.log(response); 56 | setShowSuccessPopup(true); 57 | setFormInputs({ 58 | name: "", 59 | number: "", 60 | message: "", 61 | }); 62 | setFormValidity({ 63 | name: true, 64 | number: true, 65 | message: true, 66 | }); 67 | } catch (error) { 68 | console.log(error); 69 | } 70 | } 71 | }; 72 | const handleCancel = () => { 73 | navigate("/appointmentBooking"); 74 | }; 75 | const validateEmail = (email) => { 76 | const re = /\S+@\S+\.\S+/; 77 | return re.test(email); 78 | }; 79 | 80 | return ( 81 | <> 82 |
83 |
84 | 87 |
SEND REQUEST
88 |
89 |
90 | 91 | 100 | {formSubmitted && !formValidity.name && ( 101 |

Please enter a valid name

102 | )} 103 | 104 | 105 | 114 | {formSubmitted && !formValidity.number && ( 115 |

116 | Please enter a valid phone number 117 |

118 | )} 119 | 120 | setEmail(e.target.value)} 129 | /> 130 | 131 | 132 | 138 | {formSubmitted && !formValidity.message && ( 139 |

Please enter a valid message

140 | )} 141 | {showSuccessPopup && ( 142 | 146 | )} 147 | 148 | 149 | 150 |
151 |
152 | 153 | ); 154 | }; 155 | 156 | export default RequestAppointment; 157 | -------------------------------------------------------------------------------- /src/components/loginAdmin.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useNavigate, Link } from "react-router-dom"; 3 | import { FaEnvelope, FaLock } from "react-icons/fa"; 4 | import axios from "axios"; 5 | 6 | const LoginAdmin = () => { 7 | const navigate = useNavigate(); 8 | const [formInputs, setFormInputs] = useState({ 9 | email: "", 10 | password: "", 11 | }); 12 | const [formErrors, setFormErrors] = useState({ 13 | email: "", 14 | password: "", 15 | }); 16 | 17 | const validateEmail = (email) => { 18 | const re = /\S+@\S+\.\S+/; 19 | return re.test(email); 20 | }; 21 | 22 | const handleInputChange = (event) => { 23 | const { name, value } = event.target; 24 | setFormInputs({ ...formInputs, [name]: value }); 25 | setFormErrors({ ...formErrors, [name]: "" }); 26 | }; 27 | 28 | const handleFormSubmit = (event) => { 29 | event.preventDefault(); 30 | let errors = {}; 31 | if (!validateEmail(formInputs.email)) { 32 | errors.email = "Invalid email address"; 33 | } 34 | if (formInputs.password.length < 4) { 35 | errors.password = "Password must be at least 5 characters"; 36 | } 37 | if (Object.keys(errors).length === 0) { 38 | axios 39 | .post( 40 | "https://health-savvy.onrender.com/api/doctor/dashboard/login", 41 | formInputs 42 | ) 43 | .then((response) => { 44 | console.log(response); 45 | const authToken = response.data.token; 46 | console.log("token:", authToken); 47 | axios.defaults.headers.common[ 48 | "Authorization" 49 | ] = `Bearer ${authToken}`; 50 | navigate("/dashboard/starter"); 51 | }) 52 | .catch((error) => { 53 | console.log(error); 54 | setFormErrors({ 55 | ...formErrors, 56 | password: "Invalid email or password", 57 | }); 58 | }); 59 | } else { 60 | setFormErrors(errors); 61 | } 62 | }; 63 | return ( 64 | <> 65 |
66 |
67 |
68 |
69 |
70 |

71 | Login here 72 |

73 |
74 |
75 |
76 |
77 | 78 |
79 |
80 | 81 | 82 | 83 |
84 | 96 | {formErrors.email && ( 97 |
98 | {formErrors.email} 99 |
100 | )} 101 |
102 |
103 |
104 | 105 |
106 |
107 | 108 | 109 | 110 |
111 | 123 | {formErrors.password && ( 124 |
125 | {formErrors.password} 126 |
127 | )} 128 |
129 |
130 | 133 |
134 |
135 |

136 | Don't have an account?{" "} 137 | Sign up here 138 |

139 |
140 |
141 |
142 |
143 |
144 |
145 | 146 | ); 147 | }; 148 | 149 | export default LoginAdmin; 150 | -------------------------------------------------------------------------------- /src/styles/appointments.css: -------------------------------------------------------------------------------- 1 | * body{ 2 | background:rgba(243,245,249,255); 3 | } 4 | .appWelcome{ 5 | font-size: 12px; 6 | margin-top: 5px; 7 | color:#43D5CB; 8 | } 9 | .appointmentIconwel{ 10 | display: flex; 11 | flex-direction: row; 12 | gap: 5px; 13 | } 14 | 15 | 16 | .appointmentSeachContainer{ 17 | display: flex; 18 | flex-direction: column; 19 | gap: 10px; 20 | justify-content: center; 21 | align-items: center; 22 | margin-top: 50px; 23 | } 24 | .appParagraph{ 25 | font-size: 12px; 26 | text-shadow: 1px 1px 1px black; 27 | 28 | } 29 | 30 | .appSearch{ 31 | 32 | border:1px solid #43D5CB; 33 | width:250px; 34 | height: 50px; 35 | border-radius: 250px; 36 | display: flex; 37 | flex-direction: row; 38 | background: #43D5CB; 39 | 40 | } 41 | .searchapp{ 42 | margin-top: 20px; 43 | margin-left: 30px; 44 | font-size: 14px; 45 | color: white; 46 | } 47 | .appSearch input{ 48 | border: none; 49 | background: #43D5CB; 50 | width:250px; 51 | height: 40px; 52 | color: white; 53 | height: 50px; 54 | border-radius: 100px; 55 | 56 | } 57 | .appSearch input:focus{ 58 | border: none; 59 | } 60 | 61 | .appSearch input::placeholder{ 62 | font-size: 11px; 63 | text-align: center; 64 | color:white 65 | } 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | @media only screen and (min-width: 481px) and (max-width: 1024px) { 78 | .appWelcome{ 79 | font-size: 25px; 80 | margin-top: 10px; 81 | color:#43D5CB; 82 | } 83 | .appointmentIconwel{ 84 | display: flex; 85 | flex-direction: row; 86 | gap: 10px; 87 | justify-content: center; 88 | align-items: center; 89 | 90 | } 91 | .appIccon{ 92 | color: #919192; 93 | font-size: 40px; 94 | margin-top: 10px; 95 | } 96 | 97 | .appointmentSeachContainer{ 98 | display: flex; 99 | flex-direction: column; 100 | gap: 10px; 101 | justify-content: center; 102 | align-items: center; 103 | margin-top: 50px; 104 | } 105 | .appParagraph{ 106 | font-size: 20px; 107 | } 108 | 109 | .appSearch{ 110 | width: 641px; 111 | height: 80px; 112 | 113 | background: #43D5CB; 114 | border-radius: 15px; 115 | 116 | } 117 | .searchapp{ 118 | margin-top: 20px; 119 | margin-left: 20px; 120 | font-size: 40px; 121 | color: white; 122 | } 123 | .appSearch input{ 124 | border: none; 125 | background: #43D5CB; 126 | width: 641px; 127 | height: 80px; 128 | color: white; 129 | margin-top: 10px; 130 | font-size: 30px; 131 | height: 50px; 132 | margin-left: 20px; 133 | border-radius: 100px; 134 | 135 | } 136 | .appSearch input:focus{ 137 | border: none; 138 | outline: none; 139 | } 140 | 141 | .appSearch input::placeholder{ 142 | font-size: 20px; 143 | text-align: center; 144 | color:white 145 | } 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | } 158 | @media only screen and (min-width: 1200px) { 159 | /* Add styles for computers here */ 160 | .appWelcome{ 161 | font-size: 25px; 162 | margin-top: 10px; 163 | color:#43D5CB; 164 | } 165 | .appointmentIconwel{ 166 | display: flex; 167 | flex-direction: row; 168 | gap: 10px; 169 | } 170 | .appIccon{ 171 | color: #919192; 172 | font-size: 40px; 173 | margin-top: 10px; 174 | } 175 | 176 | /* SEARCH */ 177 | .appointmentSeachContainer{ 178 | display: flex; 179 | flex-direction: column; 180 | gap: 20px; 181 | margin-left: -780px; 182 | margin-top: 50px; 183 | } 184 | .appParagraph{ 185 | font-size: 20px; 186 | margin-left: -20px; 187 | } 188 | 189 | .appSearch{ 190 | width: 641px; 191 | height: 80px; 192 | margin-left: 40px; 193 | background: #43D5CB; 194 | border-radius: 15px; 195 | margin-left: 300px; 196 | max-width: 100%; 197 | } 198 | .searchapp{ 199 | margin-top: 20px; 200 | margin-left: 20px; 201 | font-size: 40px; 202 | font-weight: 900px; 203 | color: white; 204 | } 205 | .appSearch input{ 206 | border: none; 207 | background: #43D5CB; 208 | width: 641px; 209 | height: 80px; 210 | color: white; 211 | margin-top: 10px; 212 | font-size: 30px; 213 | height: 50px; 214 | margin-left: 20px; 215 | border-radius: 100px; 216 | 217 | } 218 | .appSearch input:focus{ 219 | border: none; 220 | outline: none; 221 | } 222 | 223 | .appSearch input::placeholder{ 224 | font-size: 20px; 225 | text-align: center; 226 | color:white 227 | } 228 | 229 | 230 | body{ 231 | overflow-x: hidden; 232 | 233 | } 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | } 245 | 246 | 247 | 248 | 249 | 250 | 251 | -------------------------------------------------------------------------------- /src/components/dashboard/ProjectTable.js: -------------------------------------------------------------------------------- 1 | import { Card, CardBody, CardTitle, CardSubtitle, Table } from "reactstrap"; 2 | import user1 from "../../assets/images/users/user1.jpg"; 3 | import user2 from "../../assets/images/users/user2.jpg"; 4 | import user3 from "../../assets/images/users/user3.jpg"; 5 | import user4 from "../../assets/images/users/user4.jpg"; 6 | import user5 from "../../assets/images/users/user5.jpg"; 7 | 8 | const tableData = [ 9 | { 10 | avatar: user1, 11 | name: "Mugisha Kevine", 12 | email: "hgover@gmail.com", 13 | project: "Monthly checkUP", 14 | status: "pending", 15 | weeks: ( 16 | 23 | ), 24 | budget: ( 25 | 32 | ), 33 | }, 34 | { 35 | avatar: user2, 36 | name: "Prisca Uwamahoro", 37 | email: "hgover@gmail.com", 38 | project: "Monthly CheckUp", 39 | status: "done", 40 | weeks: ( 41 | 48 | ), 49 | budget: ( 50 | 57 | ), 58 | }, 59 | { 60 | avatar: user3, 61 | name: "Nsenga Queen", 62 | email: "hgover@gmail.com", 63 | project: "Anemia", 64 | status: "holt", 65 | weeks: ( 66 | 73 | ), 74 | budget: ( 75 | 82 | ), 83 | }, 84 | { 85 | avatar: user4, 86 | name: "Jean Paul Ngoga", 87 | email: "hgover@gmail.com", 88 | project: "Tuberclosis", 89 | status: "pending", 90 | weeks: ( 91 | 98 | ), 99 | budget: ( 100 | 107 | ), 108 | }, 109 | { 110 | avatar: user5, 111 | name: "Jean Paul Ngoga", 112 | email: "hgover@gmail.com", 113 | project: "Extreme Cough", 114 | status: "done", 115 | weeks: ( 116 | 123 | ), 124 | budget: ( 125 | 132 | ), 133 | }, 134 | ]; 135 | 136 | const ProjectTables = () => { 137 | return ( 138 |
139 | 140 | 141 | Up coming Appointments 142 | 143 | List of patients for today 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | {tableData.map((tdata, index) => ( 159 | 160 | 175 | 176 | 185 | 186 | 187 | 188 | ))} 189 | 190 |
PatientsMedical ConditionStatusPatient InfoCheck
161 |
162 | avatar 169 |
170 |
{tdata.name}
171 | {tdata.email} 172 |
173 |
174 | 		{tdata.project} 177 | {tdata.status === "pending" ? ( 178 | 179 | ) : tdata.status === "holt" ? ( 180 | 181 | ) : ( 182 | 183 | )} 184 | {tdata.weeks}{tdata.budget}
191 | 192 | 193 |
194 | ); 195 | }; 196 | 197 | export default ProjectTables; 198 | -------------------------------------------------------------------------------- /src/styles/hero.css: -------------------------------------------------------------------------------- 1 | .heroContainer{ 2 | max-width: 100%; 3 | width: 100%; 4 | background-size: contain; 5 | background-repeat: no-repeat; 6 | background-size: cover; 7 | } 8 | .heroDescription { 9 | /* margin-left: 200px; */ 10 | padding-top: 40px; 11 | padding-left: 10px; 12 | } 13 | .description { 14 | font-size: 14px; 15 | font-weight: bolder; 16 | display: flex; 17 | align-items: center; 18 | color: #333333; 19 | color: grey; 20 | text-shadow: 1px 1px 1px black; 21 | 22 | } 23 | .descriptionb { 24 | color: #333333; 25 | font-weight: bolder; 26 | font-size: 12px; 27 | color: grey; 28 | text-shadow: 1px 1px 1px black; 29 | 30 | } 31 | 32 | .heroBtn { 33 | margin-left: 100px; 34 | margin-top: 50px; 35 | width: 60px; 36 | height: 40px; 37 | background: #43D5CB; 38 | border: none; 39 | font-family: 'Inter'; 40 | font-style: normal; 41 | font-weight: 700px; 42 | font-size: 8px; 43 | padding-left: 10px; 44 | color: #FCFEFE;} 45 | 46 | .heroBtnSpan { 47 | 48 | width: 40px; 49 | height: 40px; 50 | margin-top: 50px; 51 | display: flex; 52 | justify-content: center; 53 | align-items: center; 54 | margin-right: -60px; 55 | color: white; 56 | font-size: 30px; 57 | background: #37c7be; 58 | } 59 | 60 | .btnContainer { 61 | display: flex; 62 | flex-direction: row; 63 | margin-left: -90px; 64 | padding-bottom:10px ; 65 | 66 | } 67 | .topSearches{ 68 | font-size: 12px; 69 | font-style: italic; 70 | 71 | } 72 | 73 | 74 | 75 | @media only screen and (min-width: 481px) and (max-width: 1024px) { 76 | .heroContainer { 77 | 78 | padding: 0; 79 | max-width: 100%; 80 | width: 100%; 81 | background-size: contain; 82 | background-repeat: no-repeat; 83 | background-size: cover; 84 | } 85 | .heroDescription { 86 | /* margin-left: 200px; */ 87 | padding-top: 120px; 88 | padding-left: 100px; 89 | } 90 | 91 | .description { 92 | font-size: 40px; 93 | width:400px; 94 | display: flex; 95 | align-items: center; 96 | 97 | color: #333333; 98 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);;} 99 | 100 | .descriptionb { 101 | color: #333333; 102 | width:500px; 103 | 104 | font-size: 30px;} 105 | 106 | .heroBtn { 107 | margin-left: 100px; 108 | margin-top: 50px; 109 | width: 180px; 110 | height: 76px; 111 | background: #43D5CB; 112 | border: none; 113 | font-family: 'Inter'; 114 | font-style: normal; 115 | font-weight: 700px; 116 | font-size: 18px; 117 | padding-left: 10px; 118 | color: #FCFEFE;} 119 | 120 | .heroBtnSpan { 121 | 122 | width: 69px; 123 | height: 76px; 124 | margin-top: 50px; 125 | display: flex; 126 | justify-content: center; 127 | align-items: center; 128 | margin-right: -60px; 129 | color: white; 130 | font-size: 30px; 131 | background: #37c7be; 132 | } 133 | 134 | .btnContainer { 135 | display: flex; 136 | flex-direction: row; 137 | margin-left: 0px; 138 | 139 | } 140 | .topSearches{ 141 | max-width: 100%; 142 | width:100%; 143 | font-size: 14px; 144 | color: dodgerblue 145 | 146 | } 147 | 148 | 149 | 150 | } 151 | 152 | 153 | @media only screen and (min-width: 1200px) { 154 | 155 | .heroContainer { 156 | 157 | padding: 0; 158 | background-size: cover; 159 | background-repeat: no-repeat; 160 | object-fit: cover; 161 | width: 100%; 162 | height: auto; 163 | } 164 | .heroDescription { 165 | /* margin-left: 200px; */ 166 | padding-top: 120px; 167 | padding-left: 100px; 168 | } 169 | .topSearches{ 170 | max-width: 100%; 171 | width:100%; 172 | color:dodgerblue; 173 | font-size: 16px; 174 | 175 | } 176 | 177 | 178 | .description { 179 | font-size: 60px; 180 | width:400px; 181 | display: flex; 182 | align-items: center; 183 | 184 | color: #333333; 185 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);} 186 | 187 | .descriptionb { 188 | color: #333333; 189 | width:500px; 190 | font-style: italic; 191 | font-size: 40px;} 192 | 193 | .heroBtn { 194 | margin-left: 190px; 195 | margin-top: 50px; 196 | width: 180px; 197 | height: 76px; 198 | background: #43D5CB; 199 | border: none; 200 | font-family: 'Inter'; 201 | font-style: normal; 202 | font-weight: 700px; 203 | font-size: 18px; 204 | padding-left: 10px; 205 | color: #FCFEFE;} 206 | 207 | .heroBtnSpan { 208 | 209 | width: 69px; 210 | height: 76px; 211 | margin-top: 50px; 212 | display: flex; 213 | justify-content: center; 214 | align-items: center; 215 | margin-right: -60px; 216 | color: white; 217 | font-size: 30px; 218 | background: #37c7be; 219 | } 220 | 221 | .btnContainer { 222 | display: flex; 223 | flex-direction: row; 224 | 225 | } 226 | } -------------------------------------------------------------------------------- /src/components/signUp.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Link, useNavigate } from "react-router-dom"; 3 | import { FaEnvelope, FaLock } from "react-icons/fa"; 4 | import axios from "axios"; 5 | import Success from "./success"; 6 | 7 | const SignUp = () => { 8 | const navigate = useNavigate(); 9 | const [formInputs, setFormInputs] = useState({ 10 | email: "", 11 | password: "", 12 | firstName: "", 13 | lastName: "", 14 | }); 15 | const [formErrors, setFormErrors] = useState({ 16 | email: "", 17 | password: "", 18 | firstName: "", 19 | lastName: "", 20 | }); 21 | 22 | const validateEmail = (email) => { 23 | const re = /\S+@\S+\.\S+/; 24 | return re.test(email); 25 | }; 26 | 27 | const handleInputChange = (event) => { 28 | const { name, value } = event.target; 29 | setFormInputs({ ...formInputs, [name]: value }); 30 | setFormErrors({ ...formErrors, [name]: "" }); 31 | }; 32 | 33 | const handleFormSubmit = (event) => { 34 | event.preventDefault(); 35 | let errors = {}; 36 | if (!validateEmail(formInputs.email)) { 37 | errors.email = "Invalid email address"; 38 | } 39 | if (formInputs.password.length < 4) { 40 | errors.password = "Password must be at least 5 characters"; 41 | } 42 | if (formInputs.firstName.length < 3) { 43 | errors.firstName = "Enter you first name correctly"; 44 | } 45 | if (formInputs.lastName.length < 3) { 46 | errors.lastName = "Enter you last name correctly"; 47 | } 48 | if (Object.keys(errors).length === 0) { 49 | axios 50 | .post( 51 | "https://health-savvy.onrender.com/api/client/createAccount", 52 | formInputs 53 | ) 54 | .then((response) => { 55 | console.log(response); 56 | // ; 57 | alert("Account created successfully,you can now login!"); 58 | navigate("/log"); 59 | }) 60 | .catch((error) => { 61 | console.log(error); 62 | setFormErrors({ 63 | ...formErrors, 64 | password: "Invalid email or password", 65 | }); 66 | }); 67 | } else { 68 | setFormErrors(errors); 69 | } 70 | }; 71 | 72 | return ( 73 |
74 |
75 |
76 |
77 |
78 |

81 | sign up before you send appointment request 82 |

83 |
84 |
85 |
86 |
87 | 88 | 100 | {formErrors.firstName && ( 101 |
102 | {formErrors.firstName} 103 |
104 | )} 105 |
106 |
107 | 108 | 120 | {formErrors.lastName && ( 121 |
122 | {formErrors.lastName} 123 |
124 | )} 125 |
126 |
127 | 128 |
129 |
130 | 131 | 132 | 133 |
134 | 146 | {formErrors.email && ( 147 |
{formErrors.email}
148 | )} 149 |
150 |
151 |
152 | 153 |
154 |
155 | 156 | 157 | 158 |
159 | 171 | {formErrors.password && ( 172 |
173 | {formErrors.password} 174 |
175 | )} 176 |
177 |
178 | 181 |
182 |
183 |

190 | Already have an account? login here 191 |

192 |
193 |
194 |
195 |
196 |
197 |
198 | ); 199 | }; 200 | 201 | export default SignUp; 202 | -------------------------------------------------------------------------------- /src/components/appointmentMessage.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import { Card, CardBody, CardTitle, CardSubtitle, Table } from "reactstrap"; 4 | import user1 from "../assets/images/users/user1.jpg"; 5 | import user2 from "../assets/images/users/user2.jpg"; 6 | import user3 from "../assets/images/users/user3.jpg"; 7 | import user4 from "../assets/images/users/user4.jpg"; 8 | import user5 from "../assets/images/users/user5.jpg"; 9 | const tableData = [ 10 | { 11 | avatar: user1, 12 | name: "Mugisha Kevine", 13 | email: "hgover@gmail.com", 14 | project: "Monthly checkUP", 15 | status: "pending", 16 | weeks: ( 17 | 24 | ), 25 | budget: ( 26 | 33 | ), 34 | }, 35 | { 36 | avatar: user2, 37 | name: "Prisca Uwamahoro", 38 | email: "hgover@gmail.com", 39 | project: "I would like to come for an appointment on tuesday", 40 | status: "done", 41 | weeks: ( 42 | 49 | ), 50 | budget: ( 51 | 58 | ), 59 | }, 60 | { 61 | avatar: user3, 62 | name: "Nsenga Queen", 63 | email: "hgover@gmail.com", 64 | project: "Anemia", 65 | status: "holt", 66 | weeks: ( 67 | 74 | ), 75 | budget: ( 76 | 83 | ), 84 | }, 85 | { 86 | avatar: user4, 87 | name: "Jean Paul Ngoga", 88 | email: "hgover@gmail.com", 89 | project: "Tuberclosis", 90 | status: "pending", 91 | weeks: ( 92 | 99 | ), 100 | budget: ( 101 | 108 | ), 109 | }, 110 | { 111 | avatar: user5, 112 | name: "Jean Paul Ngoga", 113 | email: "hgover@gmail.com", 114 | project: "Extreme Cough", 115 | status: "done", 116 | weeks: ( 117 | 124 | ), 125 | budget: ( 126 | 133 | ), 134 | }, 135 | ]; 136 | 137 | const AppointmentMessage = () => { 138 | const [messages, setMessages] = useState([]); 139 | 140 | useEffect(() => { 141 | const config = { 142 | headers: { 143 | Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY0MTMxOTgxYjhjYzVkN2FiZTA1M2MwNiIsImlhdCI6MTY3OTA0Mjc3MSwiZXhwIjoxNjgxNjM0NzcxfQ.0DAs5-rIqn-H4fh6Zw24mQLd1D8oN0Nv1k1S3-mWEcA`, 144 | }, 145 | }; 146 | axios 147 | .get( 148 | "https://health-savvy.onrender.com/api/doctor/dashboard/message", 149 | config 150 | ) 151 | .then((response) => { 152 | setMessages(response.data); 153 | }) 154 | .catch((error) => { 155 | console.log(error); 156 | }); 157 | }, []); 158 | 159 | const [buttonStyles, setButtonStyles] = useState({ 160 | backgroundColor: "blue", 161 | color: "white", 162 | }); 163 | const handleClick = (id, name, email) => { 164 | const confirmed = window.confirm( 165 | `Are you sure you want to confirm ${name}?` 166 | ); 167 | 168 | if (confirmed) { 169 | setButtonStyles({ 170 | ...buttonStyles, 171 | [id]: { 172 | backgroundColor: "green", 173 | color: "white", 174 | borderRadius: "5px", 175 | height: "36px", 176 | }, 177 | }); 178 | } 179 | }; 180 | 181 | return ( 182 | <> 183 |
184 | 185 | 186 | Up coming Appointments 187 | 188 | List of patients for today 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | {messages.map((item) => ( 203 | 204 | 221 | 222 | 243 | 251 | 252 | ))} 253 | 254 |
PatientsMedical ConditionActionAction
205 |
206 | avatar 213 |
214 |
215 | {item.client.lastName + " " + item.client.firstName}{" "} 216 |
217 | {item.phoneNumber} 218 |
219 |
220 | 		{item.message} 223 | {" "} 224 | 242 | 244 | 250 |
255 | 256 | 257 |
258 | 259 | ); 260 | }; 261 | 262 | export default AppointmentMessage; 263 | -------------------------------------------------------------------------------- /src/components/hospitalForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import axios from "axios"; 3 | import Success from "./success"; 4 | 5 | import "../styles/member.css"; 6 | function HospitalForm() { 7 | const [showSuccessPopup, setShowSuccessPopup] = useState(false); 8 | const [data, setData] = useState({ 9 | location: { 10 | province: "", 11 | district: "", 12 | street: "", 13 | }, 14 | license: null, 15 | hospitalImage: null, 16 | email: "", 17 | password: "", 18 | hospitalName: "", 19 | phoneNumber: "", 20 | specialization: [], 21 | }); 22 | 23 | const handleChange = (event) => { 24 | const { name, value } = event.target; 25 | setData((prevData) => ({ 26 | ...prevData, 27 | [name]: value, 28 | })); 29 | }; 30 | 31 | const handleFileChange = (event) => { 32 | const { name, files } = event.target; 33 | setData((prevData) => ({ 34 | ...prevData, 35 | [name]: files[0], 36 | })); 37 | }; 38 | 39 | const handleSpecializationChange = (event) => { 40 | const { value } = event.target; 41 | setData((prevData) => ({ 42 | ...prevData, 43 | specialization: [value], // store value as an array 44 | })); 45 | }; 46 | const handleLocationChange = (event) => { 47 | const { name, value } = event.target; 48 | setData((prevData) => ({ 49 | ...prevData, 50 | location: { 51 | ...prevData.location, 52 | [name]: value, 53 | }, 54 | })); 55 | }; 56 | const handleSubmit = async (event) => { 57 | event.preventDefault(); 58 | console.log("submiting.."); 59 | const formData = new FormData(); 60 | formData.append("location[province]", data.location.province); 61 | formData.append("location[district]", data.location.district); 62 | formData.append("location[street]", data.location.street); 63 | formData.append("location[address]", data.location.address); 64 | formData.append("license", data.license); 65 | formData.append("hospitalImage", data.hospitalImage); 66 | formData.append("email", data.email); 67 | formData.append("password", data.password); 68 | formData.append("hospitalName", data.hospitalName); 69 | formData.append("phoneNumber", data.phoneNumber); 70 | // Use forEach to add each specialization value as an array 71 | data.specialization.forEach((value) => { 72 | formData.append("specialization[]", value); 73 | }); 74 | try { 75 | const response = await axios.post( 76 | "https://health-savvy.onrender.com/api/register/hospital/", 77 | formData, 78 | { 79 | headers: { 80 | "Content-Type": "multipart/form-data", 81 | }, 82 | } 83 | ); 84 | console.log(response.data); 85 | } catch (error) { 86 | console.log(error); 87 | } 88 | setShowSuccessPopup(true); 89 | }; 90 | 91 | return ( 92 |
93 |

Apply for membership below

94 | 95 |
96 |
97 | 109 |
110 |
111 | 122 |
123 |
124 | 135 |
136 |
137 | 148 |
149 |
150 | 160 |
161 |
162 | 172 |
173 |
174 | 185 |
186 |
187 | {" "} 198 |
199 |
200 | {" "} 211 |
212 | 213 |
214 | {" "} 225 |
226 |
227 | {" "} 238 |
239 | {showSuccessPopup && ( 240 | 241 | )} 242 | 243 | 246 | 247 |
248 | ); 249 | } 250 | export default HospitalForm; 251 | -------------------------------------------------------------------------------- /src/components/member.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "../styles/member.css"; 3 | import axios from "axios"; 4 | import Success from "./success"; 5 | 6 | const Member = () => { 7 | const [showSuccessPopup, setShowSuccessPopup] = useState(false); 8 | const [data, setData] = useState({ 9 | location: { 10 | province: "", 11 | district: "", 12 | street: "", 13 | address:"", 14 | }, 15 | license: null, 16 | pharmacyImage: null, 17 | profileImage: null, 18 | email: "", 19 | password: "", 20 | pharmacyName: "", 21 | pharmacistName: "", 22 | phoneNumber: "", 23 | }); 24 | 25 | const handleChange = (event) => { 26 | const { name, value } = event.target; 27 | setData((prevData) => ({ 28 | ...prevData, 29 | [name]: value, 30 | })); 31 | }; 32 | 33 | const handleFileChange = (event) => { 34 | const { name, files } = event.target; 35 | setData((prevData) => ({ 36 | ...prevData, 37 | [name]: files[0], 38 | })); 39 | }; 40 | 41 | const handleLocationChange = (event) => { 42 | const { name, value } = event.target; 43 | setData((prevData) => ({ 44 | ...prevData, 45 | location: { 46 | ...prevData.location, 47 | [name]: value, 48 | }, 49 | })); 50 | }; 51 | const handleSubmit = async (event) => { 52 | event.preventDefault(); 53 | console.log("submiting.."); 54 | const formData = new FormData(); 55 | formData.append("location[province]", data.location.province); 56 | formData.append("location[district]", data.location.district); 57 | formData.append("location[street]", data.location.street); 58 | formData.append("location[address]", data.location.address); 59 | formData.append("license", data.license); 60 | formData.append("pharmacyImage", data.pharmacyImage); 61 | formData.append("profileImage", data.profileImage); 62 | formData.append("email", data.email); 63 | formData.append("password", data.password); 64 | formData.append("pharmacyName", data.pharmacyName); 65 | formData.append("pharmacistName", data.pharmacistName); 66 | formData.append("phoneNumber", data.phoneNumber); 67 | try { 68 | const response = await axios.post( 69 | "https://health-savvy.onrender.com/api/register/pharmacy/", 70 | formData, 71 | { 72 | headers: { 73 | "Content-Type": "multipart/form-data", 74 | }, 75 | } 76 | ); 77 | console.log(response.data); 78 | } catch (error) { 79 | console.log(error); 80 | } 81 | setShowSuccessPopup(true); 82 | }; 83 | 84 | return ( 85 | <> 86 |
87 |

Apply for membership below

88 |
89 |
90 | 93 |
94 | 101 |
102 |
103 |
104 | 107 |
108 | 116 |
117 |
118 |
119 | 122 |
123 | 131 |
132 |
133 |
134 | 137 |
138 | 145 |
146 |
147 |
148 | 151 |
152 | 160 |
161 |
162 |
163 | 166 |
167 | 174 |
175 |
176 |
177 | 180 |
181 | 189 |
190 |
191 |
192 | 195 |
196 | 204 |
205 |
206 |
207 | 210 |
211 | 219 |
220 |
221 |
222 | 225 |
226 | 234 |
235 |
236 |
237 | 240 |
241 | 249 |
250 |
251 |
252 | 255 |
256 | 265 |
266 |
267 | 268 |
269 | 272 |
273 | 279 |
280 |
281 | 282 |
283 |
284 |
285 | 290 | 293 |
294 |
295 |
296 | {showSuccessPopup && ( 297 | 298 | )} 299 | 300 |
301 |
302 | 305 |
306 |
307 | 308 |
309 | 310 | ); 311 | }; 312 | 313 | export default Member; 314 | -------------------------------------------------------------------------------- /src/components/docMember.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "../styles/member.css"; 3 | import axios from "axios"; 4 | import Success from "./success"; 5 | 6 | const docMember = () => { 7 | const [showSuccessPopup, setShowSuccessPopup] = useState(false); 8 | const [data, setData] = useState({ 9 | location: { 10 | province: "", 11 | district: "", 12 | street: "", 13 | }, 14 | license: null, 15 | ProfileImage: null, 16 | email: "", 17 | password: "", 18 | firstName: "", 19 | lastName: "", 20 | description: "", 21 | role: "Doctor", 22 | phoneNumber: "", 23 | specialization: [], 24 | }); 25 | 26 | const handleChange = (event) => { 27 | const { name, value } = event.target; 28 | setData((prevData) => ({ 29 | ...prevData, 30 | [name]: value, 31 | })); 32 | }; 33 | 34 | const handleFileChange = (event) => { 35 | const { name, files } = event.target; 36 | setData((prevData) => ({ 37 | ...prevData, 38 | [name]: files[0], 39 | })); 40 | }; 41 | 42 | const handleSpecializationChange = (event) => { 43 | const { value } = event.target; 44 | setData((prevData) => ({ 45 | ...prevData, 46 | specialization: [value], // store value as an array 47 | })); 48 | }; 49 | const handleLocationChange = (event) => { 50 | const { name, value } = event.target; 51 | setData((prevData) => ({ 52 | ...prevData, 53 | location: { 54 | ...prevData.location, 55 | [name]: value, 56 | }, 57 | })); 58 | }; 59 | const handleSubmit = async (event) => { 60 | event.preventDefault(); 61 | console.log("submiting.."); 62 | const formData = new FormData(); 63 | formData.append("location[province]", data.location.province); 64 | formData.append("location[district]", data.location.district); 65 | formData.append("location[street]", data.location.street); 66 | formData.append("location[address]", data.location.address); 67 | formData.append("license", data.license); 68 | formData.append("ProfileImage", data.ProfileImage); 69 | formData.append("email", data.email); 70 | formData.append("password", data.password); 71 | formData.append("description", data.description); 72 | formData.append("firstName", data.firstName); 73 | formData.append("lastName", data.lastName); 74 | formData.append("phoneNumber", data.phoneNumber); 75 | // Use forEach to add each specialization value as an array 76 | data.specialization.forEach((value) => { 77 | formData.append("specialization[]", value); 78 | }); 79 | try { 80 | const response = await axios.post( 81 | "https://health-savvy.onrender.com/api/admin/dashboard/doctor", 82 | formData, 83 | { 84 | headers: { 85 | "Content-Type": "multipart/form-data", 86 | Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY0MTJlNTc2MDVkNGVhN2Q3ODQ3MWQ4OCIsImlhdCI6MTY3ODk2NjE5NSwiZXhwIjoxNjgxNTU4MTk1fQ.ta6ttAQBvDnwL5BOGSLtkqZJVhI4sz6Qhegr8Yckgio`, 87 | }, 88 | } 89 | ); 90 | console.log(response.data); 91 | } catch (error) { 92 | console.log(error); 93 | } 94 | setShowSuccessPopup(true); 95 | }; 96 | 97 | return ( 98 | <> 99 |
100 |

Apply for membership below

101 |
102 |
103 | 106 |
107 | 115 |
116 |
117 |
118 | 121 |
122 | 130 |
131 |
132 |
133 | 136 |
137 | 145 |
146 |
147 |
148 | 151 |
152 | 160 |
161 |
162 |
163 | 166 |
167 | 175 |
176 |
177 |
178 | 181 |
182 | 190 |
191 |
192 |
193 | 196 |
197 | 204 |
205 |
206 |
207 | 210 |
211 | 219 |
220 |
221 |
222 | 225 |
226 | 234 |
235 |
236 |
237 | 240 |
241 | 249 |
250 |
251 |
252 | 255 |
256 | 264 |
265 |
266 |
267 | 270 |
271 | 280 |
281 |
282 | 283 |
284 | 287 |
288 | 294 |
295 |
296 | 297 |
298 |
299 |
300 | 305 | 308 |
309 |
310 |
311 |
312 | {showSuccessPopup && ( 313 | 314 | )} 315 | 316 |
317 | 320 |
321 |
322 |
323 |
324 | 325 | ); 326 | }; 327 | 328 | export default docMember; 329 | -------------------------------------------------------------------------------- /src/components/image/sprite.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------