gsg-g9/dentoro

dentoro

The Problem 🚫 :-

• Patients find it hard to book an appointment in a dental clinic, they would make a call, or they would come to the clinic to book an appointment, and sometimes they would come to it and wait in a queue to meet the doctor without any previous booking.

• The Dentist faces hardships to manage patients' appointments, their payment schedules, and their history manually.That would cause huge problems like wasting some time and effort and tripling some customers with the repeated data requests. Doctors encounter these problems to track the patients' histories, and all of these operations are done with paperwork that is not durable.

The solution 💡 :-

• Use the technology to create a smooth and tidy system, also employment its advantages in durability by creating a web application to provide the specific requirements include a booking form and database history for every patient. So that saves time and effort for the dentist and helps the patients with their reservation for an appointment.

User Stories 📚

User who want to register an appointment 💊

• As a patient, I want to book an appointment at a specific time and date and personal details like a name and birthday. So I can save my time and effort.

User who is a Dentist 💉

• As a dentist, I want a table to display all the schedules for the day so I can manage them IRL.
• As a dentist, I want to view the history of any patient I have. So I can track any of their health status and payment.
• As a patient, I want to be able to view the patient's info. So I can contact them.
• As a dentist, I want to view the patient's balance, and how much money they get paid, so I can ask him for more or give some back to him.
• As a dentist, I can search for a patient to view its history. So I can know of all previous treatment, payment, and visiting dates.
• As a dentist, I can search for a patient in the booking list - calendar, so I can choose the patient and enter its details like treatment and cure - etc, or delete and edit its appointment.
• As a dentist, I can add the treatment or the cure as a text, its price, and the actual payment to the current patient. The patients will be removed from the queue, and all of their data will be stored in the database.
• As a dentist, I can delete or edit the patient's appointment. So I can do it when needed.

User Journey ✏️

User who want to register an appointment 💊

• As a patient, I can see the main page with a login button and a (book now) button, Also there is some basic info about the clinic, I can click on the (book now) button, then a form will appear and will ask me for my info and the time of the appointment.

User who is a Dentist 💉

