From 45f855636f69e9f937cbaf24caedf64938940c73 Mon Sep 17 00:00:00 2001
From: "Ferdinard Arthur (arthurf3)" <arthurf3@coventry.ac.uk>
Date: Fri, 29 Nov 2024 16:55:42 +0000
Subject: [PATCH] Add files via upload

---
 __init__.py                                   |  22 ++
 helpers.py                                    |  53 +++
 models.py                                     |  75 ++++
 requirments.txt                               |  18 +
 routes.py                                     | 356 ++++++++++++++++++
 run.py                                        |   8 +
 templates/403.html                            |  30 ++
 templates/admin.html                          | 112 ++++++
 templates/caregiver.html                      | 113 ++++++
 templates/edit_app.html                       |  55 +++
 templates/edit_patient_details.html           |  49 +++
 templates/index.html                          | 181 +++++++++
 templates/index2.html                         | 165 ++++++++
 templates/patient.html                        | 122 ++++++
 templates/pending_caregiver_verification.html |  39 ++
 templates/pending_verification.html           |  39 ++
 templates/verify_users.html                   |  45 +++
 17 files changed, 1482 insertions(+)
 create mode 100644 __init__.py
 create mode 100644 helpers.py
 create mode 100644 models.py
 create mode 100644 requirments.txt
 create mode 100644 routes.py
 create mode 100644 run.py
 create mode 100644 templates/403.html
 create mode 100644 templates/admin.html
 create mode 100644 templates/caregiver.html
 create mode 100644 templates/edit_app.html
 create mode 100644 templates/edit_patient_details.html
 create mode 100644 templates/index.html
 create mode 100644 templates/index2.html
 create mode 100644 templates/patient.html
 create mode 100644 templates/pending_caregiver_verification.html
 create mode 100644 templates/pending_verification.html
 create mode 100644 templates/verify_users.html

diff --git a/__init__.py b/__init__.py
new file mode 100644
index 0000000..92fb864
--- /dev/null
+++ b/__init__.py
@@ -0,0 +1,22 @@
+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy
+from flask_socketio import SocketIO, emit
+import os
+
+
+
+app = Flask(__name__)
+
+app.secret_key = os.getenv('SECRET_KEY')
+
+app.config['SQLALCHEMY_DATABASE_URI'] = os.getenv('DATEABASE_URL')
+
+
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+
+    
+db = SQLAlchemy(app)
+
+from . import routes
+app.register_blueprint(routes.bp)
+socketio = SocketIO(app)
diff --git a/helpers.py b/helpers.py
new file mode 100644
index 0000000..ea0d493
--- /dev/null
+++ b/helpers.py
@@ -0,0 +1,53 @@
+from flask import redirect, url_for, session, jsonify, request
+from functools import wraps
+
+ROLES = {
+    1 : 'admin',
+    2 : 'caregiver',
+    3 : 'patient'
+}
+
+ROLES_REV = {
+    'admin' : 1,
+    'caregiver' : 2,
+    'patient' : 3
+}
+ROLES_URL = {
+    'admin' : '/',
+    'caregiver' : '/caregiver_dashboard',
+    'patient' : '/patient_dashboard'
+}
+
+
+
+def role_required(role):
+    """Decorator to restrict access based on user role."""
+    def decorator(func):
+        @wraps(func)
+        def wrapped_view(*args, **kwargs):
+            if 'id' not in session:
+                return redirect('/')
+            user_role = session.get('role')
+            if user_role != role:
+                
+                if request.is_json:
+                    return jsonify({"error": "Access denied"}), 403
+                
+                return redirect('/unauthorized_access')
+            return func(*args, **kwargs)
+        return wrapped_view
+    return decorator
+
+def roles_required(*roles):
+    """Decorator to allow multiple roles access to a route."""
+    def decorator(func):
+        @wraps(func)
+        def wrapped_view(*args, **kwargs):
+            user_role = session.get('role')
+            if user_role not in roles:
+                if request.is_json:
+                    return jsonify({"error": "Access denied"}), 403
+                return redirect(url_for('unauthorized_access'))
+            return func(*args, **kwargs)
+        return wrapped_view
+    return decorator
diff --git a/models.py b/models.py
new file mode 100644
index 0000000..5eb17dc
--- /dev/null
+++ b/models.py
@@ -0,0 +1,75 @@
+from . import db
+from datetime import datetime
+
+
+class User(db.Model):
+    __tablename__ = 'users'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(80), unique=True, nullable=False)
+    email = db.Column(db.String(120), unique=True, nullable=False)
+    password_hash = db.Column(db.String(128), nullable=False)
+    role = db.Column(db.String(50), nullable=False, default="patient")
+    created_at = db.Column(db.DateTime, default=datetime.now)
+    verified = db.Column(db.Boolean,  default = False)
+
+    def __repr__(self):
+        return f"<User {self.username}>"
+
+
+class Patient(db.Model):
+    __tablename__ = 'patients'
+
+    id = db.Column(db.Integer, primary_key=True)
+    name = db.Column(db.String(120), nullable=False)
+    address = db.Column(db.String(255), nullable=True)
+    medical_records = db.Column(db.Text, nullable=True) 
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
+    caregiver_id = db.Column(db.Integer, db.ForeignKey('caregivers.id'), nullable=True)
+    
+    def __repr__(self):
+        return f"<Patient {self.name}>"
+
+
+class Caregiver(db.Model):
+    __tablename__ = 'caregivers'
+
+    id = db.Column(db.Integer, primary_key=True)
+    name = db.Column(db.String(120), nullable=False)
+    availability = db.Column(db.Boolean, default=True)  
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False) 
+    
+    patients = db.relationship('Patient', backref='caregiver', lazy=True)
+    def __repr__(self):
+        return f"<Caregiver {self.name}>"
+
+class Appointment(db.Model):
+    __tablename__ = 'appointments'
+
+    id = db.Column(db.Integer, primary_key=True)
+    patient_id = db.Column(db.Integer, db.ForeignKey('patients.id'), nullable=False)
+    caregiver_id = db.Column(db.Integer, db.ForeignKey('caregivers.id'), nullable=False)
+    appointment_date = db.Column(db.DateTime, nullable=False)
+    updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
+    
+    patient = db.relationship('Patient', backref='appointments', lazy=True)
+    caregiver = db.relationship('Caregiver', backref='appointments', lazy=True)
+
+    def __repr__(self):
+        return f"<Appointment {self.patient.name} with {self.caregiver.name} on {self.appointment_date}>"
+
+
+class Notification(db.Model):
+    __tablename__ = 'notifications'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    recipient_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
+    message = db.Column(db.String(255), nullable=False)
+    is_read = db.Column(db.Boolean, default=False)
+    created_at = db.Column(db.DateTime, default=datetime.now)
+    
+    recipient = db.relationship('User', backref='notifications', lazy=True)
+    
+    def __repr__(self):
+        return f"<Notification to User {self.recipient_id}: {self.message}>"
+
diff --git a/requirments.txt b/requirments.txt
new file mode 100644
index 0000000..6b5bddf
--- /dev/null
+++ b/requirments.txt
@@ -0,0 +1,18 @@
+bidict==0.23.1
+blinker==1.9.0
+click==8.1.7
+Flask==3.1.0
+Flask-SocketIO==5.4.1
+Flask-SQLAlchemy==3.1.1
+h11==0.14.0
+itsdangerous==2.2.0
+Jinja2==3.1.4
+MarkupSafe==3.0.2
+python-dotenv==1.0.1
+python-engineio==4.10.1
+python-socketio==5.11.4
+simple-websocket==1.1.0
+SQLAlchemy==2.0.36
+typing_extensions==4.12.2
+Werkzeug==3.1.3
+wsproto==1.2.0
diff --git a/routes.py b/routes.py
new file mode 100644
index 0000000..1d64014
--- /dev/null
+++ b/routes.py
@@ -0,0 +1,356 @@
+from flask import render_template, Blueprint, request, session, redirect, jsonify
+from werkzeug.security import generate_password_hash, check_password_hash
+from datetime import datetime
+from .models import *
+from . import db
+from .helpers import *
+import bleach
+import re
+
+bp = Blueprint('main', __name__)
+
+# Helper Functions for Validation
+def is_valid_email(email):
+    return re.match(r"[^@]+@[^@]+\.[^@]+", email)
+
+def is_valid_password(password):
+    return len(password) >= 8 and any(char.isdigit() for char in password) and any(char.isalpha() for char in password)
+
+def is_valid_date(date_str):
+    try:
+        datetime.strptime(date_str, "%Y-%m-%d %H:%M")
+        return True
+    except ValueError:
+        return False
+
+def sanitize_input(input_str):
+    """Sanitize input using bleach to prevent XSS attacks."""
+    if input_str:
+        # Allow only specific tags (e.g., <b>, <i>, <em>, <strong>, <u>)
+        allowed_tags = ['b', 'i', 'u', 'em', 'strong']
+        return bleach.clean(input_str, tags=allowed_tags, strip=True)  # Strip any unwanted tags and attributes
+    return input_str
+
+@bp.route('/')
+def index():
+    if 'id' not in session:
+        return render_template('index2.html', title='Home')
+    else:
+        u = User.query.filter_by(id=session['id']).first()
+        if u.role == 'admin':
+            return redirect('/admin_dash')
+        elif u.role == 'caregiver':
+            return redirect('/caregiver_dashboard')
+        elif u.role == 'patient':
+            return redirect('/patient_dashboard')
+        else:
+            session.pop('id', None)
+            session.pop('role', None)
+            return redirect('/')
+
+@bp.route('/remove_caregiver/<patient_id>')
+@role_required(1)
+def remove_caregiver(patient_id):
+    if not patient_id.isdigit():
+        return jsonify({"message": "Invalid patient ID"}), 400
+    p = Patient.query.filter_by(id=int(patient_id)).first()
+    if not p:
+        return jsonify({"message": "Patient not found"}), 404
+    p.caregiver_id = None
+    db.session.commit()
+    return redirect('/admin_dash')
+
+@bp.route('/admin_dash')
+@role_required(1)
+def admin_dash():
+    if 'id' not in session:
+        return redirect('/')
+    u = User.query.filter_by(id=session['id']).first()
+
+    patients = Patient.query.filter_by(caregiver_id=None).all()
+    verified_patients = [p for p in patients if User.query.filter_by(id=p.user_id).first().verified]
+    caregivers = Caregiver.query.all()
+    verified_caregivers = [c for c in caregivers if User.query.filter_by(id=c.user_id).first().verified]
+    
+    return render_template('admin.html', patients=verified_patients, caregivers=verified_caregivers)
+
+@bp.post('/assign_caregiver')
+@role_required(1)
+def assign_caregiver():
+    if 'id' not in session:
+        return redirect('/')
+    patient_id = request.form['patientid']
+    caregiver_id = request.form['caregiverid']
+    
+    if not patient_id.isdigit() or not caregiver_id.isdigit():
+        return jsonify({"message": "Invalid patient or caregiver ID"}), 400
+    
+    p = Patient.query.filter_by(id=int(patient_id)).first()
+    if not p:
+        return jsonify({"message": "Patient not found"}), 404
+    c = Caregiver.query.filter_by(id=int(caregiver_id)).first()
+    if not c:
+        return jsonify({"message": "Caregiver not found"}), 404
+
+    p.caregiver_id = int(caregiver_id)
+    db.session.commit()
+    return redirect('/admin_dash')
+
+@bp.post('/login')
+def login():
+    body = request.json
+    username = body.get('username')
+    password = body.get('password')
+
+    if not username or not password:
+        return jsonify({"message": "Username and password are required"}), 400
+
+    u = User.query.filter_by(username=username).first()
+    if not u:
+        return jsonify({"message": "Invalid credentials"}), 401
+
+    if check_password_hash(u.password_hash, password):
+        session['id'] = u.id
+        session['role'] = ROLES_REV[u.role]
+        redirect_url = ROLES_URL[u.role]
+        return jsonify({'success': True, 'redirectURL': redirect_url})
+    else:
+        return jsonify({"message": "Error signing in"}), 401
+
+@bp.post('/signup')
+def sup():
+    body = request.json
+    email = body.get('email')
+    fullname = body.get('fullname')
+    password = body.get('password')
+    role = body.get('role')
+    username = body.get('username')
+
+    if not all([email, fullname, password, role, username]):
+        return jsonify({"message": "Missing required fields"}), 400
+
+    if not is_valid_email(email):
+        return jsonify({"message": "Invalid email format"}), 400
+
+    if User.query.filter_by(email=email).first():
+        return jsonify({"message": "Email is already taken"}), 409
+
+    if not is_valid_password(password):
+        return jsonify({"message": "Password must be at least 8 characters long, and contain both letters and numbers"}), 400
+
+    if role not in ['caregiver', 'patient']:
+        return jsonify({"message": "Invalid role"}), 400
+
+    if User.query.filter_by(username=username).first():
+        return jsonify({"message": "Username is already taken"}), 409
+
+    hashed_password = generate_password_hash(password)
+    new_user = User(email=sanitize_input(email), username=sanitize_input(username), password_hash=hashed_password, role=role)
+    db.session.add(new_user)
+    db.session.commit()
+
+    if role == 'caregiver':
+        db.session.add(Caregiver(name=sanitize_input(fullname), user_id=new_user.id))
+    elif role == 'patient':
+        db.session.add(Patient(name=sanitize_input(fullname), user_id=new_user.id))
+    db.session.commit()
+
+    session['id'] = new_user.id
+    session['role'] = role
+    return jsonify({'success': True, 'role': role})
+
+def tup(id, role):
+    if role == 'caregiver':
+        return Caregiver.query.filter_by(user_id=id).first()
+    elif role == 'patient':
+        return Patient.query.filter_by(user_id=id).first()
+
+@bp.route('/verify_users')
+@role_required(1)
+def verify_users():
+    users = User.query.filter_by(verified=False).all()
+    user_list = [(u, tup(u.id, u.role)) for u in users]
+    return render_template('verify_users.html', user_list=user_list)
+
+@bp.route('/verify_user/<id>')
+@role_required(1)
+def verify_u(id):
+    if not id.isdigit():
+        return jsonify({"message": "Invalid user ID"}), 400
+    u = User.query.filter_by(id=id).first()
+    if not u:
+        return jsonify({"message": "User not found"}), 404
+    u.verified = True
+    db.session.commit()
+    return redirect('/verify_users')
+
+@bp.route('/delete_user/<id>')
+@role_required(1)
+def delete_u(id):
+    if not id.isdigit():
+        return jsonify({"message": "Invalid user ID"}), 400
+    u = User.query.filter_by(id=id).first()
+    if not u:
+        return jsonify({"message": "User not found"}), 404
+
+    if u.role == 'caregiver':
+        role = Caregiver.query.filter_by(user_id=u.id).first()
+    else:
+        role = Patient.query.filter_by(user_id=u.id).first()
+
+    db.session.delete(role)
+    db.session.delete(u)
+    db.session.commit()
+    return redirect('/verify_users')
+
+@bp.get('/notifications')
+@role_required(3)
+def get_unread_notis():
+    notis = Notification.query.filter_by(recipient_id=session['id'], is_read=False).all()
+    messages = [
+        {'message': sanitize_input(n.message), 'created_at': n.created_at.strftime("%A, %B %d, %Y at %I:%M %p")}
+        for n in notis
+    ]
+    for n in notis:
+        n.is_read = True
+    db.session.commit()
+    return jsonify(messages)
+
+@bp.route('/clear_sess',methods=['POST'])
+def clear_sess():
+    session.pop('id', None)
+    session.pop('role', None)
+    return redirect('/')
+
+@bp.route('/edit_appointment/<id>', methods=['GET', 'POST'])
+@role_required(2)
+def edit_appointment(id):
+    if not id.isdigit():
+        return jsonify({"message": "Invalid appointment ID"}), 400
+    appointment = Appointment.query.filter_by(id=int(id)).first()
+    if not appointment:
+        return jsonify({"message": "Appointment not found"}), 404
+
+    if appointment.caregiver.user_id != session['id']:
+        return redirect('/unauthorized_access')
+
+    if request.method == 'GET':
+        if 'id' not in session:
+            return redirect('/')
+        user = User.query.filter_by(id=session['id']).first()
+        appointments = Appointment.query.filter_by(patient_id=appointment.patient_id).all()
+        return render_template('edit_appointment.html', appointments=appointments, appointment=appointment)
+
+    if request.method == 'POST':
+        new_date = request.form['date']
+        new_time = request.form['time']
+        if not is_valid_date(new_date + " " + new_time):
+            return jsonify({"message": "Invalid input"}), 400
+        combined_datetime = datetime.strptime(f"{new_date} {new_time}", "%Y-%m-%d %H:%M")
+        prev_date = appointment.appointment_date
+        appointment.appointment_date = combined_datetime
+        noti = Notification(
+            recipient_id=appointment.patient.id,
+            message=f"Your {prev_date.strftime('%A, %B %d, %Y at %I:%M %p')} has been rescheduled for {combined_datetime.strftime('%A, %B %d, %Y at %I:%M %p')}"
+        )
+        db.session.add(noti)
+        db.session.commit()
+        return redirect('/')
+
+# Routes for patient and caregiver dashboards with appropriate validations
+# patient_dashboard route
+@bp.route('/patient_dashboard')
+@role_required(3)
+def patient_dashboard():
+    if 'id' in session:
+        u = User.query.filter_by(id=session['id']).first()
+        p = Patient.query.filter_by(user_id=u.id).first()
+        
+        # Check if the user's account is verified
+        if not u.verified:
+            return redirect(url_for('pending_verification'))  
+        
+        caregiver_name = "No caregiver assigned yet"
+        if p.caregiver_id:
+            caregiver = Caregiver.query.filter_by(id=p.caregiver_id).first()
+            caregiver_name = caregiver.name
+        
+        user_dets = {
+            'name': sanitize_input(p.name),
+            'address': sanitize_input(p.address or 'Address not entered'),
+            'caregiver': caregiver_name
+        }
+        
+        appointments = Appointment.query.filter_by(patient_id=p.id).all()
+        return render_template('patient.html', user=user_dets, appointments=appointments)
+
+
+
+@bp.post('/schedule_appointment')
+@role_required(2)
+def schedule_appointment():
+    c = Caregiver.query.filter_by(user_id=session['id']).first()
+    patient_id = request.form['patientid']
+    date = request.form['date']
+    time = request.form['time']
+    if not patient_id.isdigit() or not is_valid_date(date + " " + time):
+        return jsonify({"message": "Invalid input"}), 400
+    combined_datetime = datetime.strptime(f"{date} {time}", "%Y-%m-%d %H:%M")
+    appointment = Appointment(patient_id=int(patient_id), caregiver_id=c.id, appointment_date=combined_datetime)
+    patient = Patient.query.filter_by(id=int(patient_id)).first()
+    notification = Notification(
+        recipient_id=patient.user_id,
+        message=f"Appointment booked on {combined_datetime.strftime('%A, %B %d, %Y at %I:%M %p')}"
+    )
+    db.session.add(appointment)
+    db.session.add(notification)
+    db.session.commit()
+    return redirect('/')
+
+@bp.route('/unauthorized_access')
+def unauthorized_access():
+    return render_template('403.html')
+
+@bp.route('/caregiver_dashboard')
+@role_required(2)
+def caregiver():
+    u = User.query.filter_by(id=session['id']).first()
+    c = Caregiver.query.filter_by(user_id=u.id).first()
+    appointments = Appointment.query.filter_by(caregiver_id=c.id).all()
+    if not u.verified:
+     return redirect(url_for('main.pending_caregiver_verification'))
+    return render_template('caregiver.html', c=c, apps=appointments)
+
+@bp.route('/edit_patient_details', methods=['GET', 'POST'])
+@role_required(3)  # Ensure only patients can access this
+def edit_patient_details():
+    if 'id' not in session:
+        return redirect('/')
+    
+    u = User.query.filter_by(id=session['id']).first()
+    if not u:
+        return redirect('/')
+
+    p = Patient.query.filter_by(user_id=u.id).first()
+    if not p:
+        return jsonify({"message": "Patient not found"}), 404
+    
+    if request.method == 'GET':
+        # Render the form with the current patient details
+        return render_template('edit_patient_details.html', patient=p)
+
+    if request.method == 'POST':
+        # Get the new details from the form
+        new_name = request.form['name']
+        new_address = request.form['address']
+        
+        # Update patient details in the database
+        p.name = sanitize_input(new_name)  # Sanitize the input
+        p.address = sanitize_input(new_address)  # Sanitize the input
+        db.session.commit()
+
+        return redirect('/patient_dashboard')  # Redirect back to the patient dashboard
+
+@bp.route('/pending_caregiver_verification')
+def pending_caregiver_verification():
+    return render_template('pending_caregiver_verification.html')
diff --git a/run.py b/run.py
new file mode 100644
index 0000000..1518931
--- /dev/null
+++ b/run.py
@@ -0,0 +1,8 @@
+from app import app
+from dotenv import load_dotenv
+
+
+load_dotenv()
+
+if __name__ == '__main__':
+    app.run(debug=True, port=9999)
diff --git a/templates/403.html b/templates/403.html
new file mode 100644
index 0000000..6ab4824
--- /dev/null
+++ b/templates/403.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unauthorized Access</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100 h-screen flex items-center justify-center">
+
+    <div class="bg-white shadow-lg rounded-lg p-8 max-w-lg text-center">
+        <h1 class="text-3xl font-bold text-red-600">403 Unauthorized</h1>
+        <p class="mt-4 text-gray-700">
+            You are not authorized to access this page. Please make sure you have the correct permissions.
+        </p>
+        
+        <div class="mt-6">
+            
+            <button onclick="history.back()" class="ml-4 bg-gray-300 text-gray-800 px-4 py-2 rounded-lg shadow hover:bg-gray-400">
+                Go Back
+            </button>
+        </div>
+        
+        <div class="mt-6 text-sm text-gray-500">
+            If you believe this is a mistake, contact support.
+        </div>
+    </div>
+
+</body>
+</html>
diff --git a/templates/admin.html b/templates/admin.html
new file mode 100644
index 0000000..0bcdeb5
--- /dev/null
+++ b/templates/admin.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100 min-h-screen">
+
+    <!-- Header -->
+    <header class="bg-blue-600 text-white p-4 shadow">
+        <div class="flex justify-between items-center">
+            <h1 class="text-2xl font-bold">Admin Dashboard</h1>
+            <!-- Logout Button -->
+            <form action="{{ url_for('main.clear_sess') }}" method="POST">
+                <button type="submit" class="inline-block px-6 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">
+                    Logout
+                </button>
+            </form>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <div class="container mx-auto mt-6">
+
+           <!-- Verify Users Section -->
+           <section class="bg-white p-6 rounded-lg shadow-md mb-6">
+            <h2 class="text-xl font-bold mb-4">User Verification</h2>
+            <p class="text-gray-600 mb-4">Manage pending user verifications.</p>
+            <a href="/verify_users" class="inline-block px-6 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">
+                Go to Verification Page
+            </a>
+        </section>
+        
+        <!-- Assign Caregivers Section -->
+        <section class="bg-white p-6 rounded-lg shadow-md">
+            <h2 class="text-xl font-bold mb-4">Assign Caregivers to Patients</h2>
+            <form id="assignForm" method="post" action="/assign_caregiver" class="space-y-4">
+                <div>
+                    <label for="patientSelect" class="block text-sm font-medium text-gray-700">Select Patient</label>
+                    <select id="patientSelect" name="patientid" class="w-full p-2 border border-gray-300 rounded-lg">
+                        {% for p in patients %}
+                        <option value="{{ p.id }}">{{ p.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div>
+                    <label for="caregiverSelect" class="block text-sm font-medium text-gray-700">Select Caregiver</label>
+                    <select id="caregiverSelect" name="caregiverid" class="w-full p-2 border border-gray-300 rounded-lg">
+                        {% for c in caregivers %}
+                        <option value="{{ c.id }}">{{ c.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700">
+                    Assign Caregiver
+                </button>
+            </form>
+        </section>
+
+        <!-- Ongoing Assignments Section -->
+        <section class="bg-white p-6 rounded-lg shadow-md mt-6">
+            <h2 class="text-xl font-bold mb-4">Ongoing Assignments</h2>
+            <table class="min-w-full border border-gray-200 text-left">
+                <thead class="bg-gray-100">
+                    <tr>
+                        <th class="px-4 py-2 border">Patient Name</th>
+                        <th class="px-4 py-2 border">Caregiver Name</th>
+                        <th class="px-4 py-2 border">Actions</th>
+                    </tr>
+                </thead>
+                <tbody id="assignmentsTable">
+                    {% for c in caregivers %}
+                        {% for p in c.patients %}
+                        <tr>
+                            <td class="px-4 py-2 border">{{ p.name }}</td>
+                            <td class="px-4 py-2 border">{{ c.name }}</td>
+                            <td class="px-4 py-2 border">
+                                <a href="/remove_caregiver/{{ p.id }}" class="text-red-600 hover:underline removeBtn">Remove</a>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    {% endfor %}
+                </tbody>
+            </table>
+        </section>
+
+        <!-- Caregiver Availability Section -->
+        <section class="bg-white p-6 rounded-lg shadow-md mt-6">
+            <h2 class="text-xl font-bold mb-4">Caregiver Availability</h2>
+            <table class="min-w-full border border-gray-200 text-left">
+                <thead class="bg-gray-100">
+                    <tr>
+                        <th class="px-4 py-2 border">Caregiver Name</th>
+                        <th class="px-4 py-2 border">Status</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for c in caregivers %}
+                    <tr>
+                        <td class="px-4 py-2 border">{{ c.name }}</td>
+                        <td class="px-4 py-2 border text-green-600 font-bold">Available</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </section>
+    </div>
+
+</body>
+</html>
diff --git a/templates/caregiver.html b/templates/caregiver.html
new file mode 100644
index 0000000..52328f4
--- /dev/null
+++ b/templates/caregiver.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Caregiver Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <header class="bg-blue-600 text-white p-4 shadow">
+        <h1 class="text-2xl font-bold">Caregiver Dashboard</h1>
+        <!-- Logout Button -->
+        <form action="{{ url_for('main.clear_sess') }}" method="get" class="inline-block">
+            <button type="submit" class="bg-red-600 text-white py-2 px-4 rounded-lg hover:bg-red-700 mt-4">
+                Logout
+            </button>
+        </form>
+    </header>
+
+    <div class="container mx-auto mt-6">
+        <!-- Schedule Appointment Section -->
+        <section class="bg-white p-6 rounded-lg shadow-md">
+            <h2 class="text-xl font-bold mb-4">Schedule an Appointment</h2>
+            <form id="appointmentForm" method="post" action="/schedule_appointment" class="space-y-4">
+                <div>
+                    <label for="patientSelect" class="block text-sm font-medium text-gray-700">Select Patient</label>
+                    <select id="patientSelect" name="patientid" class="w-full p-2 border border-gray-300 rounded-lg">
+                        {% for p in c.patients %}
+                        <option value="{{ p.id }}">{{ p.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div>
+                    <label for="appointmentDate" class="block text-sm font-medium text-gray-700">Select Date</label>
+                    <input type="date" name="date" id="appointmentDate" class="w-full p-2 border border-gray-300 rounded-lg">
+                </div>
+                <div>
+                    <label for="appointmentTime" class="block text-sm font-medium text-gray-700">Select Time</label>
+                    <input type="time" name="time" id="appointmentTime" class="w-full p-2 border border-gray-300 rounded-lg">
+                </div>
+                <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700">
+                    Schedule Appointment
+                </button>
+            </form>
+        </section>
+
+        <!-- Current Appointments Section -->
+        <section class="bg-white p-6 rounded-lg shadow-md mt-6">
+            <h2 class="text-xl font-bold mb-4">Current Appointments</h2>
+            <table class="min-w-full border border-gray-200 text-left">
+                <thead class="bg-gray-100">
+                    <tr>
+                        <th class="px-4 py-2 border">Patient Name</th>
+                        <th class="px-4 py-2 border">Date</th>
+                        <th class="px-4 py-2 border">Time</th>
+                        <th class="px-4 py-2 border">Actions</th>
+                    </tr>
+                </thead>
+                <tbody id="appointmentsTable">
+                    {% for a in apps %}
+                    <tr>
+                        <td class="px-4 py-2 border">{{ a.patient.name }}</td>
+                        <td class="px-4 py-2 border">{{ a.appointment_date.strftime("%A, %B %d, %Y") }}</td>
+                        <td class="px-4 py-2 border">{{ a.appointment_date.strftime("%I:%M %p") }}</td>
+                        <td class="px-4 py-2 border"><a class="text-blue underline" href="/edit_appointment/{{ a.id }}">Edit</a></td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </section>
+    </div>
+
+    <!-- Modal for Editing Appointments -->
+    <div id="editModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center hidden">
+        <div class="bg-white rounded-lg p-6 shadow-lg w-1/3">
+            <h2 class="text-xl font-bold mb-4">Edit Appointment</h2>
+            <form id="editForm" class="space-y-4">
+                <div>
+                    <label for="editDate" class="block text-sm font-medium text-gray-700">Select New Date</label>
+                    <input type="date" id="editDate" class="w-full p-2 border border-gray-300 rounded-lg">
+                </div>
+                <div>
+                    <label for="editTime" class="block text-sm font-medium text-gray-700">Select New Time</label>
+                    <input type="time" id="editTime" class="w-full p-2 border border-gray-300 rounded-lg">
+                </div>
+                <div class="flex justify-end space-x-4">
+                    <button type="button" id="cancelEdit" class="bg-gray-600 text-white py-2 px-4 rounded-lg hover:bg-gray-700">Cancel</button>
+                    <button type="submit" class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700">Save</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- JavaScript -->
+    <script>
+        // Show the modal (for editing) when the Edit button is clicked
+        const editButtons = document.querySelectorAll('a[href^="/edit_appointment"]');
+        const editModal = document.getElementById('editModal');
+        const cancelEditButton = document.getElementById('cancelEdit');
+
+        editButtons.forEach(button => {
+            button.addEventListener('click', (e) => {
+                e.preventDefault();  // Prevent navigation
+                editModal.classList.remove('hidden');
+            });
+        });
+
+        cancelEditButton.addEventListener('click', () => {
+            editModal.classList.add('hidden');
+        });
+    </script>
+</body>
+</html>
diff --git a/templates/edit_app.html b/templates/edit_app.html
new file mode 100644
index 0000000..abb818b
--- /dev/null
+++ b/templates/edit_app.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Update Appointment</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center">
+    <!-- Main Container -->
+    <div class="bg-white shadow-md rounded-lg p-6 w-full max-w-md">
+        <h1 class="text-2xl font-bold text-gray-800 mb-4">Update Appointment</h1>
+
+        <!-- Appointment Form -->
+        <form id="updateForm" method="post" action="/edit_appointment/{{appointment.id}}" class="space-y-4">
+
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Current Appointment</label>
+                <p class="text-gray-600">{{appointment.appointment_date.strftime("%A, %B %d, %Y at %I:%M %p")}}</p>
+            </div>
+
+            <!-- New Appointment Date -->
+            <div>
+                <label for="newDate" class="block text-sm font-medium text-gray-700">New Date</label>
+                <input 
+                    type="date" 
+                    id="newDate"  name="date"
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" 
+                    required>
+            </div>
+
+            <!-- New Appointment Time -->
+            <div>
+                <label for="newTime" class="block text-sm font-medium text-gray-700">New Time</label>
+                <input 
+                    type="time" 
+                    id="newTime" name="time"
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" 
+                    required>
+            </div>
+
+            <!-- Submit Button -->
+            <button 
+                type="submit" 
+                class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md shadow hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                Update Appointment
+            </button>
+        </form>
+    </div>
+
+    <script>
+            
+    </script>
+</body>
+</html>
diff --git a/templates/edit_patient_details.html b/templates/edit_patient_details.html
new file mode 100644
index 0000000..7601de4
--- /dev/null
+++ b/templates/edit_patient_details.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Edit Your Details</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex flex-col items-center p-6">
+
+  <!-- Header -->
+  <header class="mb-6">
+    <h1 class="text-2xl font-bold text-gray-800">Edit Your Details</h1>
+    <p class="text-sm text-gray-600">Update your personal information</p>
+  </header>
+
+  <!-- Edit Patient Form -->
+  <div class="bg-white p-6 rounded-lg shadow-md w-full max-w-md mb-6">
+    <form method="POST">
+      <div class="space-y-4">
+        <!-- Full Name -->
+        <div>
+          <label for="name" class="text-sm font-medium text-gray-500">Full Name</label>
+          <input type="text" id="name" name="name" value="{{ patient.name }}" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+        </div>
+
+        <!-- Address -->
+        <div>
+          <label for="address" class="text-sm font-medium text-gray-500">Address</label>
+          <input type="text" id="address" name="address" value="{{ patient.address }}" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+        </div>
+
+        <!-- Save Changes Button -->
+        <div class="flex justify-end">
+          <button type="submit" class="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
+            Save Changes
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+
+  <!-- Cancel Button -->
+  <div class="mt-4">
+    <a href="{{ url_for('main.patient_dashboard') }}" class="text-gray-500 hover:text-gray-700">Cancel</a>
+  </div>
+
+</body>
+</html>
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..01d4419
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hospital System</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<body class="bg-gray-100 flex justify-center items-center min-h-screen">
+
+    <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-lg">
+        <h2 id="form-title" class="text-2xl font-bold text-center mb-6">Login</h2>
+        
+      
+        <div class="flex justify-center mb-6">
+            <button id="loginBtn" class="px-4 py-2 bg-blue-500 text-white rounded-l-md">Login</button>
+            <button id="signupBtn" class="px-4 py-2 bg-gray-200 rounded-r-md">Sign Up</button>
+        </div>
+
+        <form id="authForm" method="POST">
+            <div id="roleSelect" class="mb-4 hidden">
+                <label for="role" class="block text-gray-700">I am a:</label>
+                <select id="role" name="role" class="w-full px-4 py-2 mt-2 border rounded-md">
+                    <option value="patient">Patient</option>
+                    <option value="caregiver">Caregiver</option>
+                </select>
+            </div>
+
+            <div id="emailGroup" class="mb-4 hidden">
+                <label for="email" class="block text-gray-700">Email</label>
+                <input type="email" id="email" name="email" class="w-full px-4 py-2 mt-2 border rounded-md" placeholder="Email" required>
+            </div>
+            <div class="mb-4">
+                <label for="username" class="block text-gray-700">Username</label>
+                <input type="text" id="username" name="username" class="w-full px-4 py-2 mt-2 border rounded-md" placeholder="Username" required>
+            </div>
+            <div id="fullNameGroup" class="mb-4 hidden">
+                <label for="fullName" class="block text-gray-700">Enter Full Name</label>
+                <input type="text" id="fullName" name="fullName" class="w-full px-4 py-2 mt-2 border rounded-md" placeholder="Full Name">
+            </div>
+            <div class="mb-4">
+                <label for="password" class="block text-gray-700">Password</label>
+                <input type="password" id="password" name="password" class="w-full px-4 py-2 mt-2 border rounded-md" placeholder="Password" required>
+            </div>
+            <div id="confirmPasswordGroup" class="mb-4 hidden">
+                <label for="confirmPassword" class="block text-gray-700">Confirm Password</label>
+                <input type="password" id="confirmPassword" name="confirmPassword" class="w-full px-4 py-2 mt-2 border rounded-md" placeholder="Confirm Password">
+            </div>
+
+            <div class="mb-4 text-center">
+                <button type="submit" id="formSubmit" class="bg-blue-500 text-white px-4 py-2 rounded-md">Login</button>
+            </div>
+            <p class="text-center">
+                <span id="toggleText">Don't have an account?</span> 
+                <a href="#" id="toggleLink" class="text-blue-500">Sign up here</a>
+            </p>
+        </form>
+    </div>
+
+    <script>
+        const loginBtn = document.getElementById('loginBtn');
+        const signupBtn = document.getElementById('signupBtn');
+        const formTitle = document.getElementById('form-title');
+        const roleSelect = document.getElementById('roleSelect');
+        const confirmPasswordGroup = document.getElementById('confirmPasswordGroup');
+        const fullNameGroup = document.getElementById('fullNameGroup');
+        const emailGroup = document.getElementById('emailGroup');
+        const formSubmit = document.getElementById('formSubmit');
+        const toggleText = document.getElementById('toggleText');
+        const toggleLink = document.getElementById('toggleLink');
+
+        let isSignup = false;
+
+        // Switch between Login and Signup
+        loginBtn.addEventListener('click', () => {
+            setToLoginMode();
+        });
+
+        signupBtn.addEventListener('click', () => {
+            setToSignupMode();
+        });
+
+        toggleLink.addEventListener('click', (event) => {
+            event.preventDefault();
+            if (isSignup) {
+                setToLoginMode();
+            } else {
+                setToSignupMode();
+            }
+        });
+
+        function setToLoginMode() {
+            isSignup = false;
+            formTitle.textContent = 'Login';
+            roleSelect.classList.add('hidden');
+            confirmPasswordGroup.classList.add('hidden');
+            fullNameGroup.classList.add('hidden');
+            emailGroup.classList.add('hidden');
+            formSubmit.textContent = 'Login';
+            toggleText.textContent = "Don't have an account?";
+            toggleLink.textContent = "Sign up here";
+            signupBtn.classList.remove('bg-blue-500', 'text-white');
+            signupBtn.classList.add('bg-gray-200');
+            loginBtn.classList.remove('bg-gray-200');
+            loginBtn.classList.add('bg-blue-500', 'text-white');
+        }
+
+        function setToSignupMode() {
+            isSignup = true;
+            formTitle.textContent = 'Sign Up';
+            roleSelect.classList.remove('hidden');
+            confirmPasswordGroup.classList.remove('hidden');
+            fullNameGroup.classList.remove('hidden');
+            emailGroup.classList.remove('hidden');
+            formSubmit.textContent = 'Sign Up';
+            toggleText.textContent = "Already have an account?";
+            toggleLink.textContent = "Login here";
+            loginBtn.classList.remove('bg-blue-500', 'text-white');
+            loginBtn.classList.add('bg-gray-200');
+            signupBtn.classList.remove('bg-gray-200');
+            signupBtn.classList.add('bg-blue-500', 'text-white');
+        }
+
+        // Form Submission
+        document.getElementById('authForm').addEventListener('submit', function(event) {
+            event.preventDefault();
+
+            const email = document.getElementById('email').value;
+            const username = document.getElementById('username').value;
+            const fullname = document.getElementById('fullName').value;
+            const password = document.getElementById('password').value;
+            const confirmPassword = document.getElementById('confirmPassword')?.value;
+            const role = document.getElementById('role')?.value;
+
+            if (isSignup) {
+                if (password !== confirmPassword) {
+                    alert('Passwords do not match.');
+                    return;
+                }
+
+                fetch('/signup', {
+                    method: 'POST',
+                    body: JSON.stringify({ email, username, password, fullname, role }),
+                    headers: { 'Content-Type': 'application/json' }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        alert('Signup successful! Please login.');
+                        setToLoginMode();
+                    } else {
+                        alert(data.message || 'Signup failed.');
+                    }
+                });
+            } else {
+
+                fetch('/login', {
+                    method: 'POST',
+                    body: JSON.stringify({ username, password }),
+                    headers: { 'Content-Type': 'application/json' }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        if (data.role === 'patient') {
+                            window.location.href = '/patient_dashboard';
+                        } else if (data.role === 'caregiver') {
+                            window.location.href = '/caregiver_dashboard';
+                        } else {
+                            window.location.href = '/'
+                        }
+                    } else {
+                        alert(data.message || 'Login failed.');
+                    }
+                });
+            }
+        });
+    </script>
+
+</body>
+</html>
diff --git a/templates/index2.html b/templates/index2.html
new file mode 100644
index 0000000..1aeb267
--- /dev/null
+++ b/templates/index2.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hospital System</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<body class="bg-gray-100 flex justify-center items-center min-h-screen">
+    <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-lg">
+        <h2 id="form-title" class="text-2xl font-bold text-center mb-6">Login</h2>
+
+        <div class="flex justify-center mb-6">
+            <button id="loginBtn" class="px-4 py-2 bg-blue-500 text-white rounded-l-md">Login</button>
+            <button id="signupBtn" class="px-4 py-2 bg-gray-200 rounded-r-md">Sign Up</button>
+        </div>
+
+        <form id="authForm">
+            <div id="roleSelect" class="mb-4 hidden">
+                <label for="role" class="block text-gray-700">I am a:</label>
+                <select id="role" name="role" class="w-full px-4 py-2 mt-2 border rounded-md">
+                    <option value="patient">Patient</option>
+                    <option value="caregiver">Caregiver</option>
+                </select>
+            </div>
+
+            <div id="emailGroup" class="mb-4 hidden">
+                <label for="email" class="block text-gray-700">Email</label>
+                <input type="email" id="email" name="email" class="w-full px-4 py-2 mt-2 border rounded-md" placeholder="Email">
+            </div>
+
+            <div class="mb-4">
+                <label for="username" class="block text-gray-700">Username</label>
+                <input type="text" id="username" name="username" class="w-full px-4 py-2 mt-2 border rounded-md" placeholder="Username" required>
+            </div>
+
+            <div id="fullNameGroup" class="mb-4 hidden">
+                <label for="fullName" class="block text-gray-700">Enter Full Name</label>
+                <input type="text" id="fullName" name="fullName" class="w-full px-4 py-2 mt-2 border rounded-md" placeholder="Full Name">
+            </div>
+
+            <div class="mb-4">
+                <label for="password" class="block text-gray-700">Password</label>
+                <input type="password" id="password" name="password" class="w-full px-4 py-2 mt-2 border rounded-md" placeholder="Password" required>
+            </div>
+
+            <div id="confirmPasswordGroup" class="mb-4 hidden">
+                <label for="confirmPassword" class="block text-gray-700">Confirm Password</label>
+                <input type="password" id="confirmPassword" name="confirmPassword" class="w-full px-4 py-2 mt-2 border rounded-md" placeholder="Confirm Password">
+            </div>
+
+            <div class="mb-4 text-center">
+                <button type="submit" id="formSubmit" class="bg-blue-500 text-white px-4 py-2 rounded-md">Login</button>
+            </div>
+            <p class="text-center">
+                <span id="toggleText">Don't have an account?</span>
+                <a href="#" id="toggleLink" class="text-blue-500">Sign up here</a>
+            </p>
+        </form>
+    </div>
+
+    <script>
+        const loginBtn = document.getElementById('loginBtn');
+        const signupBtn = document.getElementById('signupBtn');
+        const formTitle = document.getElementById('form-title');
+        const roleSelect = document.getElementById('roleSelect');
+        const confirmPasswordGroup = document.getElementById('confirmPasswordGroup');
+        const fullNameGroup = document.getElementById('fullNameGroup');
+        const emailGroup = document.getElementById('emailGroup');
+        const formSubmit = document.getElementById('formSubmit');
+        const toggleText = document.getElementById('toggleText');
+        const toggleLink = document.getElementById('toggleLink');
+
+        let isSignup = false;
+
+        loginBtn.addEventListener('click', () => setToLoginMode());
+        signupBtn.addEventListener('click', () => setToSignupMode());
+        toggleLink.addEventListener('click', (event) => {
+            event.preventDefault();
+            isSignup ? setToLoginMode() : setToSignupMode();
+        });
+
+        function setToLoginMode() {
+            isSignup = false;
+            formTitle.textContent = 'Login';
+            roleSelect.classList.add('hidden');
+            confirmPasswordGroup.classList.add('hidden');
+            fullNameGroup.classList.add('hidden');
+            emailGroup.classList.add('hidden');
+            formSubmit.textContent = 'Login';
+            toggleText.textContent = "Don't have an account?";
+            toggleLink.textContent = "Sign up here";
+
+            document.getElementById('email').removeAttribute('required');
+            document.getElementById('confirmPassword').removeAttribute('required');
+            document.getElementById('fullName').removeAttribute('required');
+        }
+
+        function setToSignupMode() {
+            isSignup = true;
+            formTitle.textContent = 'Sign Up';
+            roleSelect.classList.remove('hidden');
+            confirmPasswordGroup.classList.remove('hidden');
+            fullNameGroup.classList.remove('hidden');
+            emailGroup.classList.remove('hidden');
+            formSubmit.textContent = 'Sign Up';
+            toggleText.textContent = "Already have an account?";
+            toggleLink.textContent = "Login here";
+
+            document.getElementById('email').setAttribute('required', 'true');
+            document.getElementById('confirmPassword').setAttribute('required', 'true');
+            document.getElementById('fullName').setAttribute('required', 'true');
+        }
+
+        document.getElementById('authForm').addEventListener('submit', function(event) {
+            event.preventDefault();
+
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+
+            if (isSignup) {
+                const email = document.getElementById('email').value;
+                const fullname = document.getElementById('fullName').value;
+                const confirmPassword = document.getElementById('confirmPassword').value;
+                const role = document.getElementById('role').value;
+
+                if (password !== confirmPassword) {
+                    alert('Passwords do not match.');
+                    return;
+                }
+
+                fetch('/signup', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, email, password, fullname, role })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        alert('Signup successful! Please login.');
+                        setToLoginMode();
+                    } else {
+                        alert(data.message || 'Signup failed.');
+                    }
+                });
+            } else {
+                fetch('/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        alert('Login successful! Redirecting...');
+                        window.location.href = data.redirectURL || '/dashboard';
+                    } else {
+                        alert(data.message || 'Login failed.');
+                    }
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/templates/patient.html b/templates/patient.html
new file mode 100644
index 0000000..dfa983b
--- /dev/null
+++ b/templates/patient.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Patient Dashboard</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex flex-col items-center p-6">
+
+  <!-- Header -->
+  <header class="mb-6">
+    <h1 class="text-2xl font-bold text-gray-800">Patient Dashboard</h1>
+    <p class="text-sm text-gray-600">View your personal details, appointments, and notifications</p>
+  </header>
+
+  <!-- Patient Information -->
+  <div class="bg-white p-6 rounded-lg shadow-md w-full max-w-md mb-6">
+    <h2 class="text-lg font-semibold text-gray-700 mb-4">Your Information</h2>
+    <div class="space-y-3">
+      <div>
+        <h3 class="text-sm font-medium text-gray-500">Name:</h3>
+        <p id="patientName" class="text-gray-800 font-semibold">{{user['name']}}</p>
+      </div>
+      <div>
+        <h3 class="text-sm font-medium text-gray-500">Address:</h3>
+        <p id="patientAddress" class="text-gray-800 font-semibold">{{user['address']}}</p>
+      </div>
+      <div>
+        <h3 class="text-sm font-medium text-gray-500">Medical Records:</h3>
+        <p id="patientRecords" class="text-gray-800 font-semibold">No significant medical history</p>
+      </div>
+      <div>
+        <h3 class="text-sm font-medium text-gray-500">Caregiver Name:</h3>
+        <p id="caregiverName" class="text-gray-800 font-semibold">{{user['caregiver']}}</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Edit Details Link -->
+  <div class="mb-6">
+    <a href="{{ url_for('main.edit_patient_details') }}" class="text-blue-500 hover:underline">Edit Your Details</a>
+  </div>
+
+  <!-- Notifications Section -->
+  <div class="bg-white p-6 rounded-lg shadow-md w-full max-w-md mb-6">
+    <h2 class="text-lg font-semibold text-gray-700 mb-4">Notifications</h2>
+    <div id="notifications" class="space-y-2">
+      <!-- Notifications will be dynamically added here -->
+    </div>
+  </div>
+
+  <!-- Appointments -->
+  <div class="bg-white p-6 rounded-lg shadow-md w-full max-w-4xl">
+    <h2 class="text-lg font-semibold text-gray-700 mb-4">Your Appointments</h2>
+    <div id="appointmentNotification" class="p-4 bg-blue-50 border-l-4 border-blue-400 text-blue-700 rounded-lg shadow-md">
+        {% if appointments %}
+        {% for a in appointments %}
+        <p id="notificationText" class="text-lg font-medium">You have an appointment with {{ a.caregiver.name }} on {{ a.appointment_date.strftime("%A, %B %d, %Y at %I:%M %p") }}</p>
+        {% endfor %}
+        {% else %}
+        <p class="text-lg font-medium">No appointments available</p>
+        {% endif %}
+    </div>
+  </div>
+
+  <!-- Logout Button -->
+  <div class="mt-6">
+    <form action="{{ url_for('main.clear_sess') }}" method="POST">
+      <button type="submit" class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">Logout</button>
+    </form>
+  </div>
+
+  <script>
+    async function fetchNotifications() {
+        try {
+            const response = await fetch('/notifications', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                displayNotifications(data);
+            } else {
+                console.error("Failed to fetch notifications");
+            }
+        } catch (error) {
+            console.error("Error fetching notifications:", error);
+        }
+    }
+
+    // Function to display the notifications in the DOM
+    function displayNotifications(notifications) {
+        const container = document.getElementById('notifications');
+        container.innerHTML = ''; // Clear previous notifications
+
+        if (notifications.length === 0) {
+            container.innerHTML = `<p class="text-gray-500">No new notifications</p>`;
+        }
+
+        notifications.forEach(notification => {
+            const notificationElement = document.createElement('div');
+            notificationElement.classList.add('bg-white', 'p-4', 'rounded-lg', 'shadow-lg');
+            notificationElement.innerHTML = `
+                <p class="font-semibold">${notification.message}</p>
+                <p class="text-gray-500 text-sm">${notification.created_at}</p>
+            `;
+            container.appendChild(notificationElement);
+        });
+    }
+
+    // Fetch notifications initially when the page loads
+    fetchNotifications();
+
+    // Call the fetchNotifications function every 5 minutes (300000ms)
+    setInterval(fetchNotifications, 300000); // 5 minutes = 300000ms
+  </script>
+</body>
+</html>
diff --git a/templates/pending_caregiver_verification.html b/templates/pending_caregiver_verification.html
new file mode 100644
index 0000000..f2ddc63
--- /dev/null
+++ b/templates/pending_caregiver_verification.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Account Verification Pending</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center py-12">
+
+  <!-- Container for Pending Verification -->
+  <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-lg text-center">
+    
+    <!-- Icon or illustration (optional) -->
+    <div class="mb-6">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-yellow-500 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m1-11H4a2 2 0 00-2 2v16a2 2 0 002 2h16a2 2 0 002-2V4a2 2 0 00-2-2h-4m1 5a2 2 0 00-2-2h-8a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V8z"/>
+      </svg>
+    </div>
+
+    <!-- Message -->
+    <h1 class="text-xl font-semibold text-gray-700 mb-4">Your Account is Pending Verification</h1>
+    <p class="text-gray-500 mb-4">Thank you for registering with us! Your account is currently under review by our admin team. We will notify you once it's verified.</p>
+    
+    <!-- Optional progress bar or status -->
+    <div class="mb-6">
+      <div class="w-full bg-gray-200 rounded-full">
+        <div class="bg-yellow-500 text-xs font-medium text-blue-100 text-center p-1 leading-none rounded-full" style="width: 50%;">Verification in Progress</div>
+      </div>
+    </div>
+
+    <!-- Logout Button -->
+    <form action="{{ url_for('main.clear_sess') }}" method="POST">
+      <button type="submit" class="inline-block px-6 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">Logout</button>
+    </form>
+  </div>
+
+</body>
+</html>
diff --git a/templates/pending_verification.html b/templates/pending_verification.html
new file mode 100644
index 0000000..5f92538
--- /dev/null
+++ b/templates/pending_verification.html
@@ -0,0 +1,39 @@
+<!-- templates/pending_verification.html -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Account Verification Pending</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center py-12">
+
+  <!-- Container for Pending Verification -->
+  <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-lg text-center">
+    
+    <!-- Icon or illustration (optional) -->
+    <div class="mb-6">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-yellow-500 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m1-11H4a2 2 0 00-2 2v16a2 2 0 002 2h16a2 2 0 002-2V4a2 2 0 00-2-2h-4m1 5a2 2 0 00-2-2h-8a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V8z"/>
+      </svg>
+    </div>
+
+    <!-- Message -->
+    <h1 class="text-xl font-semibold text-gray-700 mb-4">Your Account is Pending Verification</h1>
+    <p class="text-gray-500 mb-4">Thank you for registering with us! Your account is currently under review by our admin team. We will notify you once it's verified.</p>
+    
+    <!-- Optional progress bar or status -->
+    <div class="mb-6">
+      <div class="w-full bg-gray-200 rounded-full">
+        <div class="bg-yellow-500 text-xs font-medium text-blue-100 text-center p-1 leading-none rounded-full" style="width: 50%;">Verification in Progress</div>
+      </div>
+    </div>
+
+    <!-- Optional action button -->
+    <a href="/" class="inline-block px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Go to Dashboard</a>
+  </div>
+
+</body>
+</html>
diff --git a/templates/verify_users.html b/templates/verify_users.html
new file mode 100644
index 0000000..1994f80
--- /dev/null
+++ b/templates/verify_users.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin User Management</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center">
+
+    <!-- Main Container -->
+    <div class="bg-white shadow-md rounded-lg p-6 max-w-3xl w-full">
+        <h1 class="text-2xl font-bold text-gray-800 mb-4">User Management</h1>
+
+        <!-- User List -->
+        
+        <div id="userList" class="space-y-4">
+            <!-- Sample User Row -->
+            {%for u in user_list%}
+            <div class="flex items-center justify-between bg-gray-50 p-4 rounded-md shadow">
+                <div>
+                    <p class="text-lg font-semibold text-gray-700">{{u[1].name}}</p>
+                    <p class="text-sm text-gray-500">Email: {{u[0].email}}</p>
+                    <p class="text-sm text-gray-500">Role: {{u[0].role}}</p>
+                </div>
+                <div class="space-x-2">
+                    <a href="/verify_user/{{u[0].id}}" 
+                        class="verify-btn bg-green-500 text-white px-4 py-2 rounded-md shadow hover:bg-green-600"
+                        data-user-id="1">
+                        Verify
+                    </a>
+                    <a href="/delete_user/{{u[0].id}}" 
+                        class="delete-btn bg-red-500 text-white px-4 py-2 rounded-md shadow hover:bg-red-600"
+                        data-user-id="1">
+                        Delete
+                    </a>
+        </div>
+    </div>
+    {%endfor%}
+        </div>
+    </div>
+
+
+</body>
+</html>