As a dentist, I can log into my account, and I can see the dashboard with three options (Today's Schedule, calendar, patients).

• The Today's Schedule option will present the schedule of this day, and showing all the patients on this day with delete - edit - history options, when using the edit you can only change the time of the appointment.
• The calendar is presenting all the appointments of the patients and a search bar to go through all of them, Also by clicing on a day you I can see the appointments of that day .
• The patient's option is presenting the info of the registered patients in the clinic database and a search bar to go through all of them, Also when i click on a patent's name I can view all his records and history.
• If I click on a patient's name in any table, it shows all the history for him with the profile data and a form to enter the new data (operation) and the payment.

Prototype

View Prototype

---

How to Launch App Locally :-

• clone this repo by typing this command in the terminal:
  git clone https://github.com/GSG-G9/dentoro.git

• Run npm i to install the packages for the app as general.

• Run cd client and npm i to install the packages for the client- React Js.

Database Setup 📋

make sure you have installed PostgreSQL and pgcli

CREATE DATABASE {database name};
CREATE USER {user name} WITH superuser password {password}
ALTER DATABASE {database name} OWNER TO {user name};

• Test DB:
• Do the same as before but make sure to change the names.

• Run the following command in the database pgcli terminal
  \i server/database/config/build.sql and the command \i server/database/config/fakeData.sql to add fake Data

Environment variables:

Environment variables are one of the ways we keep our product safe. If you want to access our app locally you will need to add your own.

• create .env file
• add your Environment variables

DEV_DB_URL= # Your development PostgreSQL connect
DATABASE_URL= # Your production PostgreSQL connect
SECRET_TOKEN= # Your token Secret key

Start the App 🔌

To start the App Locally you can start the server First then start client-side or vice versa!

To run Server, In your terminal Type:

`npm run dev` then you should be able to go to [localhost](http://localhost:5000/) 

To run client-side, In your terminal Type:

`cd client` => `npm start` then you will be able to run [localhost](http://localhost:3000/) 

Now you can view the app live in the Browser!

You can use this email and password for testing only

• Email:[email protected]
• Password:password

Technologies 💻 :-

• BackEnd: Node JS & Express JS
• FrontEnd: React JS
• Database: PostgreSQL
• Styling: CSS
• Libraries: AntDesign

Lead Mentor 😎:-

• Muhammad Abdulhadi

Team Members :-

• Hassan Elnajjar
• Alaa Alser
• Alaa Shurrab

Resources :-

• Node Js
• React Js
• Express
• Ant Design
• Yup library

dentoro's Issues

Backend Routes

User Routes

Route	Method	Description	Status
/appointments	POST	Check whether patient is existed or not and add appointment	👍

Admin Routes

Route	Method	Description	Status
/login	POST	Verify login and give token	👍
/logout	GET	Deletes the token and logs the user out	👍
/patients	GET	get All patients data	👍
/patients/:patientId	GET	GET Profile Data + History + Balance	👍
/patients/search?name&phone	get	Search for Patients	👍
/appointments/search?name&phone	GET	Search for patient's appointments	👍
/appointments/:date	GET	GET Patients Appoinments At Date	👍
/appointments/available/:date	GET	GET Available appointments at Date	👍
/patients/:patientId/history	POST	adds a log to the patiant's history	👍
/patients/:patientId/appointment/:appointmentId	PATCH	Edit availability (isDone) , Edit appointment date	👍
/patients/:patientId	PATCH	edits the profile data for that patiant	👍
/patients/:patientId/appointment	DELETE	deletes that oatiant's appointment	👍
			👍

About Us

About Us

Acceptance Criteria

• Snapshot

---

Snapshot

Common Component

Common Component

• Title
• Alert Message
• Loading

POST /api/v1/signup

relates #5

Route: POST /api/v1/signup

Acceptance Criteria

• Validation
• DB query
• Response
• Testing

---

Validation

{
 email: yup.string().email().required('email Name is required'),
 password: yup.string().min(8,'email Name is required').required(),
 confirmPassword: yup.string().oneOf([yup.ref('password'), null], 'Passwords must match')
]).required('confirmPassword is required')
}

---

DB query

INSERT INTO users(email,password) VALUES(email,password);

Response

• Success

{ 
  StatusCode: 200,
  message :"Sign up successful"
}

• Failed

{
statusCode:401, 
message:"You are already registered"
}

Testing

to be a successful test

• status === 200
• data.length !== 0

Fix getAppointmentsByPatientName

• Replace the Or in sql patients.firstname ILIKE $1 OR patients.lastname to be AND sql patients.firstname ILIKE $1 AND patients.lastname
• So the use can search by name (firstname and lastname)

README

Our readme file should contain:-

• Main Problem 🚫
• Problem Solution 💡
• User Stories 📚
• User Journey ✏️
• Prototype 🎨
• Technologies 💻
• How to Launch App Locally 📣
  • Database Setup
  • Environment Variables
  • Start the App
• Team Lead 😎
• Team Members 😃
• Resources 🔍

Service Card Component

Service Card Component (For services icons - title - description)

Description

• This Card Show the service card component (Icon - Title - description)

Acceptance Criteria

• Props
• Icon
• Title
• description
• Components
• Card Ant Design Card
• Snapshot
  

Fix getAppointmentsByDateQuery

Fix getAppointmentsByDateQuery

• The data returned by getAppointmentsByDateQuery and getAppointmentsByPatientName should be the same because we render it in a client in the same table.
• Just to assure that the spelling of appointment_id is the same from the 2 queries.

Header

Common Components - Header:

it is a container that displays the parts or the landing page to navigate

props:

• some categoraiezed names for the landing page components

• It will be used in Pages :

• landing page

• Ant design link :

card

• UI Image From Design 👍
  

General Guide

Reviewing code

• Every PR must be approved by all the team in order to be merged
• Don't resolve a comment on your PR but only comment back (reply), and let the comment writer resolve it

Working on a task

1. Branch naming: branch names shall follow this style issueNumber-issue-description (e.g. 102-login-page)

2. Committing changes:

   • any changes that are not related to the task (issue) or are not mentioned in it will not be accepted (if there is a bug that is making your task fail, open an issue for it and start working on fixing it)
   • commits must always be descriptive and with appropriate length (neither too long nor too short)
   • every and each commit must relate to the issue at the end

3. Use of labels and projects

   • once started working on a task
     • label the issue in progress and move it to the in progress column in its project
     • label the PR awaiting review if you need it to be reviewed
     • label the PR in progress if you still working on it
     • PRs must be labeled with changes requested once a change is requested
   • once finished working on a task and got approved
     • label the PR done before merging it
     • label the issue done and move it to the done column in its project
     • close the issue

4. closed issues and PRs

   • once a PR or an issue is closed it shall not be reopened
   • if there exists a bug related to a specific issue that was closed, another issue is to be opened and labeled bug
   • if there exists some critical bug that is causing the project to crash an issue with the labels bug, urgent, and `priority is to be opened

Today’s Schedule Table Component

Today’s Schedule Table Component

Description

• This Table shows today's patients list from the Database showing first name - last name - age - appointment Date and Time.
• This Table should have pagination functionality.

Every record should have these options:-

• Edit Appointment Date/Time
• Delete ( Delete Appointment)
• CheckBox Option
• Click the event to show the patient profile page.

Acceptance Criteria

• Props
• Components
• Table Ant Design Table
• Search Bar
• Snapshot
  

Footer

Common Components - footer:

it is a container that displays some refrances

props:

• premade data

• It will be used in Pages :

• landing page

• Ant design link :
  link

• UI Image From Design 👍
  

Header

create the components in the image

PATCH /api/v1/patients/:patientId

PATCH /api/v1/patients/:patientId

Description:

Through this route, the server will edit the patient profile data like the name - phone - diseases

Acceptance Criteria

• Validation
• DB query
• Response
• Testing

---

DB query

• editPatientProfileDate(firstname,lastname,phone,age,patientId)

UPDATE patients SET firstname=$1 lastname=$2 phone=$3 age=$4 WHERE id=$5

Request Body :

patientId:'255'
firstname:'name',
lastname:'name',
birthday:'5/2/2000',
phone:'0599010101'

Validation:

patientId:string.required,
firstname:string.min(3).max(50),
lastname:string.min(3).max(50),
birthday:date,
phone:string.length(10)

Test:

The Response in success should include:-

Response:

{
statusCode:200,
message:'success'
}

The Response in failure should include:-

1- incorrect phone for existing patient

statusCode:409

2- invalid data

statusCode:400

Fix Search Validation

Since we used one input to search for firstName or lastName or phone.

In this case, the input value will be the same for the 3 things and that's will make the request failed because every field has a different validation.

As you can see in the picture
search?firstName=Vivian&lastName=Vivian&phone=Vivian
In search cases, we don't have to be very strict on what values the user will input, but in post request, we should care about it.
Instead of validation for search, we can handle a message that tells the user there is no result for your input value.

Booking Form Component

Booking Form Component

Description

• This Form for book an appointment

Acceptance Criteria

• Props
• Components
• Form Ant Design Form
• Search Bar
• Snapshot
  

GET /api/v1/patients/:patientId

GET /api/v1/patients/:patientId

Description:

Through this route, the user can see all the data (profile, history, and balance) to patients with that id

Acceptance Criteria

• DB query
• Response
• Testing

---

Request Body :

no body

Test:

The Response in success should include:-

Response:

{
statusCode:200,
message:'success',
data[{
    profile:{
    name:"alaa all sir",
    mobile:[phone],
    diseases:" some thing "
    },
    balance:50,
    history [{
        description:lorem,
        cost:10000000000000000000,
        payment:100
         },{
        some thing else
        }]
    }
}]

The Response in failure should include:-

1- incorrect id

statusCode:404

2- no token

statusCode:401

Authentication Middleware

Fix SideBar Childern Div

Fix SideBar Children Div and .page-layout class

• Change the style of .page-layout class and add min-height : 100vh
• change the style of .site-layout-content-body class and add overflow :hidden and other staff.

Services Component

Common Components - History Table - Payment Form - Patient Details (Card):

it is a container that displays the about the services we provaide

props:

• some premade data

• It will be used in Pages :

• landing page

• Ant design link :
  container
  card

• UI Image From Design 👍
  
  

Calender

Calender

Acceptance Criteria

• Props
• Snapshot

---

Props

• children

---

Snapshot

POST /api/v1/appointments

POST /api/v1/appointments

Description:

Through this route, the server will check whether the patient is existed or not and add an appointment using this patient id

Acceptance Criteria

• Validation
• DB query
• Response
• Testing

---

DB query:

• getPatientByPhone using #13
• addPatient(firstname,lastname,phone,age)

INSERT INTO Patiens(firstname,lastname,phone,diseases,complaints,age) VALUES($1,$2,$3,$4,$5,$6)

• addAppointment(patientId,appointmentDate)

INSERT INTO appointments(patientId,appointmentDate,diseases,complaints) VALUES($1,$2,$3,$4)

Request Body :

phone:'0599010101',
firstName:'name',
lastname:'name',
appointmentDate:'23/3/2021 5:00 pm',
age:25,
complaines:'teetch pain',
diseases:'none'

Validation:

phone:string.length(10).isRequired,
firstName:string.min(3).max(50).isRequired,
lastname:string.min(3).max(50).isRequired,
appointmentDate:date.isRequired,
age:number,
complaines:string,
diseases:string

Test:

The Response in success should include:-

Response:

{
statusCode:200,
message:'success'
}

The Response in failure should include:-

1- invalid data/missing fiels

statusCode:400

2- existing Patient with the phone - when the phone is existing

statusCode:409

3- existing Appoimnent - when the Appoimnent is existing

statusCode:409

POST /api/v1/users/login

POST /api/v1/users/login

Description:

Through this route, the user can log in to the website using his registered email and password, the route should respond a cookie header with a valid token and user data

Acceptance Criteria

• Validation
• DB query
• Response
• Testing

---

Request Body :

email:'[email protected]',
password:'testpassword'

DB query:

• getUserByEmail

SELECT * FROM users WHERE email = $1

Validation:

email:string.email().min(3).required()
password:string.min(6).required()

Test:

The Response in success should include:-

Response:

{
statusCode:200,
message:'success'
}

The Response in failure should include:-

1- incorrect password for existing user

statusCode:409

2-incorrect email/password

statusCode:422

3- invalid email/password - when I send script using the fields

statusCode:400

CI Configuration

Go To Circle CI and Set Up Project from github repo.

Define These global enviroment varibales at project setting

• SECRET_KEY
• PGUSER = circleci
• PGDATABASE = circleci

Add These configuration to .circleci/config.yml

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:12
        auth:
          username: mydockerhub-user
          password: $DOCKERHUB_PASSWORD 
      - image: circleci/postgres:9.6-alpine
        auth:
          username: mydockerhub-user
          password: $DOCKERHUB_PASSWORD  
        environment:
          POSTGRES_USER: circleci
          POSTGRES_DB: circleci
    steps:
      - checkout
      - restore_cache:
          keys:
            - v1-pkg-cache
      - run:
          name: Waiting for Postgres to be ready
          command: |
            for i in `seq 1 10`;
            do
              nc -z localhost 5432 && echo Success && exit 0
              echo -n .
              sleep 1
            done
            echo Failed waiting for Postgres && exit 1
        
      - run: npm install
      - run: npm run build:db
      - run: npm test

Fix .ant-spin-container style issue

There's an issue happened to the patient history table due to a style conflict with this class name ant-spin-container and this is the style

.ant-spin-container {
  width: 70vw;
}

at client/src/component/ADayScheduleTable/style.css

Issue Template

#[relates1] #[relates1]
[Unit name]

Acceptance Criteria

• crit1
• crit2
• ..
• ..

---

crit1

[Full Description ]

crit2

[Full Description]

---

POST /api/v1/patients/:patientId/history

POST /api/v1/patients/:patientId/history### Description:
Through this route, the user can add a data log to the patient's history

Acceptance Criteria

• Validation
• DB query
• Response
• Testing

---

Request Body :

description :'loremloremloremloremlorem ',
cost:'100',
payment:100,

Validation:
description :string.required()
cost:number.min(0).required()
payment:number.min(0).required()

Test:

The Response in success should include:-

Response:

{
statusCode:200,
message:'success'
data: [{new history log}]
}

The Response in failure should include:-

1- Validation error

statusCode:409

Fix getAppointmentsByPatientName Query

Add patients.birthday to this query

SELECT appointments.id AS appointment_id, patients.id AS patient_id,appointments.appointment_date,appointments.appointment_time, patients.firstname,patients.lastname,patients.phone, patients.birthday FROM appointments INNER JOIN patients ON patients.id = appointments.patient_id WHERE appointments.is_done =false AND (patients.firstname ILIKE $1 AND patients.lastname ILIKE $2 OR patients.phone= $3)

DELETE /api/v1/appointment/:appointmentId

DELETE /api/v1/appointment/:appointmentId

Description:

Through this route, the user can delete an appointment

Acceptance Criteria

• DB query
• Response
• Testing

---

Request Body :

no body

Test:

The Response in success should include:-

Response:

{
statusCode:200,
message:'success'
}

The Response in failure should include:-

1- no id or id not found

statusCode:409

Login Form Component

Login Form Component

• Props
• Components
• Form Ant Design Form
• Search Bar
• Snapshot

GET /api/v1/appointments/:date

GET /api/v1/appointments/:date

Description:

Through this route, the user can get all the appointments on that specific day.

Acceptance Criteria

• DB query
• Response
• Testing

---

Request Body :

no body

Test:

The Response in success should include:-

Response:

{
statusCode:200,
message:'success'
data:[{
    id:16532,
    name :some one ,
    age:15,
    date and time :  ************,
    checked: false
},{ some one else  }]
}

The Response in failure should include:-

1- incorrect date type

statusCode:400

GET /api/v1/appointments/available/:date

Route: GET /api/v1/appointments/available/:date

Acceptance Criteria

• DB query
• Response
• Testing

---

DB query

SELECT * FROM appointments WHERE patient_id = id & is_done=false;

Response

• Success

{ StatusCode: 200,
  data: [{
          id,
          patient_id ,
          appointment_date,
          appointment_time,
          is_done,
          complaints,
          chronic_diseases
      }]

• Failed

{statusCode:400, message:"Bad Request"}

Testing

to be a successful test

• status === 200
• typeof(data) === "array"
• data.length !== 0

File Structure

File Structure

• client/

  • public/
  • src/
    • app/
      • index.js
      • app.css
    • assets/
      • icons
      • images
    • components/
      • index.js
    • utils/
      • index.js
    • pages/
      • admin/
        • index.js
      • Home/
        • index.js
  • .gitignore
  • .eslintrc.json
  • package-lock.json
  • package.json

• server/

  • controllers/
    • routes/
      • index.js
    • middlewares/
      • auth/
        • index.js
      • errorHandle/
        • index.js
    • utils/
      • validation/
        • index.js
      • index.js
    • index.js
  • database/

    • config/

      • build.sql
      • fakeData.sql
      • build.js
      • connection.js

    • queries/

      • index.js
  • app.js
  • index.js
  • .env

• test/

• .gitignore

• .eslintrc.json

• package-lock.json

• package.json

Patients Table Component

Patients Table

Description

• This Table shows the patients list from the Database showing first name - last name - age - registration Date and edit Option and Click event to show the patient profile page.
• This Table should have pagination functionality.
• Should have a search bar to search by patient First name | last name | phone

Acceptance Criteria

• Props
• Components
• Table Ant Design Table
• Search Bar
• Snapshot
  

Navbar

Navbar

Acceptance Criteria

• Snapshot

---

Snapshot

GET || /is-auth

GET /api/v1/is-auth

Description:

We need a backend route that verifies user token and responds with a 200 if the user is verified in order to change isAuth state value to true and give the user the access to enter our protected routes and at auth middleware add req.userId = userId; at line 13

Acceptance Criteria

• DB query
• Response
• Testing

---

DB query 👍

• isAuth

 SELECT id, email FROM users WHERE id = $1

Request Body :

Validation:

Test:

The Response in success should include:-

Response:

{
statusCode:200,
message:'success',
data:{
id,
email
}
}

Map Page

Map Page

Acceptance Criteria

• Snapshot

---

Snapshot

Modify Patient Appointment Table

Modify Patient Appointment Table

PATCH /api/v1/patients/:patientId/appointment/:appointmentId

Route: PATCH /api/v1/appointment/:appointmentId

Acceptance Criteria

• DB query
• Response
• Testing

---

DB query

---

Response

• Success

{ StatusCode: 200,
  data: [{
          id,
          patient_id ,
          appointment_date,
          appointment_time,
          is_done,
          complaints,
          chronic_diseases
      }]

• Failed

{statusCode:400, message:"Bad Request"}

Testing

to be a successful test

• status === 200
• typeof(data) === "array"
• data.length !== 0

GET /api/v1/users/logout

GET /api/v1/users/logout

Description:

Through this route, the user can log out from the website, the route should respond by deleting the token cookie header

Acceptance Criteria

• DB query
• Response
• Testing

---

Request Body :

no body 

Test:

The Response in success should include:-

Response:

{
statusCode:200,
message:'success'
}

The Response in failure should include:-

no token - when I don't have a token (not logged in )

statusCode:400

GET /api/v1/appointments/search

GET /api/v1/appointments/search?firstName=''&lastname=''&phone=''

Description:

Through this route, the sever should use name|phone to search for patient's appointments.

Acceptance Criteria

• Validation
• DB query
• Response
• Testing

---

DB query:-

• getPatientByName(firstName,lastName)

SELECT * FROM patients WHERE first_name=$1 Or last_name=$2

• getPatientByPhone(phone)

SELECT * FROM patients WHERE phone=$1

Request Body :

Query Parameter:

name,
phone

Validation:

name:string.min(3).max(50)
phone:string.min(3).max(50)

Test:

The Response in success should include:-

{status:200.
message:'success',
data:{
patientId,
appoinementDate,
name,
age
}
}

Patient Profile page

Common Components - History Table - Payment Form - Patient Details (Card):

it is a container that displays the data that the admin wants

props:

• patient details (name, mobile, balance, and age )

• history records (treatment, payment, price, and date )

• It will be used in Pages :

• Patient Profile page

• Ant design link :
  table
  form
  card

• UI Image From Design 👍
  

Database Schema

GET /api/v1/patients

GET /api/v1/patients

Description:

Through this route, the server should send all the patients records

Acceptance Criteria

• DB query
• Response
• Testing

---

DB query 👍

• getPatients

 SELECT * FROM patients

Request Body :

Validation:

Test:

The Response in success should include:-

Response:

{
statusCode:200,
message:'success',
data:{
firstName,
lastName,
registrationDate,
age,
phone
}
}

Fix database connection

at the database edit the options to be like this

const option = {
  connectionString: dbUrl,
  ssl: {
    rejectUnauthorized: false,
  },
};

Appointment Search Component (on Click)

Common Components - Search Component:

it is an input

• props: not yet

• It will be used in Pages :
  calender page

• Ant design link :
  input
  form

• UI Image From Design 👍
  

Project Setup

[Project Setup]

Acceptance Criteria

• File Structure
• Server Setup
• Client (React) Setup
• ESLINT config

---

File Strucutre #5

• Client
• Server
• Testing
  #5

Server Setup

• Install modules :
  • express
  • jsonwebtoken
  • yup
  • dotenv
  • cookie-parser
  • compression
  • pg
  • nodemon
  • supertest
  • jest
  • eslint
  • pre-commit

Setup the server and make it listen on port 5000

React Setup

Generate react app for the client using command

npx create-react-app 

• Install modules :

  • prop-types
  • react-router-dom
  • axios
  • antd

• add Proxy to client package.json

"proxy": "http://localhost:5000/"

ESLINT config #10

• ESLINT for the Client

      eslint
      eslint-config-airbnb-base
      eslint-plugin-import
      eslint-config-prettier
      eslint-plugin-prettier
      eslint-plugin-flowtype
      eslint-plugin-jsx-a11y
      eslint-plugin-react
      eslint-plugin-react-hooks
      prettier

• ESLINT for the Server #10

      eslint
      eslint-config-airbnb
      eslint-plugin-prettier
      save-exact prettier
      eslint-config-prettier
      prettier
      eslint-plugin-jest

---

GET /api/v1/patients/search

Route: GET api/v1/search?name=""&phone=""

Acceptance Criteria

• DB query
• Response
• Testing

---

DB query

---

Response

• Success

{ StatusCode: 200,
  data: [{
          id,
          first_name,
          last_name,
          email,
          phone,
          birthday
        }]
}

• Failed

{statusCode:400, message:"Bad Request"}

Testing

to be a successful test

• status === 200
• typeof(data) === "array"
• data.length !== 0

SideBar With Page Container

SideBar With Page Container

Acceptance Criteria

• Props
• Snapshot

---

Props

• children

---

Snapshot

Handle Errors

Handle server and client errors