From 3308d036a56bea231706c677899e0cbf0eb52a4e Mon Sep 17 00:00:00 2001
From: Adams Pierre David <57180807+adamspd@users.noreply.github.com>
Date: Sat, 16 Dec 2023 22:00:10 +0100
Subject: [PATCH 1/7] Updated documentation's version

---
 appointment/__init__.py         |  2 +-
 docs/history/readme_v2_1_1.md   |  2 +-
 docs/migration_guides/latest.md | 14 +++++++-------
 docs/release_notes/latest.md    | 10 +++++-----
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/appointment/__init__.py b/appointment/__init__.py
index 2a6fce2..0d1cec8 100644
--- a/appointment/__init__.py
+++ b/appointment/__init__.py
@@ -4,5 +4,5 @@
 __description__ = "Managing appointment scheduling with customizable slots, staff features, and conflict handling."
 __package_name__ = "django-appointment"
 __url__ = "https://github.com/adamspd/django-appointment"
-__version__ = "2.1.2"
+__version__ = "2.1.5"
 __test_version__ = True
diff --git a/docs/history/readme_v2_1_1.md b/docs/history/readme_v2_1_1.md
index 2d10089..0f52f84 100644
--- a/docs/history/readme_v2_1_1.md
+++ b/docs/history/readme_v2_1_1.md
@@ -24,7 +24,7 @@ notes](https://github.com/adamspd/django-appointment/tree/main/docs/release_note
 6. Staff members can now define their own configuration settings for the appointment system, such as slot duration,
    working hours, and buffer time between appointments. However, only admins have the privilege to add/remove services.
 
-### Breaking Changes in version 2.1.2:
+### Breaking Changes in version 2.1.1:
 
 - None
 
diff --git a/docs/migration_guides/latest.md b/docs/migration_guides/latest.md
index 153c506..f243ff2 100644
--- a/docs/migration_guides/latest.md
+++ b/docs/migration_guides/latest.md
@@ -1,10 +1,10 @@
-## Migration Guide for Version 2.1.2 🚀
+## Migration Guide for Version 2.1.5 🚀
 
-Version 2.1.2 of django-appointment is focused on enhancing functionality, documentation, and internationalization, with
+Version 2.1.5 of django-appointment is focused on enhancing functionality, documentation, and internationalization, with
 no significant database schema changes introduced. This guide provides the steps to ensure a smooth upgrade from version
 2.1.1 or any earlier versions post 2.0.0.
 
-### Steps for Upgrading to Version 2.1.2:
+### Steps for Upgrading to Version 2.1.5:
 
 1. **Backup Your Database**:
     - As a best practice, always back up your current database before performing an upgrade. This precaution ensures you
@@ -13,7 +13,7 @@ no significant database schema changes introduced. This guide provides the steps
 2. **Update Package**:
     - Upgrade to the latest version by running:
       ```bash
-      pip install django-appointment==2.1.2
+      pip install django-appointment==2.1.5
       ```
 
 3. **Run Migrations** (if any):
@@ -27,17 +27,17 @@ no significant database schema changes introduced. This guide provides the steps
 4. **Review and Test**:
     - After upgrading, thoroughly test your application to ensure all functionalities are working as expected with the
       new version.
-    - Pay special attention to features affected by the updates in version 2.1.2, as detailed in the release notes.
+    - Pay special attention to features affected by the updates in version 2.1.5, as detailed in the release notes.
 
 ### Troubleshooting:
 
 - **Issues Post Migration**:
-    - If you encounter issues after migration, consult the release notes for version 2.1.2 for specific updates that
+    - If you encounter issues after migration, consult the release notes for version 2.1.5 for specific updates that
       might affect your setup.
     - Check the Django logs for any error messages that can provide insights into issues.
 
 ### Important Notes 📝:
 
-- No database schema changes were introduced in version 2.1.2, so the migration process should be straightforward.
+- No database schema changes were introduced in version 2.1.5, so the migration process should be straightforward.
 - As with any upgrade, testing in a development or staging environment before applying changes to your production
   environment is highly recommended.
diff --git a/docs/release_notes/latest.md b/docs/release_notes/latest.md
index dd920ca..b11429a 100644
--- a/docs/release_notes/latest.md
+++ b/docs/release_notes/latest.md
@@ -1,12 +1,12 @@
 # django-appointment 📦
 
-**v2.1.2 🆕**
+**v2.1.5 🆕**
 
-## ___Release Notes for Version 2.1.2___
+## ___Release Notes for Version 2.1.5___
 
 ## Introduction 📜
 
-Version 2.1.2 of django-appointment introduces a series of refinements and updates, enhancing both the functionality and
+Version 2.1.5 of django-appointment introduces a series of refinements and updates, enhancing both the functionality and
 the user experience. This release focuses on improving documentation, workflow, community engagement, and
 internationalization, alongside some crucial library updates and new dynamic features.
 
@@ -115,7 +115,7 @@ If you're upgrading from a previous version or installing for the first time, fo
 ### Installation 📥:
 
 ```bash
-pip install django-appointment==2.1.0
+pip install django-appointment==2.1.5
 ```
 
 ### Database Migration 🔧:
@@ -132,5 +132,5 @@ please refer to the provided resources.
 
 ## Conclusion 🎉
 
-Version 2.1.2 continues our commitment to providing a robust and user-friendly appointment management solution. With
+Version 2.1.5 continues our commitment to providing a robust and user-friendly appointment management solution. With
 these updates, Django Appointment becomes more adaptable, secure, and community-focused.

From 895bf6b8347364cc2bf4bca39310074f31e93383 Mon Sep 17 00:00:00 2001
From: Adams Pierre David <57180807+adamspd@users.noreply.github.com>
Date: Mon, 1 Jan 2024 01:06:25 +0100
Subject: [PATCH 2/7] Feature and UI Enhancements for v2.1.5

- Implemented dynamic AJAX-based appointment management functionalities.
- Revamped user interface with updated staff_index.js for enhanced interactivity and mobile responsiveness.
- Improved security measures and data handling in appointment processing.
- Added new methods for appointment data representation in dictionary format.
- Introduced dynamic labeling feature for appointment pages with app_offered_by_label.
- Updated documentation and workflow processes for better clarity and efficiency.
- Strengthened community engagement with new community guidelines and issue templates.
- Performed crucial library updates and applied security patches.
- Refined translation inconsistencies for improved internationalization.
- Added endpoint for deleting appointments.
- Fixed access issue for staff members without a staff profile in the appointment page.
- Various CSS and JavaScript optimizations for a more responsive and user-friendly interface.
- Starting to update translations.
---
 .gitignore                                    |   1 +
 appointment/models.py                         |  16 +
 appointment/services.py                       |  13 +-
 appointment/static/css/app_admin/admin.css    |  53 ++
 appointment/static/css/appointments.css       | 455 +----------
 appointment/static/css/appt-common.css        | 452 +++++++++++
 .../static/js/app_admin/staff_index.js        | 732 ++++++++++++------
 appointment/static/js/appointments.js         |   4 +-
 appointment/static/js/modal/confirm_modal.js  |  15 -
 appointment/static/js/modal/error_modal.js    |   2 +-
 appointment/static/js/modal/show_modal.js     |  25 +
 .../administration/display_appointment.html   |   4 +-
 .../administration/service_list.html          |   4 +-
 .../templates/administration/staff_index.html | 213 ++++-
 .../administration/user_profile.html          |  10 +-
 .../templates/appointment/appointments.html   |   7 +-
 .../templates/modal/confirm_modal.html        |   4 +-
 .../templates/modal/event_details_modal.html  |   5 +
 appointment/utils/date_time.py                |   2 +-
 appointment/utils/db_helpers.py               |   4 +-
 appointment/utils/error_codes.py              |   2 +
 appointment/utils/json_context.py             |  12 +-
 appointment/views_admin.py                    | 145 +++-
 appointments/settings.py                      |  15 +-
 appointments/urls.py                          |   6 +-
 docs/release_notes/latest.md                  |  24 +-
 26 files changed, 1448 insertions(+), 777 deletions(-)
 create mode 100644 appointment/static/css/app_admin/admin.css
 create mode 100644 appointment/static/css/appt-common.css
 delete mode 100644 appointment/static/js/modal/confirm_modal.js
 create mode 100644 appointment/static/js/modal/show_modal.js

diff --git a/.gitignore b/.gitignore
index b5fd1f6..11323c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -177,3 +177,4 @@ cython_debug/
 **/.DS_Store/**
 **/migrations/**
 /services/
+locale/
diff --git a/appointment/models.py b/appointment/models.py
index 892020a..8e95bfa 100644
--- a/appointment/models.py
+++ b/appointment/models.py
@@ -526,6 +526,22 @@ def is_valid_date(appt_date, start_time, staff_member, current_appointment_id, w
     def is_owner(self, staff_user_id):
         return self.appointment_request.staff_member.user.id == staff_user_id
 
+    def to_dict(self):
+        return {
+            "id": self.id,
+            "client_name": self.client.get_full_name(),
+            "client_email": self.client.email,
+            "start_time": self.appointment_request.start_time.strftime('%Y-%m-%d %H:%M'),
+            "end_time": self.appointment_request.end_time.strftime('%Y-%m-%d %H:%M'),
+            "service_name": self.appointment_request.service.name,
+            "address": self.address,
+            "want_reminder": self.want_reminder,
+            "additional_info": self.additional_info,
+            "paid": self.paid,
+            "amount_to_pay": self.amount_to_pay,
+            "id_request": self.id_request,
+        }
+
 
 class Config(models.Model):
     """
diff --git a/appointment/services.py b/appointment/services.py
index 6151cf6..9b9986a 100644
--- a/appointment/services.py
+++ b/appointment/services.py
@@ -300,16 +300,9 @@ def get_working_hours_and_days_off_context(request, btn_txt, form_name, form, us
     return context
 
 
-def save_appointment(appt, client_name, client_email, start_time, phone_number, client_address, service_id):
+def save_appointment(appt, client_name, client_email, start_time, phone_number, client_address, service_id,
+                     want_reminder=False, additional_info=None):
     """Save an appointment's details.
-
-    :param appt: The appointment to modify.
-    :param client_name: The name of the client.
-    :param client_email: The email of the client.
-    :param start_time: The start time of the appointment.
-    :param phone_number: The phone number of the client.
-    :param client_address: The address of the client.
-    :param service_id: The ID of the service.
     :return: The modified appointment.
     """
     # Modify and save client details
@@ -335,6 +328,8 @@ def save_appointment(appt, client_name, client_email, start_time, phone_number,
     # Modify and save appointment details
     appt.phone = phone_number
     appt.address = client_address
+    appt.want_reminder = want_reminder
+    appt.additional_info = additional_info
     appt.save()
     return appt
 
diff --git a/appointment/static/css/app_admin/admin.css b/appointment/static/css/app_admin/admin.css
new file mode 100644
index 0000000..ea5b6db
--- /dev/null
+++ b/appointment/static/css/app_admin/admin.css
@@ -0,0 +1,53 @@
+/* Hide scrollbar for day grid month view on small screens */
+
+@media (max-width: 500px) {
+    .djangoAppt_no-events {
+        margin-bottom: 10px;
+    }
+
+    .djangoAppt_btn-new-event {
+        padding: 5px 8px !important;
+        font-size: 13px !important;
+    }
+
+    .fc-dayGridMonth-view .fc-scroller {
+        overflow: hidden !important;
+    }
+
+    .modal-content {
+        margin: 0 auto !important;
+    }
+
+    .modal-footer {
+        text-align: left !important;
+        flex-wrap: inherit !important;
+        justify-content: center !important;
+        align-content: flex-start;
+    }
+
+    #eventDetailsModal .btn {
+        margin-right: 2px !important;
+        font-size: 13px !important;
+    }
+
+    #eventModalBody, #serviceSelect {
+        font-size: 13px !important;
+    }
+
+    #eventModalLabel {
+        font-size: 15px !important;
+    }
+}
+
+/* Hide scrollbar for time grid day view on larger screens */
+@media (min-width: 450px) {
+    .fc-timeGridDay-view .fc-scroller {
+        overflow: hidden !important;
+    }
+}
+
+@media (min-width: 600px) {
+    .fc-scroller {
+        overflow: hidden !important;
+    }
+}
\ No newline at end of file
diff --git a/appointment/static/css/appointments.css b/appointment/static/css/appointments.css
index 45ae99b..aa75c54 100644
--- a/appointment/static/css/appointments.css
+++ b/appointment/static/css/appointments.css
@@ -1,447 +1,8 @@
-.djangoAppt_main-container {
-    margin: 20px auto;
-    max-width: 1200px;
-    padding: 20px;
-    background-color: rgba(248, 249, 250, 0.4);
-    border-radius: 5px;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-}
-
-.djangoAppt_body-container {
-    margin: 0 auto;
-    max-width: 1120px;
-    padding: 0 15px;
-}
-
-.djangoAppt_page-body {
-    display: flex;
-    flex-direction: row;
-    margin-top: 50px;
-}
-
-.djangoAppt_appointment-calendar {
-    flex: 3;
-    padding: 20px;
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-}
-
-.djangoAppt_service-description {
-    flex: 1;
-    margin-left: 20px;
-    padding: 20px;
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-}
-
-.djangoAppt_second-part {
-    margin-top: 10px;
-}
-
-.djangoAppt_calendar-and-slot {
-    margin-top: 20px;
-    display: flex;
-}
-
-.djangoAppt_service-description-content {
-    margin-top: 20px;
-    color: black;
-}
-
-.djangoAppt_item-name {
-    color: black;
-    font-weight: bold;
-    font-size: 20px;
-    margin-bottom: 10px;
-}
-
-.djangoAppt_calendar {
-    flex: 3;
-}
-
-.djangoAppt_slot {
-    flex: 2;
-}
-
-.djangoAppt_appointment-calendar-title-timezone {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-.djangoAppt_title {
-    flex: 1;
-    font-weight: bold;
-    font-size: 20px;
-}
-
-.djangoAppt_timezone-details {
-    flex: 1;
-    text-align: right;
-    font-size: 16px;
-    color: #333;
-}
-
-.fc-day {
-    font-size: 12px;
-}
-
-.fc-daygrid-day-frame {
-    height: 20px;
-}
-
-a {
-    color: #0c042c;
-}
-
-.djangoAppt_slot {
-    margin-left: 20px;
-}
-
-.djangoAppt_slot-list {
-    columns: 2;
-    -webkit-columns: 2;
-    -moz-columns: 2;
-    margin-top: 10px;
-    padding-left: 10px !important;
-}
-
-#slot-list li {
-    list-style-type: none;
-    text-align: center;
-}
-
-.djangoAppt_appointment-slot {
-    border: 1px solid #ccc;
-    background-color: rgba(0, 48, 124, 0.95);
-    color: #fff;
-    padding: 7px;
-    margin-bottom: 6px;
-    cursor: pointer;
-    border-radius: 4px;
-}
-
-.djangoAppt_appointment-slot:hover {
-    background-color: #fff;
-    color: rgba(42, 42, 42, 0.82);
-}
-
-.selected {
-    background-color: #fff;
-    color: rgba(42, 42, 42, 0.82);
-}
-
-.djangoAppt_next-available-date {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-    margin-top: 10px;
-    margin-left: 10px;
-    padding: 8px;
-    background-color: #f8f9fa;
-    border: 1px solid #dee2e6;
-    border-radius: 5px;
-    width: fit-content;
-}
-
 .fc-scroller {
     overflow: hidden !important;
 }
 
-/* Change the color of the buttons for the calendar */
-.fc-button {
-    background-color: rgba(0, 48, 124, 0.95) !important;
-    border-color: rgba(2, 76, 157, 0.85) !important;
-    color: #fff !important;
-}
-
-/* Change the color of the buttons when hovered */
-.fc-button:hover {
-    background-color: #025bbb !important;
-    border-color: #0056b3;
-}
-
-/* Change the color of the buttons when active or focused */
-.fc-button:active, .fc-button:focus {
-    background-color: #0759b2 !important;
-    border-color: #145294;
-}
-
-.djangoAppt_date_chosen {
-    margin-left: 5px;
-    padding-left: 5px;
-    font-size: 18px;
-    color: #333;
-    font-weight: bold;
-}
-
-.djangoAppt_btn-request-next-slot {
-    margin-left: 10px;
-    padding: 8px !important;
-    margin-top: -30px;
-}
-
-.djangoAppt_no-availability-text {
-    margin-left: 5px;
-    padding-left: 5px;
-    color: #f00;
-    font-weight: bold;
-}
-
-.disabled-day {
-    background-color: #ECECEC; /* light gray */
-    opacity: 0.5;
-    pointer-events: none; /* makes it unclickable */
-}
-
-/* responsive */
-
-/* CSS for screens larger than 1200px */
-@media (min-width: 1200px) {
-    .djangoAppt_page-body {
-        flex-direction: row;
-    }
-
-    .djangoAppt_appointment-calendar {
-        flex: 3;
-        padding: 20px;
-    }
-
-    .djangoAppt_service-description {
-        flex: 1;
-        margin-left: 20px;
-    }
-
-    .djangoAppt_calendar {
-        flex: 3;
-    }
-
-    .djangoAppt_slot {
-        flex: 2;
-    }
-
-    .djangoAppt_slot {
-        margin-left: 20px;
-    }
-}
-
-/* Select design */
-
-#staff_id {
-    width: 100%;
-    padding: 2px 4px;
-    border: 1px solid rgba(255, 227, 227, 0.89);
-    border-radius: 5px;
-    background-color: #d4eaf5;
-    color: #333;
-    appearance: none; /* Remove default arrow icon in some browsers */
-    -webkit-appearance: none; /* For Webkit browsers */
-    -moz-appearance: none; /* For Firefox */
-    cursor: pointer;
-    outline: none;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    transition: background-color 0.3s;
-    position: relative;
-    font-size: 16px;
-}
-
-#staff_id:hover {
-    background-color: #f6c6c6;
-}
-
-#staff_id:focus {
-    background-color: #d1dbff;
-}
-
-/* Add a custom arrow icon using pseudo-elements */
-#staff_id::-ms-expand {
-    display: none;
-}
-
-#staff_id::after {
-    content: '\25BC'; /* Unicode arrow character */
-    position: absolute;
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-    pointer-events: none; /* Make sure clicks pass through */
-    color: #333;
-}
-
-/* Styling the options when hovered */
-#staff_id option:hover {
-    background-color: #f0f0f0;
-    color: #333;
-}
-
-/* Styling the options when they are active (clicked or selected with keyboard) */
-#staff_id option:active, #staff_id option:checked {
-    background-color: #e0e0e0;
-    color: #333;
-}
-
-/* This changes the background color of the option elements when the select is open */
-#staff_id option {
-    background-color: #f8f8f8;
-    color: #333;
-}
-
-/* For Firefox - to change the background color of the dropdown */
-#staff_id:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 #333;
-}
-
-
-/* CSS for screens smaller than 1200px */
-@media (max-width: 1199px) {
-    .djangoAppt_page-body {
-        flex-direction: column;
-    }
-
-    .djangoAppt_appointment-calendar {
-        flex: 1;
-        padding: 10px;
-    }
-
-    .djangoAppt_service-description {
-        flex: 1;
-        margin-left: 0;
-        margin-top: 20px;
-    }
-
-    .djangoAppt_calendar {
-        flex: 1;
-    }
-
-    .djangoAppt_slot {
-        flex: 1;
-    }
-
-    .djangoAppt_slot {
-        margin-left: 10px;
-    }
-}
-
-/* CSS for screens smaller or equal to 768px */
-@media (max-width: 768px) {
-    .djangoAppt_main-container {
-        padding: 8px;
-    }
-
-    .djangoAppt_body-container {
-        padding: 8px;
-    }
-
-    .djangoAppt_appointment-calendar {
-        flex: 1;
-        padding: 10px;
-    }
-
-    .djangoAppt_service-description {
-        flex: 1;
-        margin-left: 0;
-        margin-top: 20px;
-    }
-
-    .djangoAppt_calendar-and-slot {
-        display: grid;
-    }
-
-    .djangoAppt_slot {
-        margin-top: 40px;
-    }
-
-    .djangoAppt_slot-list, .djangoAppt_date_chosen, .djangoAppt_no-availability-text {
-        margin-left: 0;
-        padding-left: 0;
-    }
-
-    .djangoAppt_btn-request-next-slot {
-        margin-left: 0;
-    }
-
-    /* Reduce font size for smaller screens */
-    .djangoAppt_title, .djangoAppt_item-name, .djangoAppt_date_chosen, .djangoAppt_next-available-date {
-        font-size: 16px;
-    }
-
-    .djangoAppt_timezone-details {
-        font-size: 14px;
-    }
-
-    .fc-day {
-        font-size: 10px;
-    }
-}
-
-/* CSS for screens smaller or equal to 768px */
 @media (max-width: 450px) {
-    .djangoAppt_main-container {
-        padding: 3px;
-    }
-
-    .djangoAppt_body-container {
-        padding: 3px;
-    }
-
-    .djangoAppt_appointment-calendar {
-        flex: 1;
-        padding: 5px;
-    }
-
-    .djangoAppt_service-description {
-        flex: 1;
-        margin-left: 0;
-        margin-top: 20px;
-    }
-
-    .djangoAppt_calendar-and-slot {
-        display: grid;
-    }
-
-    .djangoAppt_slot {
-        margin-top: 40px;
-    }
-
-    .djangoAppt_slot-list, .djangoAppt_date_chosen, .djangoAppt_no-availability-text {
-        margin-left: 0 !important;
-        padding-left: 0 !important;
-    }
-
-    .djangoAppt_btn-request-next-slot {
-        margin-left: 0;
-    }
-
-    /* Reduce font size for smaller screens */
-    .djangoAppt_title, .djangoAppt_item-name, .djangoAppt_date_chosen, .djangoAppt_next-available-date {
-        font-size: 13px;
-    }
-
-    .djangoAppt_timezone-details, .error-message {
-        font-size: 13px;
-    }
-
-    .fc-day {
-        font-size: 11px;
-    }
-
-    .fc-toolbar-title {
-        font-size: 14px !important;
-    }
-
-    .fc {
-        font-size: 13px !important;
-    }
-
-    .fc, .fc-button {
-        padding: .3em .45em !important;
-        vertical-align: center !important;
-    }
-
     .fc-daygrid-day-events {
         display: none !important;
         margin: 0 !important;
@@ -450,17 +11,7 @@ a {
         height: 0 !important;
     }
 
-    .djangoAppt_appointment-slot {
-        padding: 5px;
-        font-size: 13px;
-    }
-
-    .djangoAppt_service-description {
-        font-size: 13px !important;
+    .fc, .fc-button {
+        padding: .3em .45em !important;
     }
-}
-
-.selected-cell {
-    background-color: #aaddff; /* or any color you prefer */
-}
-
+}
\ No newline at end of file
diff --git a/appointment/static/css/appt-common.css b/appointment/static/css/appt-common.css
new file mode 100644
index 0000000..d2056b3
--- /dev/null
+++ b/appointment/static/css/appt-common.css
@@ -0,0 +1,452 @@
+.djangoAppt_main-container {
+    margin: 20px auto;
+    max-width: 1200px;
+    padding: 20px;
+    background-color: rgba(248, 249, 250, 0.4);
+    border-radius: 5px;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+}
+
+.djangoAppt_body-container {
+    margin: 0 auto;
+    max-width: 1120px;
+    padding: 0 15px;
+}
+
+.djangoAppt_page-body {
+    display: flex;
+    flex-direction: row;
+    margin-top: 50px;
+}
+
+.djangoAppt_appointment-calendar {
+    flex: 3;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+}
+
+.djangoAppt_service-description {
+    flex: 1;
+    margin-left: 20px;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+}
+
+.djangoAppt_second-part {
+    margin-top: 10px;
+}
+
+.djangoAppt_calendar-and-slot {
+    margin-top: 20px;
+    display: flex;
+}
+
+.djangoAppt_service-description-content {
+    margin-top: 20px;
+    color: black;
+}
+
+.djangoAppt_item-name {
+    color: black;
+    font-weight: bold;
+    font-size: 20px;
+    margin-bottom: 10px;
+}
+
+.djangoAppt_calendar {
+    flex: 3;
+}
+
+.djangoAppt_slot {
+    flex: 2;
+}
+
+.djangoAppt_appointment-calendar-title-timezone {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.djangoAppt_title {
+    flex: 1;
+    font-weight: bold;
+    font-size: 20px;
+}
+
+.djangoAppt_timezone-details {
+    flex: 1;
+    text-align: right;
+    font-size: 16px;
+    color: #333;
+}
+
+.fc-day {
+    font-size: 12px;
+}
+
+.fc-daygrid-day-frame {
+    height: 20px;
+}
+
+a {
+    color: #0c042c;
+}
+
+.djangoAppt_slot {
+    margin-left: 20px;
+}
+
+.djangoAppt_slot-list {
+    columns: 2;
+    -webkit-columns: 2;
+    -moz-columns: 2;
+    margin-top: 10px;
+    padding-left: 10px !important;
+}
+
+#slot-list li {
+    list-style-type: none;
+    text-align: center;
+}
+
+.djangoAppt_appointment-slot {
+    border: 1px solid #ccc;
+    background-color: rgba(0, 48, 124, 0.95);
+    color: #fff;
+    padding: 7px;
+    margin-bottom: 6px;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.djangoAppt_appointment-slot:hover {
+    background-color: #fff;
+    color: rgba(42, 42, 42, 0.82);
+}
+
+.selected {
+    background-color: #fff;
+    color: rgba(42, 42, 42, 0.82);
+}
+
+.djangoAppt_next-available-date {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-top: 10px;
+    margin-left: 10px;
+    padding: 8px;
+    background-color: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 5px;
+    width: fit-content;
+}
+
+/* Change the color of the buttons for the calendar */
+.fc-button {
+    background-color: rgba(0, 48, 124, 0.95) !important;
+    border-color: rgba(2, 76, 157, 0.85) !important;
+    color: #fff !important;
+}
+
+/* Change the color of the buttons when hovered */
+.fc-button:hover {
+    background-color: #025bbb !important;
+    border-color: #0056b3;
+}
+
+/* Change the color of the buttons when active or focused */
+.fc-button:active, .fc-button:focus {
+    background-color: #0759b2 !important;
+    border-color: #145294;
+}
+
+.djangoAppt_date_chosen {
+    margin-left: 5px;
+    padding-left: 5px;
+    font-size: 18px;
+    color: #333;
+    font-weight: bold;
+}
+
+.djangoAppt_btn-request-next-slot {
+    margin-left: 10px;
+    padding: 8px !important;
+    margin-top: -30px;
+}
+
+.djangoAppt_no-availability-text {
+    margin-left: 5px;
+    padding-left: 5px;
+    color: #f00;
+    font-weight: bold;
+}
+
+.disabled-day {
+    background-color: #ECECEC; /* light gray */
+    opacity: 0.5;
+    pointer-events: none; /* makes it unclickable */
+}
+
+/* responsive */
+
+/* CSS for screens larger than 1200px */
+@media (min-width: 1200px) {
+    .djangoAppt_page-body {
+        flex-direction: row;
+    }
+
+    .djangoAppt_appointment-calendar {
+        flex: 3;
+        padding: 20px;
+    }
+
+    .djangoAppt_service-description {
+        flex: 1;
+        margin-left: 20px;
+    }
+
+    .djangoAppt_calendar {
+        flex: 3;
+    }
+
+    .djangoAppt_slot {
+        flex: 2;
+    }
+
+    .djangoAppt_slot {
+        margin-left: 20px;
+    }
+}
+
+/* Select design */
+
+#staff_id {
+    width: 100%;
+    padding: 2px 4px;
+    border: 1px solid rgba(255, 227, 227, 0.89);
+    border-radius: 5px;
+    background-color: #d4eaf5;
+    color: #333;
+    appearance: none; /* Remove default arrow icon in some browsers */
+    -webkit-appearance: none; /* For Webkit browsers */
+    -moz-appearance: none; /* For Firefox */
+    cursor: pointer;
+    outline: none;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s;
+    position: relative;
+    font-size: 16px;
+}
+
+#staff_id:hover {
+    background-color: #f6c6c6;
+}
+
+#staff_id:focus {
+    background-color: #d1dbff;
+}
+
+/* Add a custom arrow icon using pseudo-elements */
+#staff_id::-ms-expand {
+    display: none;
+}
+
+#staff_id::after {
+    content: '\25BC'; /* Unicode arrow character */
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    pointer-events: none; /* Make sure clicks pass through */
+    color: #333;
+}
+
+/* Styling the options when hovered */
+#staff_id option:hover {
+    background-color: #f0f0f0;
+    color: #333;
+}
+
+/* Styling the options when they are active (clicked or selected with keyboard) */
+#staff_id option:active, #staff_id option:checked {
+    background-color: #e0e0e0;
+    color: #333;
+}
+
+/* This changes the background color of the option elements when the select is open */
+#staff_id option {
+    background-color: #f8f8f8;
+    color: #333;
+}
+
+/* For Firefox - to change the background color of the dropdown */
+#staff_id:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 #333;
+}
+
+
+/* CSS for screens smaller than 1200px */
+@media (max-width: 1199px) {
+    .djangoAppt_page-body {
+        flex-direction: column;
+    }
+
+    .djangoAppt_appointment-calendar {
+        flex: 1;
+        padding: 10px;
+    }
+
+    .djangoAppt_service-description {
+        flex: 1;
+        margin-left: 0;
+        margin-top: 20px;
+    }
+
+    .djangoAppt_calendar {
+        flex: 1;
+    }
+
+    .djangoAppt_slot {
+        flex: 1;
+    }
+
+    .djangoAppt_slot {
+        margin-left: 10px;
+    }
+}
+
+/* CSS for screens smaller or equal to 768px */
+@media (max-width: 768px) {
+    .djangoAppt_main-container {
+        padding: 8px;
+    }
+
+    .djangoAppt_body-container {
+        padding: 8px;
+    }
+
+    .djangoAppt_appointment-calendar {
+        flex: 1;
+        padding: 10px;
+    }
+
+    .djangoAppt_service-description {
+        flex: 1;
+        margin-left: 0;
+        margin-top: 20px;
+    }
+
+    .djangoAppt_calendar-and-slot {
+        display: grid;
+    }
+
+    .djangoAppt_slot {
+        margin-top: 40px;
+    }
+
+    .djangoAppt_slot-list, .djangoAppt_date_chosen, .djangoAppt_no-availability-text {
+        margin-left: 0;
+        padding-left: 0;
+    }
+
+    .djangoAppt_btn-request-next-slot {
+        margin-left: 0;
+    }
+
+    /* Reduce font size for smaller screens */
+    .djangoAppt_title, .djangoAppt_item-name, .djangoAppt_date_chosen, .djangoAppt_next-available-date {
+        font-size: 16px;
+    }
+
+    .djangoAppt_timezone-details {
+        font-size: 14px;
+    }
+
+    .fc-day {
+        font-size: 10px;
+    }
+}
+
+/* CSS for screens smaller or equal to 768px */
+@media (max-width: 450px) {
+    .djangoAppt_main-container {
+        padding: 3px;
+    }
+
+    .djangoAppt_body-container {
+        padding: 3px;
+    }
+
+    .djangoAppt_appointment-calendar {
+        flex: 1;
+        padding: 5px;
+    }
+
+    .djangoAppt_service-description {
+        flex: 1;
+        margin-left: 0;
+        margin-top: 20px;
+    }
+
+    .djangoAppt_calendar-and-slot {
+        display: grid;
+    }
+
+    .djangoAppt_slot {
+        margin-top: 40px;
+    }
+
+    .djangoAppt_slot-list, .djangoAppt_date_chosen, .djangoAppt_no-availability-text {
+        margin-left: 0 !important;
+        padding-left: 0 !important;
+    }
+
+    .djangoAppt_btn-request-next-slot {
+        margin-left: 0;
+    }
+
+    /* Reduce font size for smaller screens */
+    .djangoAppt_title, .djangoAppt_item-name, .djangoAppt_date_chosen, .djangoAppt_next-available-date {
+        font-size: 13px;
+    }
+
+    .djangoAppt_timezone-details, .error-message {
+        font-size: 13px;
+    }
+
+    .fc-day {
+        font-size: 11px;
+    }
+
+    .fc-toolbar-title {
+        font-size: 14px !important;
+    }
+
+    .fc {
+        font-size: 13px !important;
+    }
+
+    .fc, .fc-button {
+        vertical-align: center !important;
+    }
+
+    .djangoAppt_appointment-slot {
+        padding: 5px;
+        font-size: 13px;
+    }
+
+    .djangoAppt_service-description {
+        font-size: 13px !important;
+    }
+}
+
+.selected-cell {
+    background-color: #aaddff; /* or any color you prefer */
+}
\ No newline at end of file
diff --git a/appointment/static/js/app_admin/staff_index.js b/appointment/static/js/app_admin/staff_index.js
index 182c564..a5d70a5 100644
--- a/appointment/static/js/app_admin/staff_index.js
+++ b/appointment/static/js/app_admin/staff_index.js
@@ -1,23 +1,50 @@
 // Constants
-const MOBILE_WIDTH = 450;
-const SMALL_TABLET_WIDTH = 650;
-const TABLET_WIDTH = 767;
-const MEDIUM_WIDTH = 991;
-
-// Global variables
-let eventIdSelected = null;
-let calendar = null;
-let isEditing = false;
+const Constants = {
+    MOBILE_WIDTH_SMALL: 350,
+    MOBILE_WIDTH: 450,
+    SMALL_TABLET_WIDTH: 650,
+    TABLET_WIDTH: 767,
+    MEDIUM_WIDTH: 991,
+    DEFAULT_START_TIME: '09:00'
+};
+
+// Application State
+const AppState = {
+    eventIdSelected: null, calendar: null, isEditingAppointment: false, isCreating: false,
+};
 
 document.addEventListener("DOMContentLoaded", initializeCalendar);
 window.addEventListener('resize', updateCalendarConfig);
+document.getElementById('eventDetailsModal').addEventListener('keypress', function (event) {
+    if (event.key === 'Enter') {
+        event.preventDefault();
+        document.getElementById('eventSubmitBtn').click();
+    }
+});
+
+// Throttle resize events
+let resizeTimeout;
+window.addEventListener('resize', function () {
+    if (resizeTimeout) {
+        clearTimeout(resizeTimeout);
+    }
+    resizeTimeout = setTimeout(function () {
+        initializeCalendar()
+    }, 500); // Only rerender at most, every 100ms
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    // Wait for a 50ms after the DOM is ready before initializing the calendar
+    setTimeout(initializeCalendar, 50);
+});
+
 
 function initializeCalendar() {
     const formattedAppointments = formatAppointmentsForCalendar(appointments);
     const calendarEl = document.getElementById('calendar');
-    calendar = new FullCalendar.Calendar(calendarEl, getCalendarConfig(formattedAppointments));
-    calendar.setOption('locale', locale);
-    calendar.render();
+    AppState.calendar = new FullCalendar.Calendar(calendarEl, getCalendarConfig(formattedAppointments));
+    AppState.calendar.setOption('locale', locale);
+    AppState.calendar.render();
 }
 
 function formatAppointmentsForCalendar(appointments) {
@@ -32,8 +59,23 @@ function formatAppointmentsForCalendar(appointments) {
 }
 
 function updateCalendarConfig() {
-    calendar.setOption('headerToolbar', getHeaderToolbarConfig());
-    calendar.setOption('height', getCalendarHeight());
+    AppState.calendar.setOption('headerToolbar', getHeaderToolbarConfig());
+    AppState.calendar.setOption('height', getCalendarHeight());
+}
+
+function mobileCheck() {
+    return window.innerWidth < Constants.MOBILE_WIDTH;
+}
+
+function tabletCheck() {
+    return window.innerWidth < Constants.TABLET_WIDTH;
+}
+
+function getEventDisplayedStyle() {
+    if (mobileCheck()) {
+        return "list-item";
+    }
+    return "block";
 }
 
 function getCalendarConfig(events) {
@@ -54,42 +96,110 @@ function getCalendarConfig(events) {
             prevYear: 'fa-angle-double-left',
             nextYear: 'fa-angle-double-right'
         },
+        defaultView: mobileCheck() ? "basicDay" : "dayGridMonth",
         selectable: true,
         events: events,
-        eventDisplay: 'block',
+        eventDisplay: getEventDisplayedStyle(),
         timeZone: timezone,
         eventClick: async function (info) {
-            eventIdSelected = info.event.id;
-            await showEventModal(info.event);
+            AppState.eventIdSelected = info.event.id;
+            await showEventModal(info.event.id, false, false);
         },
         dateClick: function (info) {
-            // ... your code for dateClick ...
+            // Retrieve events for the clicked date
+            const dateEvents = appointments
+                .filter(event => moment(info.date).isSame(event.start_time, 'day'))
+                .sort((a, b) => new Date(a.start_time) - new Date(b.start_time));
+
+            // Display events in a list below the calendar
+            displayEventList(dateEvents, info.date);
         },
+
         selectAllow: function (info) {
-            // ... your code for selectAllow ...
         },
         dayCellClassNames: function (info) {
-            // ... your code for dayCellClassNames ...
+            const day = info.date.getDay();
+            if (day === 0 || day === 6) { // 0 = Sunday, 6 = Saturday
+                return 'highlight-weekend';
+            }
+            return ''; // Return empty string for regular days
         },
         eventDrop: async function (info) {
             await validateAndUpdateAppointmentDate(info.event, info.revert);
         },
+        eventDidMount: function (info) {
+            // If it is a mobile view, we change the event to a dot
+            if (mobileCheck()) {
+                // Find the fc-daygrid-event-dot class within the event element
+                // and change its style to display as a dot
+                const dotEl = info.el.querySelector('.fc-daygrid-event-dot') || document.createElement('span');
+                dotEl.classList.add('fc-daygrid-event-dot');
+                dotEl.style.borderRadius = '50%';
+                dotEl.style.backgroundColor = info.event.backgroundColor;
+
+                // Clear the inner HTML of the event element and append the dot
+                info.el.innerHTML = '';
+                info.el.appendChild(dotEl);
+            }
+        },
+        dayCellDidMount: function (dayCell) {
+            // Check if the day is in the past
+            const currentDate = new Date();
+            currentDate.setHours(0, 0, 0, 0); // Reset time part to compare only dates
+
+            if (dayCell.date >= currentDate && !tabletCheck()) {
+                // Attach right-click event listener only if the day is not in the past
+                dayCell.el.addEventListener('contextmenu', function (event) {
+                    event.preventDefault();
+                    handleCalendarRightClick(event, dayCell.date);
+                });
+            }
+        },
     };
 }
 
+function displayEventList(events, date) {
+    let eventListHtml = '<h4 style="font-size: 14px; font-weight: bold;">' + eventsOnTxt + ' ' + moment(date).format('MMMM Do, YYYY') + '</h4>';
+    eventListHtml += '<hr>';
+
+    events.forEach(function (event) {
+        eventListHtml += `<div class="event-list-item-appt" data-event-id="${event.id}">${event.service_name}</div>`;
+        eventListHtml += `<div><i class="fa fa-clock-o" aria-hidden="true"></i> ${moment(event.start_time).format('h:mm a')} - ${moment(event.end_time).format('h:mm a')}</div>`;
+        eventListHtml += '<hr>';
+    });
+
+    const date_obj = new Date(date.toISOString())
+
+    if (events.length === 0) {
+        eventListHtml += `<div class="djangoAppt_no-events">` + noEventTxt +`</div>`;
+    }
+
+    eventListHtml += `<button class="btn btn-primary djangoAppt_btn-new-event" onclick="createNewAppointment('${date_obj}')">` + newEventTxt + `</button></div>`;
+
+    const eventListContainer = document.getElementById('event-list-container');
+    eventListContainer.innerHTML = eventListHtml;
+
+    // Add click event listeners to each event item
+    const eventItems = eventListContainer.getElementsByClassName('event-list-item-appt');
+    for (let item of eventItems) {
+        item.addEventListener('click', function () {
+            const eventId = this.getAttribute('data-event-id');
+            showEventModal(eventId, false, false).then(r => r);
+        });
+    }
+}
+
+
 function getHeaderToolbarConfig() {
     if (window.matchMedia('(max-width: 767px)').matches) {
         // Mobile configuration
         return {
-            left: 'title',
-            right: 'prev,next,dayGridMonth,timeGridDay'
+            left: 'title', right: 'prev,next,dayGridMonth,timeGridDay'
         };
     } else if (window.matchMedia('(max-width: 991px)').matches) {
         // Tablet configuration
         return {
-            left: 'prev,today,next',
-            center: 'title',
-            right: 'dayGridMonth,timeGridWeek,timeGridDay'
+            left: 'prev,today,next', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay'
         };
     } else {
         // Desktop configuration
@@ -104,57 +214,30 @@ function getHeaderToolbarConfig() {
 }
 
 function getCalendarHeight() {
-    if (window.innerWidth <= MOBILE_WIDTH) return '500px';
-    if (window.innerWidth <= SMALL_TABLET_WIDTH) return '600px';
-    if (window.innerWidth <= TABLET_WIDTH) return '650px';
-    if (window.innerWidth <= MEDIUM_WIDTH) return '767px';
+    if (window.innerWidth <= Constants.MOBILE_WIDTH_SMALL) return '400px';
+    if (window.innerWidth <= Constants.MOBILE_WIDTH) return '450px';
+    if (window.innerWidth <= Constants.SMALL_TABLET_WIDTH) return '600px';
+    if (window.innerWidth <= Constants.TABLET_WIDTH) return '650px';
+    if (window.innerWidth <= Constants.MEDIUM_WIDTH) return '767px';
     return '850px';
 }
 
-function toggleEditMode() {
-    const modal = document.getElementById("eventDetailsModal");
-    const inputs = modal.querySelectorAll("input");
-    const servicesDropdown = document.getElementById("serviceSelect");
+function handleCalendarRightClick(event, date) {
+    const contextMenu = document.getElementById("customContextMenu");
+    contextMenu.style.top = `${event.pageY}px`;
+    contextMenu.style.left = `${event.pageX}px`;
+    contextMenu.style.display = 'block';
 
-    // Retrieve the appointment that matches the eventIdSelected
-    const appointment = appointments.find(app => Number(app.id) === Number(eventIdSelected));
-    if (!appointment) {
-        return;
-    }
+    const newAppointmentOption = document.getElementById("newAppointmentOption");
+    newAppointmentOption.onclick = () => createNewAppointment(date);
 
-    const endTimeLabel = modal.querySelector("label[for='endTime']");  // Assuming you have a label with `for` attribute set to `endTime`
-    const endTimeInput = modal.querySelector("input[name='endTime']");  // Assuming you have an input with `name` attribute set to `endTime`
-    const editButton = document.getElementById("eventEditBtn");
-    const submitButton = document.getElementById("eventSubmitBtn");
-    const closeButton = modal.querySelector(".btn-secondary[data-dismiss='modal']");
-    const cancelButton = document.getElementById("eventCancelBtn");
-
-    if (isEditing) {
-        inputs.forEach(input => input.disabled = true);
-        servicesDropdown.disabled = true;
-        endTimeLabel.style.display = "";  // Show the end time label
-        endTimeInput.style.display = "";  // Show the end time input
-        editButton.style.display = "";
-        closeButton.style.display = "";
-        submitButton.style.display = "none";
-        cancelButton.style.display = "none";
-    } else {
-        inputs.forEach(input => input.disabled = false);
-        servicesDropdown.disabled = false;
-        endTimeLabel.style.display = "none";  // Hide the end time label
-        endTimeInput.style.display = "none";  // Hide the end time input
-        editButton.style.display = "none";
-        closeButton.style.display = "none";
-        submitButton.style.display = "";
-        cancelButton.style.display = "";
-    }
-
-    isEditing = !isEditing;
+    // Hide context menu on any click
+    document.addEventListener('click', () => contextMenu.style.display = 'none', {once: true});
 }
 
 function goToEvent() {
     // Get the event URL
-    const event = appointments.find(app => Number(app.id) === Number(eventIdSelected));
+    const event = appointments.find(app => Number(app.id) === Number(AppState.eventIdSelected));
     if (event && event.url) {
         closeModal()
         window.location.href = event.url;
@@ -177,100 +260,21 @@ function closeModal() {
     cancelButton.style.display = "none";
 
     // Reset the editing flag
-    isEditing = false;
+    AppState.isEditingAppointment = false;
 
     // Close the modal
     $('#eventDetailsModal').modal('hide');
 }
 
-function checkEmail(email) {
-    const emailInput = document.querySelector('input[name="clientEmail"]');
-    const emailError = document.getElementById("emailError");
 
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(email)) {
-        emailInput.style.border = "1px solid red";
-        emailError.textContent = "Invalid email address.";
-        emailError.style.color = "red";
-        emailError.style.display = "inline";  // Make the error message visible
-        return false;
-    } else {
-        emailInput.style.border = "";  // Reset the border to its original style
-        emailError.textContent = "";  // Clear the error message
-        emailError.style.display = "none";  // Hide the error message
-        return true;
-    }
-}
-
-async function submitChanges() {
-    const modal = document.getElementById("eventDetailsModal");
-    const inputs = modal.querySelectorAll("input");
-    const serviceDropdown = modal.querySelector("#serviceSelect");
-    const serviceId = serviceDropdown.value;
-
-    const data = {};
-
-    inputs.forEach(input => {
-        let key = input.previousElementSibling.innerText.trim().replace(/\s+/g, '_').replace(":", "").toLowerCase();
-        data[key] = input.value;
-    });
-
-    // Check if the email is valid
-    if (!checkEmail(data["client_email"])) {
-        return;
-    }
-
-    data["appointment_id"] = eventIdSelected;  // Adding the appointment ID
-    data["service_id"] = serviceId;
-
-    try {
-        const response = await fetch(updateApptMinInfoURL, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest',  // to ensure Django treats this as an AJAX request
-                'X-CSRFToken': getCSRFToken(),
-            },
-            body: JSON.stringify(data)
-        });
-        if (response.ok) {
-            const responseData = await response.json();
-
-            if (responseData.appt) {
-                const index = appointments.findIndex(app => Number(app.id) === Number(eventIdSelected));
-                if (index !== -1) {
-                    appointments[index] = responseData.appt;
-                }
-            }
-            let eventToUpdate = calendar.getEventById(eventIdSelected);
-            if (eventToUpdate) {
-                eventToUpdate.setProp('title', responseData.appt.service_name);
-                eventToUpdate.setStart(moment(responseData.appt.start_time).format('YYYY-MM-DDTHH:mm:ss'));
-                eventToUpdate.setEnd(responseData.appt.end_time);
-                eventToUpdate.setExtendedProp('client_name', responseData.appt.client_name);
-                eventToUpdate.setProp('backgroundColor', responseData.appt.background_color);
-                calendar.render();
-            }
-            calendar.refetchEvents();
-            document.querySelector('input[name="startTime"]').value = responseData.appt.start_time;
-            document.querySelector('input[name="endTime"]').value = responseData.appt.end_time;
-
-
-        } else {
-            console.error('Failed to update appointment. Server responded with:', response.status);
-            // TODO: Handle error, e.g., show an error message to the user
-        }
-    } catch (error) {
-        console.error('Failed to send data:', error);
-        // TODO: Handle error, e.g., show an error message to the user
-    }
+// ################################################################ //
+//                            Generic                               //
+// ################################################################ //
 
-    closeModal();
-}
 
 async function cancelEdit() {
     // Retrieve the appointment that matches the eventIdSelected
-    const appointment = appointments.find(app => Number(app.id) === Number(eventIdSelected));
+    const appointment = appointments.find(app => Number(app.id) === Number(AppState.eventIdSelected));
     if (!appointment) {
         return;
     }
@@ -289,74 +293,54 @@ async function cancelEdit() {
     endTimeInput.style.display = "";
 
     // Re-show the event modal with the original data
-    const event = {id: eventIdSelected};
-    await showEventModal(event);
+    await showEventModal(appointment.id, false, false);
     toggleEditMode(); // Turn off edit mode
 }
 
-async function showEventModal(event) {
-    const appointment = appointments.find(app => Number(app.id) === Number(event.id));
-    if (!appointment) {
-        return;
-    }
-
-    // Extract only the time using Moment.js
-    const startTime = moment(appointment.start_time).format('HH:mm:ss');
-    const endTime = moment(appointment.end_time).format('HH:mm:ss');
-
-    // Fetch and populate services for dropdown
-    const servicesDropdown = await populateServices(appointment.service_id);
-    servicesDropdown.id = "serviceSelect";
-    servicesDropdown.value = appointment.service_id; // Assuming you have a service_id in the appointment
-    servicesDropdown.disabled = true; // Initially disable the dropdown
-
-    // Convert the services dropdown to a string for the template
-    const div = document.createElement('div');
-    div.appendChild(servicesDropdown);
-    const servicesDropdownString = div.innerHTML;
-
-    // Set the content of the modal as input fields
-    const modalBodyContent = `
-        <label>Service Name:</label>
-        ${servicesDropdownString}
-        <label for="startTime">Start Time:</label>
-        <input type="time" name="startTime" value="${startTime}" disabled>
-        <label for="endTime">End Time:</label>
-        <input type="time" name="endTime" value="${endTime}" disabled>
-        <label for="clientName">Client Name:</label>
-        <input type="text" name="clientName" value="${appointment.client_name}" disabled>
-        <label for="clientEmail">Client Email</label>
-        <input type="email" name="clientEmail" value="${appointment.client_email}" disabled>
-        <span id="emailError" style="display:none;"></span>
-        <label for="clientPhone">Phone Number</label>
-        <input type="tel" name="clientPhone" value="${appointment.client_phone}" disabled>
-        <label for="clientAddress">Client Address</label>
-        <input type="text" name="clientAddress" value="${appointment.client_address}" disabled>
-    `;
-
-    document.getElementById('eventModalBody').innerHTML = modalBodyContent;
-
-    // Display the modal
-    $('#eventDetailsModal').modal('show');
-}
-
-function fetchServices() {
-    let ajax_data_get_data = {
-        'appointmentId': eventIdSelected,
-    }
-    const finalUrl = `${fetchServiceListForStaffURL}?${$.param(ajax_data_get_data)}`;
-    return fetch(finalUrl)
-        .then(response => response.json())
+function confirmDeleteAppointment(appointmentId) {
+    const deleteURL = deleteAppointmentURLTemplate
+    const data = {appointment_id: appointmentId};
+
+    fetch(deleteURL, {
+        method: 'POST', headers: {
+            'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': getCSRFToken(),
+        }, body: JSON.stringify(data)
+    })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
         .then(data => {
-            return data.services_offered;  // This should be a list of dictionaries
+            $('#eventDetailsModal').modal('hide');
+            let event = AppState.calendar.getEventById(appointmentId);
+            if (event) {
+                event.remove();
+            }
+            showErrorModal(data.message, successTxt);
+            closeConfirmModal();  // Close the confirmation modal
         })
         .catch(error => {
-            console.error("There was an error fetching the services.", error);
+            console.error('Error:', error);
+            showErrorModal(updateApptErrorTitleTxt);
         });
 }
 
-async function populateServices(selectedServiceId) {
-    const services = await fetchServices();
+function deleteAppointment() {
+    showModal(confirmDeletionTxt, confirmDeletionTxt, deleteBtnTxt, null, () => confirmDeleteAppointment(AppState.eventIdSelected));
+}
+
+function fetchServices(isEditMode = false) {
+    let url = isEditMode && AppState.eventIdSelected ? `${fetchServiceListForStaffURL}?appointmentId=${AppState.eventIdSelected}` : fetchServiceListForStaffURL;
+    return fetch(url)
+        .then(response => response.json())
+        .then(data => data.services_offered)
+        .catch(error => console.error("Error fetching services: ", error));
+}
+
+async function populateServices(selectedServiceId, isEditMode = false) {
+    const services = await fetchServices(isEditMode);
     const selectElement = document.createElement('select');
     services.forEach(service => {
         const option = document.createElement('option');
@@ -380,26 +364,19 @@ function getCSRFToken() {
     }
 }
 
-
 async function validateAndUpdateAppointmentDate(event, revertFunction) {
     const updatedStartTime = event.start.toISOString();
     const updatedEndTime = event.end ? event.end.toISOString() : null;
 
     const data = {
-        appointment_id: event.id,
-        start_time: updatedStartTime,
-        date: event.start.toISOString().split('T')[0]
+        appointment_id: event.id, start_time: updatedStartTime, date: event.start.toISOString().split('T')[0]
     };
 
     try {
         const validationResponse = await fetch(validateApptDateURL, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest',
-                'X-CSRFToken': getCSRFToken(),
-            },
-            body: JSON.stringify(data)
+            method: 'POST', headers: {
+                'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': getCSRFToken(),
+            }, body: JSON.stringify(data)
         });
 
         if (validationResponse.ok) {
@@ -421,28 +398,23 @@ async function updateAppointmentDate(event, revertFunction) {
     const updatedDate = event.start.toISOString().split('T')[0];
 
     const data = {
-        appointment_id: event.id,
-        start_time: updatedStartTime,
-        date: updatedDate,
+        appointment_id: event.id, start_time: updatedStartTime, date: updatedDate,
     };
 
     try {
         const response = await fetch(updateApptDateURL, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest',
-                'X-CSRFToken': getCSRFToken(),
-            },
-            body: JSON.stringify(data)
+            method: 'POST', headers: {
+                'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': getCSRFToken(),
+            }, body: JSON.stringify(data)
         });
 
+        const responseData = await response.json();
         if (response.ok) {
-            const responseData = await response.json();
-            showErrorModal(responseData.message, 'Success')
-            console.log('Appointment date updated:', responseData.message);
+            console.log("Updated message: " + responseData.message)
+            showErrorModal(responseData.message, successTxt)
         } else {
             console.error('Failed to update appointment date. Server responded with:', response.statusText);
+            showErrorModal(responseData.message, updateApptErrorTitleTxt);
             revertFunction();
         }
     } catch (error) {
@@ -450,3 +422,295 @@ async function updateAppointmentDate(event, revertFunction) {
         revertFunction();
     }
 }
+
+// ################################################################ //
+//                      Create new Appt                             //
+// ################################################################ //
+function createNewAppointment(dateInput) {
+    let date;
+    if (typeof dateInput === 'string' || dateInput instanceof String) {
+        date = new Date(dateInput);
+    } else {
+        date = dateInput;
+    }
+
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // getMonth() returns 0-11
+    const year = date.getFullYear();
+    const formattedDate = `${year}-${month}-${day}`;
+    const defaultStartTime = `${formattedDate}T09:00:00`;
+
+    showCreateAppointmentModal(defaultStartTime, formattedDate).then(() => {
+    });
+}
+
+
+async function showCreateAppointmentModal(defaultStartTime, formattedDate) {
+    const servicesDropdown = await populateServices(null, false);
+    servicesDropdown.id = "serviceSelect";
+    servicesDropdown.disabled = false; // Enable dropdown
+
+    document.getElementById('eventModalBody').innerHTML = prepareCreateAppointmentModalContent(servicesDropdown, defaultStartTime, formattedDate);
+
+    adjustCreateAppointmentModalButtons();
+    AppState.isCreating = true;
+    $('#eventDetailsModal').modal('show');
+}
+
+function adjustCreateAppointmentModalButtons() {
+    document.getElementById("eventSubmitBtn").style.display = "";
+    document.getElementById("eventCancelBtn").style.display = "none";
+    document.getElementById("eventEditBtn").style.display = "none";
+    document.getElementById("eventDeleteBtn").style.display = "none";
+    document.getElementById("eventGoBtn").style.display = "none";
+}
+
+
+// ################################################################ //
+//                      Show Event Modal                            //
+// ################################################################ //
+
+// Extract Appointment Data
+async function getAppointmentData(eventId, isCreatingMode, defaultStartTime) {
+    if (eventId && !isCreatingMode) {
+        const appointment = appointments.find(app => Number(app.id) === Number(eventId));
+        if (!appointment) {
+            showErrorModal(apptNotFoundTxt, errorTxt);
+            return null;
+        }
+        return appointment;
+    }
+    return {
+        id: null,
+        service_name: '',
+        start_time: defaultStartTime,
+        end_time: '',
+        client_name: '',
+        client_email: '',
+        client_phone: '',
+        client_address: '',
+        additional_info: '',
+        want_reminder: false,
+        background_color: '',
+        timezone: '',
+    };
+}
+
+// Populate Services Dropdown
+async function getServiceDropdown(serviceId, isEditMode) {
+    const servicesDropdown = await populateServices(serviceId, !isEditMode);
+    servicesDropdown.id = "serviceSelect";
+    servicesDropdown.disabled = !isEditMode;
+    return servicesDropdown;
+}
+
+// Show Event Modal
+async function showEventModal(eventId = null, isEditMode, isCreatingMode = false, defaultStartTime = '') {
+    const appointment = await getAppointmentData(eventId, isCreatingMode, defaultStartTime);
+    if (!appointment) return;
+
+    const servicesDropdown = await getServiceDropdown(appointment.service_id, isEditMode);
+    document.getElementById('eventModalBody').innerHTML = generateModalContent(appointment, servicesDropdown, isEditMode);
+    adjustModalButtonsVisibility(isEditMode, isCreatingMode);
+    $('#eventDetailsModal').modal('show');
+}
+
+// Adjust Modal Buttons Visibility
+function adjustModalButtonsVisibility(isEditMode, isCreatingMode) {
+    const editButton = document.getElementById("eventEditBtn");
+    const submitButton = document.getElementById("eventSubmitBtn");
+    const deleteButton = document.getElementById("eventDeleteBtn");
+    const goButton = document.getElementById("eventGoBtn");
+
+    editButton.style.display = !isEditMode && !isCreatingMode ? "" : "none";
+    submitButton.style.display = isCreatingMode || isEditMode ? "" : "none";
+    deleteButton.style.display = !isEditMode && !isCreatingMode ? "" : "none";
+    goButton.style.display = isCreatingMode ? "none" : "";
+}
+
+// ################################################################ //
+//                         Edit Logic                               //
+// ################################################################ //
+
+function toggleEditMode() {
+    const modal = document.getElementById("eventDetailsModal");
+    const appointment = appointments.find(app => Number(app.id) === Number(AppState.eventIdSelected));
+    AppState.isCreating = false; // Turn off creating mode
+
+    // Proceed only if an appointment is found
+    if (appointment) {
+        AppState.isEditingAppointment = !AppState.isEditingAppointment;  // Toggle the editing state
+        updateModalUIForEditMode(modal, AppState.isEditingAppointment);
+    }
+}
+
+function updateModalUIForEditMode(modal, isEditingAppointment) {
+    const inputs = modal.querySelectorAll("input");
+    const servicesDropdown = document.getElementById("serviceSelect");
+    const editButton = document.getElementById("eventEditBtn");
+    const submitButton = document.getElementById("eventSubmitBtn");
+    const closeButton = modal.querySelector(".btn-secondary[data-dismiss='modal']");
+    const cancelButton = document.getElementById("eventCancelBtn");
+    const deleteButton = document.getElementById("eventDeleteBtn");
+    const goButton = document.getElementById("eventGoBtn");
+    const endTimeLabel = modal.querySelector("label[for='endTime']");
+    const endTimeInput = modal.querySelector("input[name='endTime']");
+
+    // Toggle input and dropdown enable/disable state
+    inputs.forEach(input => input.disabled = !isEditingAppointment);
+    servicesDropdown.disabled = !isEditingAppointment;
+
+    // Toggle visibility of UI elements
+    toggleElementVisibility(editButton, !isEditingAppointment);
+    toggleElementVisibility(submitButton, isEditingAppointment);
+    toggleElementVisibility(cancelButton, isEditingAppointment);
+    toggleElementVisibility(deleteButton, !isEditingAppointment);
+    toggleElementVisibility(closeButton, !isEditingAppointment);
+    toggleElementVisibility(endTimeLabel, !isEditingAppointment);  // Show end time in view mode
+    toggleElementVisibility(endTimeInput, !isEditingAppointment);  // Show end time in view mode
+    toggleElementVisibility(goButton, !isEditingAppointment);
+}
+
+function toggleElementVisibility(element, isVisible) {
+    if (element) {
+        element.style.display = isVisible ? "" : "none";
+    }
+}
+
+
+// ################################################################ //
+//                         Submit Logic                             //
+// ################################################################ //
+
+async function submitChanges() {
+    const modal = document.getElementById("eventDetailsModal");
+    const formData = collectFormDataFromModal(modal);
+
+    if (!validateFormData(formData)) return;
+
+    const response = await sendAppointmentData(formData);
+    if (response.ok) {
+        const responseData = await response.json();
+        if (AppState.isCreating) {
+            addNewAppointmentToCalendar(responseData.appt[0]);
+        } else {
+            updateExistingAppointmentInCalendar(responseData.appt);
+        }
+
+        AppState.calendar.render();
+    } else {
+        const responseData = await response.json();
+        showErrorModal(responseData.message);
+    }
+    closeModal();
+
+}
+
+// Collect form data from modal
+function collectFormDataFromModal(modal) {
+    const inputs = modal.querySelectorAll("input");
+    const serviceId = modal.querySelector("#serviceSelect").value;
+    const data = {isCreating: AppState.isCreating, service_id: serviceId, appointment_id: AppState.eventIdSelected};
+
+    inputs.forEach(input => {
+        if (input.name !== "date") {
+            let key = input.previousElementSibling.innerText.trim().replace(/\s+/g, '_').replace(":", "").toLowerCase();
+            data[key] = input.value;
+        }
+    });
+
+    if (AppState.isCreating) {
+        data["date"] = modal.querySelector('input[name="date"]').value;
+    }
+
+    // Special handling for checkbox
+    const wantReminderCheckbox = modal.querySelector('input[name="want_reminder"]');
+    if (!wantReminderCheckbox.checked) {
+        data['want_reminder'] = 'false';
+    } else {
+        data['want_reminder'] = 'true';
+    }
+
+    return data;
+}
+
+// Validate form data
+function validateFormData(data) {
+    return validateEmail(data["client_email"]);
+}
+
+// Validate email
+function validateEmail(email) {
+    const emailInput = document.querySelector('input[name="clientEmail"]');
+    const emailError = document.getElementById("emailError");
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+        emailInput.style.border = "1px solid red";
+        emailError.textContent = "Invalid email address.";
+        emailError.style.color = "red";
+        emailError.style.display = "inline";
+        return false;
+    } else {
+        emailInput.style.border = "";
+        emailError.textContent = "";
+        emailError.style.display = "none";
+        return true;
+    }
+}
+
+// Send appointment data to server
+async function sendAppointmentData(data) {
+    const headers = {
+        'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': getCSRFToken(),
+    };
+
+    return fetch(updateApptMinInfoURL, {
+        method: 'POST', headers: headers, body: JSON.stringify(data)
+    });
+}
+
+// Handle response from server
+async function handleAppointmentResponse(response) {
+    if (!response.ok) {
+        throw new Error(response.message);
+    }
+
+    const responseData = await response.json();
+    if (AppState.isCreating) {
+        addNewAppointmentToCalendar(responseData.appt[0]);
+    } else {
+        updateExistingAppointmentInCalendar(responseData.appt);
+    }
+
+    AppState.calendar.render();
+}
+
+// Add new appointment to calendar
+function addNewAppointmentToCalendar(newAppointment) {
+    const newEvent = formatAppointmentsForCalendar([newAppointment])[0];
+    appointments.push(newAppointment);
+    AppState.calendar.addEvent(newEvent);
+}
+
+// Update existing appointment in calendar
+function updateExistingAppointmentInCalendar(appointment) {
+    let eventToUpdate = AppState.calendar.getEventById(AppState.eventIdSelected);
+    if (eventToUpdate) {
+        updateEventProperties(eventToUpdate, appointment);
+    }
+    // update appointment in appointments array
+    const index = appointments.findIndex(app => Number(app.id) === Number(AppState.eventIdSelected));
+    if (index !== -1) {
+        appointments[index] = appointment;
+    }
+}
+
+// Update event properties
+function updateEventProperties(event, appointment) {
+    event.setProp('title', appointment.service_name);
+    event.setStart(moment(appointment.start_time).format('YYYY-MM-DDTHH:mm:ss'));
+    event.setEnd(appointment.end_time);
+    event.setExtendedProp('client_name', appointment.client_name);
+    event.setProp('backgroundColor', appointment.background_color);
+}
diff --git a/appointment/static/js/appointments.js b/appointment/static/js/appointments.js
index 26a7332..145479e 100644
--- a/appointment/static/js/appointments.js
+++ b/appointment/static/js/appointments.js
@@ -225,7 +225,7 @@ function getAvailableSlots(selectedDate, staffId = null) {
                     // Show an error message
                     errorMessageContainer.append('<p class="djangoAppt_no-availability-text">Date is in the past.</p>');
                     if (slotContainer.find('.djangoAppt_btn-request-next-slot').length === 0) {
-                        slotContainer.append(`<button class="btn btn-danger djangoAppt_btn-request-next-slot" data-service-id="${serviceId}">Request next available slot</button>`);
+                        slotContainer.append(`<button class="btn btn-danger djangoAppt_btn-request-next-slot" data-service-id="${serviceId}">` + requestNonAvailableSlotBtnTxt + `</button>`);
                     }
                     // Disable the 'submit' button
                     $('.btn-submit-appointment').attr('disabled', 'disabled');
@@ -237,7 +237,7 @@ function getAvailableSlots(selectedDate, staffId = null) {
                     // Check if the returned message is 'No availability'
                     if (data.message.toLowerCase() === 'no availability') {
                         if (slotContainer.find('.djangoAppt_btn-request-next-slot').length === 0) {
-                            slotContainer.append(`<button class="btn btn-danger djangoAppt_btn-request-next-slot" data-service-id="${serviceId}">Request next available slot</button>`);
+                            slotContainer.append(`<button class="btn btn-danger djangoAppt_btn-request-next-slot" data-service-id="${serviceId}">` + requestNonAvailableSlotBtnTxt + `</button>`);
                         }
                     } else {
                         $('.djangoAppt_btn-request-next-slot').remove();
diff --git a/appointment/static/js/modal/confirm_modal.js b/appointment/static/js/modal/confirm_modal.js
deleted file mode 100644
index c178161..0000000
--- a/appointment/static/js/modal/confirm_modal.js
+++ /dev/null
@@ -1,15 +0,0 @@
-function showModal(title, body, actionText, actionUrl) {
-    // Set the content of the modal
-    document.getElementById('modalLabel').innerText = title;
-    document.getElementById('modalBody').innerText = body;
-    const actionBtn = document.getElementById('modalActionBtn');
-    actionBtn.innerText = actionText;
-    actionBtn.setAttribute('href', actionUrl);
-
-    // Display the modal
-    $('#confirmModal').modal('show');
-}
-
-function closeModal() {
-    $('#confirmModal').modal('hide');
-}
\ No newline at end of file
diff --git a/appointment/static/js/modal/error_modal.js b/appointment/static/js/modal/error_modal.js
index faea1b5..a64887f 100644
--- a/appointment/static/js/modal/error_modal.js
+++ b/appointment/static/js/modal/error_modal.js
@@ -1,6 +1,6 @@
 let errorModalInstance = null;
 
-function showErrorModal(message, title = 'Error') {
+function showErrorModal(message, title = errorTxt) {
     // Insert the error message into the modal
     document.getElementById('errorModalLabel').textContent = title;
     document.getElementById('errorModalMessage').textContent = message;
diff --git a/appointment/static/js/modal/show_modal.js b/appointment/static/js/modal/show_modal.js
new file mode 100644
index 0000000..7dac8b7
--- /dev/null
+++ b/appointment/static/js/modal/show_modal.js
@@ -0,0 +1,25 @@
+function showModal(title, body, actionText, actionUrl, actionCallback) {
+    // Set the content of the modal
+    document.getElementById('modalLabel').innerText = title;
+    document.getElementById('modalBody').innerText = body;
+    const actionBtn = document.getElementById('modalActionBtn');
+    actionBtn.innerText = actionText;
+
+    // Determine the type of action: callback function or URL
+    if (actionCallback) {
+        actionBtn.onclick = () => {
+            actionCallback();
+            closeModal();  // Close the modal after action
+        };
+    } else if (actionUrl) {
+        actionBtn.href = actionUrl;
+    }
+
+    // Display the modal
+    $('#confirmModal').modal('show');
+}
+
+
+function closeConfirmModal() {
+    $('#confirmModal').modal('hide');
+}
\ No newline at end of file
diff --git a/appointment/templates/administration/display_appointment.html b/appointment/templates/administration/display_appointment.html
index efd8b1c..3e3c10c 100644
--- a/appointment/templates/administration/display_appointment.html
+++ b/appointment/templates/administration/display_appointment.html
@@ -48,7 +48,7 @@ <h2>{{ page_title }}</h2>
                         </div>
                         <div class="appointment-detail hover-element">
                             <i class="fas fa-comment"></i>
-                            <strong>{% trans 'Want reminder' %}:</strong> {{ appointment.want_reminder }}
+                            <strong>{% trans 'Wants reminder' %}:</strong> {{ appointment.want_reminder }}
                         </div>
                         <div class="appointment-detail hover-element">
                             <i class="fas fa-map-marker-alt"></i>
@@ -56,7 +56,7 @@ <h2>{{ page_title }}</h2>
                         </div>
                         <div class="appointment-detail hover-element">
                             <i class="fas fa-info-circle"></i>
-                            <strong>{% trans 'Additional client info' %}:</strong> {{ appointment.additional_info }}
+                            <strong>{% trans 'Additional Information' %}:</strong> {{ appointment.additional_info }}
                         </div>
                         <div class="appointment-detail {% if appointment.is_paid %} is-paid-true {% else %} is-paid-false {% endif %}">
                             <i class="fas fa-money-bill-wave"></i>
diff --git a/appointment/templates/administration/service_list.html b/appointment/templates/administration/service_list.html
index 20fe2c5..49c6d25 100644
--- a/appointment/templates/administration/service_list.html
+++ b/appointment/templates/administration/service_list.html
@@ -43,7 +43,7 @@ <h2 class="section-header-itm">{% trans 'Service List' %}</h2>
                                                 <i class="fas fa-pen"></i>
                                             </a>
                                             <a href="javascript:void(0)"
-                                               onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_service' service_id=service.id %}')"
+                                               onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_service' service_id=service.id %}', null)"
                                                class="modify-btn button-color-red">
                                                 <i class="fas fa-trash"></i>
                                             </a>
@@ -51,7 +51,7 @@ <h2 class="section-header-itm">{% trans 'Service List' %}</h2>
                                     </div>
                                 </td>
                             </tr>
-                            {% empty %}
+                        {% empty %}
                             <tr>
                                 <td colspan="3">{% trans 'No service found' %}.</td>
                             </tr>
diff --git a/appointment/templates/administration/staff_index.html b/appointment/templates/administration/staff_index.html
index 0bc27aa..d382f6b 100644
--- a/appointment/templates/administration/staff_index.html
+++ b/appointment/templates/administration/staff_index.html
@@ -5,7 +5,8 @@
     <meta name="csrf-token" content="{{ csrf_token }}">
 {% endblock %}
 {% block customCSS %}
-    <link rel="stylesheet" type="text/css" href="{% static 'css/appointments.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'css/appt-common.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'css/app_admin/admin.css' %}"/>
     <style>
         @media (max-width: 991px) {
             body {
@@ -38,6 +39,7 @@
             display: flex;
             transition: all 0.3s; /* smooth transition for resizing */
             width: 100%;
+            flex-direction: column;
         }
 
         #calendar {
@@ -57,9 +59,7 @@
         .modal-content {
             background-color: #fff;
             margin: 10% auto; /* Centering the modal vertically */
-            padding: 20px;
-            width: 80%;
-            max-width: 600px; /* Maximum width for the modal */
+            width: 100%;
             position: relative; /* For positioning the close button */
             box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* A little shadow for depth */
         }
@@ -127,6 +127,131 @@
         #serviceSelect:disabled {
             background-color: #e9ecef;
         }
+
+        #customContextMenu ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        #customContextMenu ul li a {
+            padding: 5px 10px;
+            display: block;
+            text-decoration: none;
+            color: black;
+        }
+
+        #customContextMenu ul li a:hover {
+            background-color: #f0f0f0;
+        }
+
+        #customContextMenu {
+            border: 1px solid #ccc;
+            background-color: #fff;
+            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+            padding: 5px 0;
+            position: absolute;
+            z-index: 1000;
+            display: none;
+        }
+
+
+        #eventDetailsModal input[type="checkbox"] {
+            width: auto;
+            margin: 0 5px 0 0;
+        }
+
+        /* General styles */
+        .flex-container-appt {
+            display: flex;
+            align-items: center;
+            margin-top: 5px;
+        }
+
+        .flex-container-appt label {
+            flex: 0 0 auto; /* Do not grow, do not shrink, and base width on content */
+            margin-right: 5px;
+            white-space: nowrap; /* Prevent label from wrapping */
+        }
+
+        .flex-container-appt input,
+        .flex-container-appt select {
+            flex: 1 1 auto; /* Grow and shrink based on available space */
+        }
+
+        /* Larger Modal on Desktop */
+        @media (min-width: 850px) {
+            .modal-content {
+                /* centering the modal horizontally */
+                margin: 10% auto;
+                left: 0;
+                right: 0;
+            }
+        }
+
+        /* Stack label and input on mobile */
+        @media (max-width: 767px) {
+            .flex-container-appt {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .flex-container-appt label {
+                margin-right: 0;
+                margin-bottom: 5px;
+            }
+        }
+
+        .highlight-weekend {
+            background-color: rgba(248, 1, 1, 0.035); /* Light gray background for weekends */
+        }
+
+        .event-dot {
+            height: 5px;
+            width: 5px;
+            border-radius: 50%;
+            display: inline-block;
+            margin: 2px;
+        }
+
+        /* Hide event list container on larger screens */
+        @media (min-width: 768px) {
+            #event-list-container {
+                display: none; /* Hide the event list container */
+            }
+        }
+
+        /* Show event list container on smaller screens */
+        @media (max-width: 767px) {
+            #event-list-container {
+                /* Styles to display and position the event list container */
+                display: block; /* Show the event list container */
+                margin-top: 20px; /* Space from the calendar */
+            }
+
+            .event-list-item {
+                /* Styles for individual event list items */
+                padding: 10px;
+                border-bottom: 1px solid #ccc;
+            }
+        }
+
+        @media (max-width: 450px) {
+            .fc-daygrid-event-harness {
+                width: 5px;
+            }
+
+            .fc td, .fc th {
+
+            }
+        }
+
+        .event-list-item-appt {
+            /* pointer hand cursor */
+            cursor: pointer;
+        }
+
+
     </style>
 {% endblock %}
 {% block title %}
@@ -140,6 +265,7 @@
         <div class="container">
             <div class="calendar-wrapper">
                 <div id="calendar" class="calendarbox"></div>
+                <div id="event-list-container" class="event-list-container"></div>
             </div>
 
             {% include 'modal/event_details_modal.html' %}
@@ -155,6 +281,13 @@
             </div>
         </div>
     </section>
+    <div id="customContextMenu" style="display: none; position: absolute; z-index: 1000;">
+        <ul>
+            <li id="newAppointmentOption"><a href="#">New Appointment</a></li>
+        </ul>
+    </div>
+
+    {% include 'modal/confirm_modal.html' %}
 {% endblock %}
 
 
@@ -169,6 +302,7 @@
         const locale = "{{ locale }}";
         const availableSlotsAjaxURL = "{% url 'appointment:available_slots_ajax' %}";
         const requestNextAvailableSlotURLTemplate = "{% url 'appointment:request_next_available_slot' service_id=0 %}";
+        const deleteAppointmentURLTemplate = "{% url 'appointment:delete_appointment_ajax' %}";
         const getNonWorkingDaysURL = "{% url 'appointment:get_non_working_days_ajax' %}";
         const serviceId = "{{ service.id }}";
         const serviceDuration = parseInt("{{ service.duration.total_seconds }}") / 60;
@@ -178,7 +312,78 @@
         const updateApptDateURL = "{% url 'appointment:update_appt_date_time' %}";
         const validateApptDateURL = "{% url 'appointment:validate_appointment_date' %}";
     </script>
+    <script>
+        {# Text for translation #}
+        const confirmDeletionTitleTxt = "{% trans 'Confirm Deletion' %}";
+        const confirmDeletionTxt = "{% trans 'Are you sure you want to delete this appointment?' %}";
+        const deleteBtnTxt = "{% trans 'Delete' %}";
+        const eventsOnTxt = "{% trans 'Events on' %}";
+        const noEventTxt = "{% trans 'No events for this day.' %}";
+        const newEventTxt = "{% trans 'New Event' %}";
+        const successTxt = "{% trans 'Success' %}";
+        const errorTxt = "{% trans 'Error' %}"
+        const updateApptErrorTitleTxt = "{% trans 'Error: Unable to delete appointment.' %}"
+        const apptNotFoundTxt = "{% trans 'Appointment not found.' %}"
+    </script>
+
     <script src="{% static 'js/modal/error_modal.js' %}"></script>
     <script src="{% static 'js/app_admin/staff_index.js' %}"></script>
+    <script src="{% static 'js/modal/show_modal.js' %}"></script>
     <script src="{% static 'js/js-utils.js' %}"></script>
+
+    <script>
+        function createCommonInputFields(appointment, servicesDropdown, isEditMode, defaultStartTime) {
+            const startTimeValue = isEditMode ? moment(appointment.start_time).format('HH:mm:ss') : defaultStartTime;
+            const disabledAttribute = isEditMode ? '' : 'disabled';
+
+            return `
+                <div class="flex-container-appt">
+                <label>{% trans 'Service Name' %}:</label>
+                ${servicesDropdown.outerHTML}
+                </div>
+                <label for="clientName">{% trans 'Client Name' %}:</label>
+                <input type="text" name="clientName" value="${appointment.client_name || ''}" ${disabledAttribute} id="clientName" placeholder="John Doe">
+                <label for="clientEmail">{% trans 'Client Email' %}:</label>
+                <input type="email" name="clientEmail" value="${appointment.client_email || ''}" ${disabledAttribute} id="clientEmail" placeholder="john.doe@example.com">
+                <span id="emailError" style="display:none;"></span>
+                <label for="clientPhone">{% trans 'Phone Number' %}:</label>
+                <input type="tel" name="clientPhone" value="${appointment.client_phone || ''}" ${disabledAttribute} id="clientPhone" placeholder="+12392350799">
+                <label for="clientAddress">{% trans 'Client address' %}:</label>
+                <input type="text" name="clientAddress" value="${appointment.client_address || ''}" ${disabledAttribute} id="clientAddress" placeholder="Naples, Florida">
+                <div class="flex-container-appt">
+                <label for="want_reminder">{% trans 'Wants reminder' %}:</label>
+                <input type="checkbox" name="want_reminder" id="want_reminder" value="true" ${appointment.want_reminder ? 'checked' : ''}  ${disabledAttribute}>
+                </div>
+                <label for="additional_info">{% trans 'Additional Information' %}:</label>
+                <input type="text" name="additional_info" value="${appointment.additional_info || ''}" ${disabledAttribute} placeholder="{% trans 'Client wants this and that' %}" id="additional_info">
+                <div class="flex-container-appt">
+                <label for="startTime">{% trans 'Start time' %}:</label>
+                <input type="time" name="startTime" value="${startTimeValue}" ${disabledAttribute}>
+                </div>
+            `;
+        }
+
+        function generateModalContent(appointment, servicesDropdown, isEditMode) {
+            const startTimeValue = moment(appointment.start_time).format('HH:mm:ss');
+            const commonInputs = createCommonInputFields(appointment, servicesDropdown, isEditMode, startTimeValue);
+            return `
+                ${commonInputs}
+                <div class="flex-container-appt">
+                <label for="endTime">{% trans 'End time' %}:</label>
+                <input type="time" name="endTime" value="${moment(appointment.end_time).format('HH:mm:ss')}" ${!isEditMode ? 'disabled' : ''}>
+                </div>
+            `;
+        }
+
+        function prepareCreateAppointmentModalContent(servicesDropdown, defaultStartTime, formattedDate) {
+            const appointment = {client_name: '', client_email: '', client_phone: '', client_address: ''};
+            const commonInputs = createCommonInputFields(appointment, servicesDropdown, true, defaultStartTime);
+
+            return `
+                ${commonInputs}
+                <label for="date" style="display: none"></label>
+                <input type="hidden" name="date" value="${formattedDate}">
+            `;
+        }
+    </script>
 {% endblock %}
diff --git a/appointment/templates/administration/user_profile.html b/appointment/templates/administration/user_profile.html
index 22cd141..5885a11 100644
--- a/appointment/templates/administration/user_profile.html
+++ b/appointment/templates/administration/user_profile.html
@@ -122,13 +122,13 @@ <h2>{% trans 'Days Off' %}</h2>
                                         {% translate "Are you sure you want to delete this working hours?" as d_modal_message %}
                                         {% if superuser %}
                                             <a href="javascript:void(0)"
-                                               onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_day_off_id' day_off_id=day_off.id staff_user_id=user.id %}')"
+                                               onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_day_off_id' day_off_id=day_off.id staff_user_id=user.id %}', null)"
                                                class="modify-btn button-color-red">
                                                 <i class="fas fa-trash"></i>
                                             </a>
                                         {% else %}
                                             <a href="javascript:void(0)"
-                                               onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_day_off' day_off_id=day_off.id %}')"
+                                               onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_day_off' day_off_id=day_off.id %}', null)"
                                                class="modify-btn button-color-red">
                                                 <i class="fas fa-trash"></i>
                                             </a>
@@ -188,13 +188,13 @@ <h2>{% trans 'Working Hours' %}</h2>
                                         {% translate "Are you sure you want to delete this working hours?" as w_modal_message %}
                                         {% if superuser %}
                                             <a href="javascript:void(0)"
-                                               onclick="showModal('{{ modal_title }}', '{{ w_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_working_hours_id' working_hours_id=working_hour.id staff_user_id=user.id %}')"
+                                               onclick="showModal('{{ modal_title }}', '{{ w_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_working_hours_id' working_hours_id=working_hour.id staff_user_id=user.id %}', null)"
                                                class="modify-btn button-color-red">
                                                 <i class="fas fa-trash"></i>
                                             </a>
                                         {% else %}
                                             <a href="javascript:void(0)"
-                                               onclick="showModal('{{ modal_title }}', '{{ w_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_working_hours' working_hours_id=working_hour.id %}')"
+                                               onclick="showModal('{{ modal_title }}', '{{ w_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_working_hours' working_hours_id=working_hour.id %}', null)"
                                                class="modify-btn button-color-red">
                                                 <i class="fas fa-trash"></i>
                                             </a>
@@ -263,7 +263,7 @@ <h2>{% trans 'Service Offered' %}</h2>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
     <!-- Our custom modal JS -->
-    <script src="{% static 'js/modal/confirm_modal.js' %}"></script>
+    <script src="{% static 'js/modal/show_modal.js' %}"></script>
 
     <script src="{% static 'js/js-utils.js' %}"></script>
 {% endblock %}
diff --git a/appointment/templates/appointment/appointments.html b/appointment/templates/appointment/appointments.html
index 5970d6d..c99236a 100644
--- a/appointment/templates/appointment/appointments.html
+++ b/appointment/templates/appointment/appointments.html
@@ -2,6 +2,7 @@
 {% load i18n %}
 {% load static %}
 {% block customCSS %}
+    <link rel="stylesheet" type="text/css" href="{% static 'css/appt-common.css' %}"/>
     <link rel="stylesheet" type="text/css" href="{% static 'css/appointments.css' %}"/>
 {% endblock %}
 {% block title %}
@@ -54,7 +55,8 @@ <h1 class="page-title">{{ service.name }}</h1>
                                 <label class="djangoAppt_item-name" for="staff_id">{{ label }}</label>
                                 <select name="staff_member" id="staff_id">
                                     {% if not staff_member %}
-                                        <option value="none" selected>{% trans 'Please select a staff member' %}</option>
+                                        <option value="none"
+                                                selected>{% trans 'Please select a staff member' %}</option>
                                     {% endif %}
                                     {% for sf in all_staff_members %}
                                         <option value="{{ sf.id }}"
@@ -103,6 +105,9 @@ <h1 class="page-title">{{ service.name }}</h1>
         const serviceId = "{{ service.id }}";
         const serviceDuration = parseInt("{{ service.duration.total_seconds }}") / 60;
     </script>
+    <script>
+        const requestNonAvailableSlotBtnTxt = "{% trans 'Request next available slot' %}";
+    </script>
     <script src="{% static 'js/appointments.js' %}"></script>
     <script src="{% static 'js/js-utils.js' %}"></script>
 {% endblock %}
diff --git a/appointment/templates/modal/confirm_modal.html b/appointment/templates/modal/confirm_modal.html
index ec48b20..6f8439e 100644
--- a/appointment/templates/modal/confirm_modal.html
+++ b/appointment/templates/modal/confirm_modal.html
@@ -5,7 +5,7 @@
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="modalLabel">Modal title</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal()">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeConfirmModal()">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
@@ -13,7 +13,7 @@ <h5 class="modal-title" id="modalLabel">Modal title</h5>
         Modal body text goes here.
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeModal()">{% trans 'Close' %}</button>
+        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeConfirmModal()">{% trans 'Close' %}</button>
         <a href="#" class="btn btn-primary" id="modalActionBtn">{% trans 'Action' %}</a>
       </div>
     </div>
diff --git a/appointment/templates/modal/event_details_modal.html b/appointment/templates/modal/event_details_modal.html
index f7db19f..5f14112 100644
--- a/appointment/templates/modal/event_details_modal.html
+++ b/appointment/templates/modal/event_details_modal.html
@@ -26,6 +26,11 @@ <h5 class="modal-title" id="eventModalLabel">{% trans 'Event Details' %}</h5>
                 <button type="button" class="btn btn-primary" id="eventSubmitBtn" style="display: none;"
                         onclick="submitChanges()">{% trans 'Submit' %}
                 </button>
+                <button type="button" class="btn btn-danger" id="eventDeleteBtn"
+                        onclick="deleteAppointment()" style="display: none;">
+                    {% trans 'Delete' %}
+                </button>
+
             </div>
 
         </div>
diff --git a/appointment/utils/date_time.py b/appointment/utils/date_time.py
index 2743c5a..f061067 100644
--- a/appointment/utils/date_time.py
+++ b/appointment/utils/date_time.py
@@ -95,7 +95,7 @@ def convert_str_to_time(time_str: str) -> datetime.time:
     :param time_str: A string representation of time.
     :return: A Python `time` object.
     """
-    formats = ["%I:%M %p", "%H:%M:%S"]
+    formats = ["%I:%M %p", "%H:%M:%S",  "%H:%M"]
 
     for fmt in formats:
         try:
diff --git a/appointment/utils/db_helpers.py b/appointment/utils/db_helpers.py
index 5996a0a..06d56fd 100644
--- a/appointment/utils/db_helpers.py
+++ b/appointment/utils/db_helpers.py
@@ -12,6 +12,7 @@
 
 from django.apps import apps
 from django.conf import settings
+from django.contrib.auth.hashers import make_password
 from django.core.cache import cache
 from django.core.exceptions import FieldDoesNotExist
 from django.urls import reverse
@@ -160,7 +161,8 @@ def create_new_user(client_data: dict):
         user = create_user_with_email(client_data)
 
     password = f"{get_website_name()}{get_current_year()}"
-    user.set_password(password)  # Use set_password to ensure the password is hashed
+    password = make_password(password)
+    user.set_password(password)
     user.save()
 
     return user
diff --git a/appointment/utils/error_codes.py b/appointment/utils/error_codes.py
index 7441018..a816b7f 100644
--- a/appointment/utils/error_codes.py
+++ b/appointment/utils/error_codes.py
@@ -22,3 +22,5 @@ class ErrorCode(Enum):
     STAFF_ID_REQUIRED = auto()
     WORKING_HOURS_NOT_FOUND = auto()
     WORKING_HOURS_CONFLICT = auto()
+    SERVICE_NOT_FOUND = auto()
+    STAFF_MEMBER_NOT_FOUND = auto()
diff --git a/appointment/utils/json_context.py b/appointment/utils/json_context.py
index 8f49ffd..799ceaf 100644
--- a/appointment/utils/json_context.py
+++ b/appointment/utils/json_context.py
@@ -5,7 +5,9 @@
 Author: Adams Pierre David
 Since: 2.0.0
 """
+import datetime
 
+import pytz
 from django.http import JsonResponse
 from django.shortcuts import render
 from django.urls import reverse
@@ -19,11 +21,12 @@
 def convert_appointment_to_json(request, appointments: list) -> list:
     """Convert a queryset of Appointment objects to a JSON serializable format."""
     su = request.user.is_superuser
+    tz = pytz.timezone(get_timezone())
     return [{
         "id": appt.id,
         "client": appt.client.username if username_in_user_model() else "",
-        "start_time": appt.get_start_time().strftime('%Y-%m-%d %H:%M:%S'),
-        "end_time": appt.get_end_time().strftime('%Y-%m-%d %H:%M:%S'),
+        "start_time": tz.localize(appt.get_start_time()).isoformat(),
+        "end_time": tz.localize(appt.get_end_time()).isoformat(),
         "client_name": appt.get_client_name(),
         "url": appt.get_absolute_url(request),
         "background_color": appt.get_background_color(),
@@ -31,7 +34,10 @@ def convert_appointment_to_json(request, appointments: list) -> list:
         "client_email": appt.client.email,
         "client_phone": str(appt.phone),
         "client_address": appt.address,
-        "service_id": appt.get_service().id
+        "service_id": appt.get_service().id,
+        "additional_info": appt.additional_info,
+        "want_reminder": appt.want_reminder,
+        "timezone": get_timezone(),
     } for appt in appointments]
 
 
diff --git a/appointment/views_admin.py b/appointment/views_admin.py
index 5478e4c..cdef3f1 100644
--- a/appointment/views_admin.py
+++ b/appointment/views_admin.py
@@ -11,8 +11,9 @@
 import json
 
 from django.contrib import messages
+from django.core.exceptions import ValidationError
 from django.shortcuts import get_object_or_404, redirect, render
-from django.utils.translation import gettext as _
+from django.utils.translation import gettext_lazy as _
 from django.views.decorators.http import require_POST
 
 from appointment.decorators import require_ajax, require_staff_or_superuser, require_superuser, \
@@ -23,7 +24,11 @@
     fetch_user_appointments, handle_entity_management_request, handle_service_management_request, \
     prepare_appointment_display_data, prepare_user_profile_data, save_appointment, save_appt_date_time, \
     update_personal_info_service
-from appointment.utils.db_helpers import Service, get_day_off_by_id, get_staff_member_by_user_id, get_user_model, \
+from appointment.utils.date_time import convert_str_to_date, convert_str_to_time
+from appointment.utils.db_helpers import AppointmentRequest, Service, create_and_save_appointment, create_new_user, \
+    get_day_off_by_id, \
+    get_staff_member_by_user_id, \
+    get_user_by_email, get_user_model, \
     get_working_hours_by_id
 from appointment.utils.error_codes import ErrorCode
 from appointment.utils.json_context import convert_appointment_to_json, get_generic_context, \
@@ -34,6 +39,9 @@
 ###############################################################
 
 
+appt_updated_successfully = _("Appointment updated successfully.")
+
+
 @require_user_authenticated
 @require_staff_or_superuser
 def get_user_appointments(request, response_type='html'):
@@ -223,46 +231,117 @@ def add_or_update_staff_info(request, user_id=None):
 @require_user_authenticated
 @require_staff_or_superuser
 def fetch_service_list_for_staff(request):
-    appointmentId = request.GET.get('appointmentId')
-    if request.user.is_superuser:
-        appointment = Appointment.objects.get(id=appointmentId)
-        staff_member = appointment.get_staff_member()
+    appointment_id = request.GET.get('appointmentId')
+    if appointment_id:
+        # Fetch services for a specific appointment (edit mode)
+        if request.user.is_superuser:
+            appointment = Appointment.objects.get(id=appointment_id)
+            staff_member = appointment.get_staff_member()
+        else:
+            staff_member = StaffMember.objects.get(user=request.user)
+            # Ensure the staff member is associated with this appointment
+            if not Appointment.objects.filter(id=appointment_id, staff_member=staff_member).exists():
+                return json_response("You do not have permission to access this appointment.", status_code=403)
     else:
+        # Fetch all services for the staff member (create mode)
         staff_member = StaffMember.objects.get(user=request.user)
-    # This will give a list of dictionaries with 'id' and 'name' as keys
+
     services = list(staff_member.get_services_offered().values('id', 'name'))
     return json_response("Successfully fetched services.", custom_data={'services_offered': services})
 
 
-@require_user_authenticated
-@require_staff_or_superuser
-@require_ajax
-@require_POST
-def update_appt_min_info(request):
-    data = json.loads(request.body)
+def create_new_appointment(data, request):
+    service = Service.objects.get(id=data.get("service_id"))
+    staff_member = StaffMember.objects.get(user=request.user)
+
+    # Convert date and start time strings to datetime objects
+    date = convert_str_to_date(data.get("date"))
+    start_time = convert_str_to_time(data.get("start_time"))
+    start_datetime = datetime.datetime.combine(date, start_time)
+
+    appointment_request = AppointmentRequest(
+        date=start_datetime.date(),
+        start_time=start_datetime.time(),
+        end_time=(start_datetime + service.duration).time(),
+        service=service,
+        staff_member=staff_member,
+    )
+    appointment_request.full_clean()  # Validates the model
+    appointment_request.save()
+
+    # Prepare client data
+    email = data.get("client_email", "")
+    name_parts = data.get("client_name", "").split()
+    first_name = name_parts[0] if name_parts else ""
+    last_name = name_parts[-1] if len(name_parts) > 1 else ""  # Use an empty string if no last name
+
+    client_data = {
+        'email': email,
+        'first_name': first_name,
+        'last_name': last_name,
+    }
 
-    # Extracting the data
-    start_time = data.get("start_time")
-    client_name = data.get("client_name")
-    client_email = data.get("client_email")
-    phone_number = data.get("phone_number")
-    client_address = data.get("client_address")
-    appointment_id = data.get("appointment_id")
-    service_id = data.get("service_id")
+    # Use your custom user creation logic
+    user = get_user_by_email(email)
+    if not user:
+        create_new_user(client_data)
+
+    # Create and save the new appointment
+    appointment_data = {
+        'phone': data.get("phone_number", ""),
+        'address': data.get("client_address", ""),
+        'want_reminder': data.get("want_reminder", False),
+        'additional_info': data.get("additional_info", ""),
+        'paid': False
+    }
+    appointment = create_and_save_appointment(appointment_request, client_data, appointment_data)
+    appointment_list = convert_appointment_to_json(request, [appointment])
 
-    # save the data
-    try:
-        appt = Appointment.objects.get(id=appointment_id)
-        appt = save_appointment(appt, client_name, client_email, start_time, phone_number,
-                                client_address, service_id)
+    return json_response("Appointment created successfully.", custom_data={'appt': appointment_list})
 
+
+def update_existing_appointment(data, request):
+    try:
+        appt = Appointment.objects.get(id=data.get("appointment_id"))
+        print(f"want_reminder: {data.get('want_reminder')}")
+        want_reminder = data.get("want_reminder") == 'true'
+        appt = save_appointment(
+            appt,
+            client_name=data.get("client_name"),
+            client_email=data.get("client_email"),
+            start_time=data.get("start_time"),
+            phone_number=data.get("phone_number"),
+            client_address=data.get("client_address"),
+            service_id=data.get("service_id"),
+            want_reminder=want_reminder,
+            additional_info=data.get("additional_info")
+        )
+        appointments_json = convert_appointment_to_json(request, [appt])[0]
+        return json_response(appt_updated_successfully, custom_data={'appt': appointments_json})
     except Appointment.DoesNotExist:
         return json_response("Appointment does not exist.", status=404, success=False,
                              error_code=ErrorCode.APPOINTMENT_NOT_FOUND)
-    appointments_json = convert_appointment_to_json(request, [appt])[0]
+    except Service.DoesNotExist:
+        return json_response("Service does not exist.", status=404, success=False,
+                             error_code=ErrorCode.SERVICE_NOT_FOUND)
+    except Exception as e:
+        return json_response(str(e.args[0]), status=400, success=False)
+
+
+@require_user_authenticated
+@require_staff_or_superuser
+@require_ajax
+@require_POST
+def update_appt_min_info(request):
+    data = json.loads(request.body)
+    is_creating = data.get('isCreating', False)
 
-    # Responding after processing the data
-    return json_response("Appointment updated successfully.", custom_data={'appt': appointments_json})
+    if is_creating:
+        # Logic for creating a new appointment
+        return create_new_appointment(data, request)
+    else:
+        # Logic for updating an existing appointment
+        return update_existing_appointment(data, request)
 
 
 @require_user_authenticated
@@ -288,7 +367,7 @@ def validate_appointment_date(request):
     is_valid, message = Appointment.is_valid_date(appt_date, start_time_obj, staff_member, appointment_id, weekday)
     if not is_valid:
         return json_response(message, status=403, success=False, error_code=ErrorCode.INVALID_DATE)
-    return json_response("Appointment date and time are valid.")
+    return json_response(_("Appointment date and time are valid."))
 
 
 @require_user_authenticated
@@ -307,9 +386,11 @@ def update_appt_date_time(request):
     try:
         appt = save_appt_date_time(start_time, appt_date, appointment_id)
     except Appointment.DoesNotExist:
-        return json_response("Appointment does not exist.", status=404, success=False,
+        return json_response(_("Appointment does not exist."), status=404, success=False,
                              error_code=ErrorCode.APPOINTMENT_NOT_FOUND)
-    return json_response("Appointment updated successfully.", custom_data={'appt': appt.id})
+    except ValidationError as e:
+        return json_response(e.message, status=400, success=False)
+    return json_response(appt_updated_successfully, custom_data={'appt': appt.id})
 
 
 @require_user_authenticated
diff --git a/appointments/settings.py b/appointments/settings.py
index 388ac31..bb959b5 100644
--- a/appointments/settings.py
+++ b/appointments/settings.py
@@ -12,6 +12,9 @@
 import os
 from pathlib import Path
 
+from django.conf import locale
+from django.utils.translation import gettext_lazy as _
+
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
@@ -41,6 +44,7 @@
 MIDDLEWARE = [
     "django.middleware.security.SecurityMiddleware",
     "django.contrib.sessions.middleware.SessionMiddleware",
+    'django.middleware.locale.LocaleMiddleware',
     "django.middleware.common.CommonMiddleware",
     "django.middleware.csrf.CsrfViewMiddleware",
     "django.contrib.auth.middleware.AuthenticationMiddleware",
@@ -53,7 +57,7 @@
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
-        "DIRS": [BASE_DIR / 'templates']
+        "DIRS": [BASE_DIR / 'appointment/templates']
         ,
         "APP_DIRS": True,
         "OPTIONS": {
@@ -100,7 +104,7 @@
 # Internationalization
 # https://docs.djangoproject.com/en/4.1/topics/i18n/
 
-LANGUAGE_CODE = "en-us"
+LANGUAGE_CODE = "en"
 
 TIME_ZONE = 'Europe/Paris'
 
@@ -120,3 +124,10 @@
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 
 APPOINTMENT_BUFFER_TIME = 0
+
+LOCALE_PATHS = [os.path.join(BASE_DIR, "locale")]
+LANGUAGES = (
+    ('en', _('English')),
+    ('es', _('Spanish')),
+    ('fr', _('French')),
+)
diff --git a/appointments/urls.py b/appointments/urls.py
index 6430e82..da0576f 100644
--- a/appointments/urls.py
+++ b/appointments/urls.py
@@ -13,10 +13,12 @@
     1. Import the include() function: from django.urls import include, path
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
+from django.conf.urls.i18n import i18n_patterns
 from django.contrib import admin
 from django.urls import path, include
 
-urlpatterns = [
+urlpatterns = i18n_patterns(
     path("admin/", admin.site.urls),
+    path('i18n/', include('django.conf.urls.i18n')),
     path("", include("appointment.urls")),
-]
+)
diff --git a/docs/release_notes/latest.md b/docs/release_notes/latest.md
index b11429a..e621cea 100644
--- a/docs/release_notes/latest.md
+++ b/docs/release_notes/latest.md
@@ -12,6 +12,16 @@ internationalization, alongside some crucial library updates and new dynamic fea
 
 ## New Features ✨
 
+### Dynamic Appointment Management
+
+- AJAX-based appointment creation and update functionalities.
+- Enhanced endpoints for efficient appointment management.
+
+### User Interface Enhancements and JavaScript Refactor
+
+- Major updates to staff_index.js for improved interactivity and responsiveness.
+- New CSS for a more responsive and user-friendly interface in appointment and calendar views.
+
 ### Dynamic Label Customization in Appointment Pages (#19)
 
 - Added a new configuration option `app_offered_by_label` to the `Config` model.
@@ -56,8 +66,8 @@ internationalization, alongside some crucial library updates and new dynamic fea
   to access its appointment's page list (/app-admin/user-event/)
 
   #### Description of the bug
-    If a staff (Django-related role) is authenticated and tries to retrieved this endpoint :
-    `/app-admin/user-event/` he'll get the following error if debug = true
+  If a staff (Django-related role) is authenticated and tries to retrieved this endpoint :
+  `/app-admin/user-event/` he'll get the following error if debug = true
     ```
       Traceback (most recent call last):
       File ".../django/core/handlers/exception.py", line 55, in inner
@@ -85,17 +95,17 @@ internationalization, alongside some crucial library updates and new dynamic fea
         raise self.RelatedObjectDoesNotExist(
         client.models.UserClient.staffmember.RelatedObjectDoesNotExist: UserClient has no staffmember.
     ```
-    If debug = false, the user will get a 500 error
-    #### To Reproduce
-    ##### Steps to reproduce the behavior:
+  If debug = false, the user will get a 500 error
+  #### To Reproduce
+  ##### Steps to reproduce the behavior:
 
       Create a user/account (user1)
       Login as admin/superuser (admin) and add user1 to staff.
       Login as user1 and go to /appointment/app-admin/user-event/
       See error
 
-    #### Expected behavior
-    Not an error but a redirection or anything more concise than just an error or a 5xx code return.
+  #### Expected behavior
+  Not an error but a redirection or anything more concise than just an error or a 5xx code return.
 
 ---
 

From 690d9f757dc6b0eb13ea810f3a8c6a56ada95bce Mon Sep 17 00:00:00 2001
From: Adams Pierre David <57180807+adamspd@users.noreply.github.com>
Date: Mon, 1 Jan 2024 02:11:31 +0100
Subject: [PATCH 3/7] Updated translation

---
 appointment/models.py                                         | 3 +++
 appointment/services.py                                       | 2 +-
 appointment/templates/administration/display_appointment.html | 2 +-
 appointment/templates/administration/manage_day_off.html      | 4 ++--
 appointment/templates/appointment/default_thank_you.html      | 2 +-
 appointment/templates/email_sender/thank_you_email.html       | 2 +-
 6 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/appointment/models.py b/appointment/models.py
index 8e95bfa..13e572e 100644
--- a/appointment/models.py
+++ b/appointment/models.py
@@ -458,6 +458,9 @@ def is_paid(self):
             return True
         return self.paid
 
+    def is_paid_txt(self):
+        return _("Yes") if self.is_paid() else _("No")
+
     def get_appointment_amount_to_pay(self):
         # Check if the decimal part is 0
         if self.amount_to_pay % 1 == 0:
diff --git a/appointment/services.py b/appointment/services.py
index 9b9986a..148a84e 100644
--- a/appointment/services.py
+++ b/appointment/services.py
@@ -65,7 +65,7 @@ def prepare_appointment_display_data(user, appointment_id):
         return None, None, _("You are not authorized to view this appointment."), 403
 
     # Prepare the data for display
-    page_title = _("Appointment details: {client_name}").format(client_name=appointment.get_client_name())
+    page_title = _("Appointment details") + _(": {client_name}").format(client_name=appointment.get_client_name())
     if user.is_superuser:
         page_title += f' (by: {appointment.get_staff_member_name()})'
 
diff --git a/appointment/templates/administration/display_appointment.html b/appointment/templates/administration/display_appointment.html
index 3e3c10c..433e9eb 100644
--- a/appointment/templates/administration/display_appointment.html
+++ b/appointment/templates/administration/display_appointment.html
@@ -60,7 +60,7 @@ <h2>{{ page_title }}</h2>
                         </div>
                         <div class="appointment-detail {% if appointment.is_paid %} is-paid-true {% else %} is-paid-false {% endif %}">
                             <i class="fas fa-money-bill-wave"></i>
-                            <strong>{% trans 'Is paid' %}:</strong> {{ appointment.is_paid }}
+                            <strong>{% trans 'Is paid' %}:</strong> {{ appointment.is_paid_txt }}
                         </div>
                         <div class="appointment-detail hover-element">
                             <i class="fas fa-dollar-sign"></i>
diff --git a/appointment/templates/administration/manage_day_off.html b/appointment/templates/administration/manage_day_off.html
index b678290..fdd1b8f 100644
--- a/appointment/templates/administration/manage_day_off.html
+++ b/appointment/templates/administration/manage_day_off.html
@@ -34,7 +34,7 @@ <h2>{% trans "Manage Days Off" %}</h2>
 
                     <!-- Start Date Display (read-only) -->
                     <div class="form-group">
-                        <label for="{{ day_off_form.start_date.id_for_label }}_display">{% trans 'Start Date' %}:</label>
+                        <label for="{{ day_off_form.start_date.id_for_label }}_display">{% trans 'Start date' %}:</label>
                         <input type="text" id="{{ day_off_form.start_date.id_for_label }}_display"
                                class="datepicker-display"
                                value="{{ day_off_form.start_date.value }}" readonly>
@@ -46,7 +46,7 @@ <h2>{% trans "Manage Days Off" %}</h2>
 
                     <!-- End Date Display (read-only) -->
                     <div class="form-group">
-                        <label for="{{ day_off_form.end_date.id_for_label }}_display">{% trans 'End Date' %}:</label>
+                        <label for="{{ day_off_form.end_date.id_for_label }}_display">{% trans 'End date' %}:</label>
                         <input type="text" id="{{ day_off_form.end_date.id_for_label }}_display"
                                class="datepicker-display"
                                value="{{ day_off_form.end_date.value }}" readonly>
diff --git a/appointment/templates/appointment/default_thank_you.html b/appointment/templates/appointment/default_thank_you.html
index b63f127..1ce8138 100644
--- a/appointment/templates/appointment/default_thank_you.html
+++ b/appointment/templates/appointment/default_thank_you.html
@@ -15,7 +15,7 @@
         <div class="main-content">
             <h1 class="thank-you-title">{% trans "See you soon" %} !</h1>
             <p class="thank-you-message">{% trans "We've successfully scheduled your appointment! Please check your email for all the details" %}.</p>
-            <p class="appointment-details-title">{% trans "Appointment Details" %}:</p>
+            <p class="appointment-details-title">{% trans "Appointment details" %}:</p>
             <ul class="appointment-details">
                 <li>{% trans 'Service' %}: {{ appointment.get_service_name }}</li>
                 <li>{% trans 'Appointment ID' %}: {{ appointment.id_request }}</li>
diff --git a/appointment/templates/email_sender/thank_you_email.html b/appointment/templates/email_sender/thank_you_email.html
index 66fa8bb..ef8bfbd 100644
--- a/appointment/templates/email_sender/thank_you_email.html
+++ b/appointment/templates/email_sender/thank_you_email.html
@@ -197,7 +197,7 @@ <h2 style="color: #000000; font-size: 25px">{% trans "Account Details" %}</h2>
                     <tr>
                         <td align="left" valign="top"
                             style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
-                            <h2 style="color: #000000; font-size: 25px">{% trans "Appointment Details" %}</h2>
+                            <h2 style="color: #000000; font-size: 25px">{% trans "Appointment details" %}</h2>
                         </td>
                     </tr>
                     <tr>

From c7a414103cdbca69d1694257b3e5fb8fed553309 Mon Sep 17 00:00:00 2001
From: Adams Pierre David <57180807+adamspd@users.noreply.github.com>
Date: Mon, 1 Jan 2024 12:22:16 +0100
Subject: [PATCH 4/7] Updated tests

---
 appointment/tests/utils/test_date_time.py  | 2 --
 appointment/tests/utils/test_db_helpers.py | 2 ++
 appointment/utils/db_helpers.py            | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/appointment/tests/utils/test_date_time.py b/appointment/tests/utils/test_date_time.py
index 4bebe93..d394331 100644
--- a/appointment/tests/utils/test_date_time.py
+++ b/appointment/tests/utils/test_date_time.py
@@ -179,8 +179,6 @@ def test_convert_str_to_time_invalid(self):
             convert_str_to_time("25:00 AM")
         with self.assertRaises(ValueError):
             convert_str_to_time("25:00:00")
-        with self.assertRaises(ValueError):
-            convert_str_to_time("10:00")
         with self.assertRaises(ValueError):
             convert_str_to_time("10:60 AM")
         with self.assertRaises(ValueError):
diff --git a/appointment/tests/utils/test_db_helpers.py b/appointment/tests/utils/test_db_helpers.py
index ee1f2ee..df00c71 100644
--- a/appointment/tests/utils/test_db_helpers.py
+++ b/appointment/tests/utils/test_db_helpers.py
@@ -6,6 +6,7 @@
 
 from django.apps import apps
 from django.conf import settings
+from django.contrib.auth.hashers import make_password
 from django.core.cache import cache
 from django.core.exceptions import FieldDoesNotExist
 from django.test import TestCase
@@ -785,3 +786,4 @@ def test_create_new_user_check_password(self):
         user = create_new_user(client_data)
         password = f"{get_website_name()}{get_current_year()}"
         self.assertTrue(user.check_password(password))
+
diff --git a/appointment/utils/db_helpers.py b/appointment/utils/db_helpers.py
index 06d56fd..fb72423 100644
--- a/appointment/utils/db_helpers.py
+++ b/appointment/utils/db_helpers.py
@@ -161,7 +161,6 @@ def create_new_user(client_data: dict):
         user = create_user_with_email(client_data)
 
     password = f"{get_website_name()}{get_current_year()}"
-    password = make_password(password)
     user.set_password(password)
     user.save()
 

From d9b4d949c5714653c47c5267add820bd7a7c542a Mon Sep 17 00:00:00 2001
From: Adams Pierre David <57180807+adamspd@users.noreply.github.com>
Date: Mon, 1 Jan 2024 15:23:59 +0100
Subject: [PATCH 5/7] Updated tests

---
 .../{email_messages.py => messages_.py}       |   1 +
 appointment/services.py                       |  96 +++++++++++++--
 .../static/js/app_admin/staff_index.js        |  11 +-
 .../tests/models/test_model_appointment.py    |  22 ++++
 appointment/tests/test_views.py               | 101 ++++++++++++++++
 appointment/utils/email_ops.py                |   2 +-
 appointment/views_admin.py                    | 113 +++---------------
 7 files changed, 238 insertions(+), 108 deletions(-)
 rename appointment/{email_messages.py => messages_.py} (91%)

diff --git a/appointment/email_messages.py b/appointment/messages_.py
similarity index 91%
rename from appointment/email_messages.py
rename to appointment/messages_.py
index f5a2294..40b9aca 100644
--- a/appointment/email_messages.py
+++ b/appointment/messages_.py
@@ -18,3 +18,4 @@
 thank_you_payment = _("""We're excited to have you on board! Thank you for booking us. The next step is to pay for
 the booking.""")
 
+appt_updated_successfully = _("Appointment updated successfully.")
diff --git a/appointment/services.py b/appointment/services.py
index 148a84e..21343fd 100644
--- a/appointment/services.py
+++ b/appointment/services.py
@@ -16,15 +16,19 @@
 from django.utils.translation import gettext as _, gettext_lazy as _
 
 from appointment.forms import PersonalInformationForm, ServiceForm, StaffDaysOffForm, StaffWorkingHoursForm
+from appointment.messages_ import appt_updated_successfully
 from appointment.settings import APPOINTMENT_PAYMENT_URL
-from appointment.utils.date_time import convert_12_hour_time_to_24_hour_time, convert_str_to_time, get_ar_end_time
-from appointment.utils.db_helpers import Appointment, EmailVerificationCode, Service, StaffMember, WorkingHours, \
-    calculate_slots, calculate_staff_slots, check_day_off_for_staff, create_new_user, day_off_exists_for_date_range, \
-    exclude_booked_slots, get_all_appointments, get_all_staff_members, get_appointment_by_id, \
-    get_appointments_for_date_and_time, get_staff_member_appointment_list, get_staff_member_from_user_id_or_logged_in, \
-    get_times_from_config, get_user_by_email, get_working_hours_for_staff_and_day, working_hours_exist
+from appointment.utils.date_time import (
+    convert_12_hour_time_to_24_hour_time, convert_str_to_date, convert_str_to_time, get_ar_end_time)
+from appointment.utils.db_helpers import (
+    Appointment, AppointmentRequest, EmailVerificationCode, Service, StaffMember, WorkingHours, calculate_slots,
+    calculate_staff_slots, check_day_off_for_staff, create_and_save_appointment, create_new_user,
+    day_off_exists_for_date_range, exclude_booked_slots, get_all_appointments, get_all_staff_members,
+    get_appointment_by_id, get_appointments_for_date_and_time, get_staff_member_appointment_list,
+    get_staff_member_from_user_id_or_logged_in, get_times_from_config, get_user_by_email,
+    get_working_hours_for_staff_and_day, working_hours_exist)
 from appointment.utils.error_codes import ErrorCode
-from appointment.utils.json_context import get_generic_context, json_response
+from appointment.utils.json_context import convert_appointment_to_json, get_generic_context, json_response
 from appointment.utils.permissions import check_entity_ownership
 from appointment.utils.session import handle_email_change
 
@@ -531,3 +535,81 @@ def handle_service_management_request(post_data, files_data=None, service_id=Non
             return None, False, get_error_message_in_form(form=form)
     except Exception as e:
         return None, False, str(e)
+
+
+def create_new_appointment(data, request):
+    service = Service.objects.get(id=data.get("service_id"))
+    staff_member = StaffMember.objects.get(user=request.user)
+
+    # Convert date and start time strings to datetime objects
+    date = convert_str_to_date(data.get("date"))
+    start_time = convert_str_to_time(data.get("start_time"))
+    start_datetime = datetime.datetime.combine(date, start_time)
+
+    appointment_request = AppointmentRequest(
+        date=start_datetime.date(),
+        start_time=start_datetime.time(),
+        end_time=(start_datetime + service.duration).time(),
+        service=service,
+        staff_member=staff_member,
+    )
+    appointment_request.full_clean()  # Validates the model
+    appointment_request.save()
+
+    # Prepare client data
+    email = data.get("client_email", "")
+    name_parts = data.get("client_name", "").split()
+    first_name = name_parts[0] if name_parts else ""
+    last_name = name_parts[-1] if len(name_parts) > 1 else ""  # Use an empty string if no last name
+
+    client_data = {
+        'email': email,
+        'first_name': first_name,
+        'last_name': last_name,
+    }
+
+    # Use your custom user creation logic
+    user = get_user_by_email(email)
+    if not user:
+        create_new_user(client_data)
+
+    # Create and save the new appointment
+    appointment_data = {
+        'phone': data.get("client_phone", ""),
+        'address': data.get("client_address", ""),
+        'want_reminder': data.get("want_reminder") == 'true',
+        'additional_info': data.get("additional_info", ""),
+        'paid': False
+    }
+    appointment = create_and_save_appointment(appointment_request, client_data, appointment_data)
+    appointment_list = convert_appointment_to_json(request, [appointment])
+
+    return json_response("Appointment created successfully.", custom_data={'appt': appointment_list})
+
+
+def update_existing_appointment(data, request):
+    try:
+        appt = Appointment.objects.get(id=data.get("appointment_id"))
+        print(f"want_reminder: {data.get('want_reminder')}")
+        want_reminder = data.get("want_reminder") == 'true'
+        appt = save_appointment(
+            appt,
+            client_name=data.get("client_name"),
+            client_email=data.get("client_email"),
+            start_time=data.get("start_time"),
+            phone_number=data.get("client_phone"),
+            client_address=data.get("client_address"),
+            service_id=data.get("service_id"),
+            want_reminder=want_reminder,
+            additional_info=data.get("additional_info")
+        )
+        appointments_json = convert_appointment_to_json(request, [appt])[0]
+        return json_response(appt_updated_successfully, custom_data={'appt': appointments_json})
+    except Appointment.DoesNotExist:
+        return json_response("Appointment does not exist.", status=404, success=False,
+                             error_code=ErrorCode.APPOINTMENT_NOT_FOUND)
+    except Service.DoesNotExist:
+        return json_response("Service does not exist.", status=404, success=False,
+                             error_code=ErrorCode.SERVICE_NOT_FOUND)
+    except Exception as e:
+        return json_response(str(e.args[0]), status=400, success=False)
diff --git a/appointment/static/js/app_admin/staff_index.js b/appointment/static/js/app_admin/staff_index.js
index a5d70a5..1a5e8b0 100644
--- a/appointment/static/js/app_admin/staff_index.js
+++ b/appointment/static/js/app_admin/staff_index.js
@@ -171,7 +171,7 @@ function displayEventList(events, date) {
     const date_obj = new Date(date.toISOString())
 
     if (events.length === 0) {
-        eventListHtml += `<div class="djangoAppt_no-events">` + noEventTxt +`</div>`;
+        eventListHtml += `<div class="djangoAppt_no-events">` + noEventTxt + `</div>`;
     }
 
     eventListHtml += `<button class="btn btn-primary djangoAppt_btn-new-event" onclick="createNewAppointment('${date_obj}')">` + newEventTxt + `</button></div>`;
@@ -614,7 +614,7 @@ function collectFormDataFromModal(modal) {
 
     inputs.forEach(input => {
         if (input.name !== "date") {
-            let key = input.previousElementSibling.innerText.trim().replace(/\s+/g, '_').replace(":", "").toLowerCase();
+            let key = input.name.replace(/([A-Z])/g, '_$1').toLowerCase();
             data[key] = input.value;
         }
     });
@@ -645,9 +645,10 @@ function validateEmail(email) {
     const emailError = document.getElementById("emailError");
 
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(email)) {
+    console.log("Email: ", emailInput.value)
+    if (!emailRegex.test(emailInput.value)) {
         emailInput.style.border = "1px solid red";
-        emailError.textContent = "Invalid email address.";
+        emailError.textContent = "Invalid email address, yeah.";
         emailError.style.color = "red";
         emailError.style.display = "inline";
         return false;
@@ -665,6 +666,8 @@ async function sendAppointmentData(data) {
         'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': getCSRFToken(),
     };
 
+    console.log("Sending data to server: ", data);
+
     return fetch(updateApptMinInfoURL, {
         method: 'POST', headers: headers, body: JSON.stringify(data)
     });
diff --git a/appointment/tests/models/test_model_appointment.py b/appointment/tests/models/test_model_appointment.py
index 9dc7065..598fc7d 100644
--- a/appointment/tests/models/test_model_appointment.py
+++ b/appointment/tests/models/test_model_appointment.py
@@ -78,6 +78,10 @@ def test_is_paid(self):
         """Test if an appointment's paid status is correct."""
         self.assertFalse(self.appointment.is_paid())
 
+    def test_is_paid_txt(self):
+        """Test if an appointment's paid status is correct."""
+        self.assertEqual(self.appointment.is_paid_txt(), "No")
+
     # Test appointment amount to pay
     def test_get_appointment_amount_to_pay(self):
         """Test if an appointment's amount to pay is correct."""
@@ -186,3 +190,21 @@ def test_create_appointment_without_required_fields(self):
     def test_get_service_duration(self):
         """Test if an appointment's service duration is correct."""
         self.assertEqual(self.appointment.get_service_duration(), "1 hour")
+
+    def test_appt_to_dict(self):
+        response = {
+            'id': 1,
+            'client_name': 'Client1',
+            'client_email': 'client1@gmail.com',
+            'start_time': '1900-01-01 09:00',
+            'end_time': '1900-01-01 10:00',
+            'service_name': 'Test Service',
+            'address': 'Some City, Some State',
+            'want_reminder': False,
+            'additional_info': None,
+            'paid': False,
+            'amount_to_pay': 100,
+        }
+        actual_response = self.appointment.to_dict()
+        actual_response.pop('id_request', None)
+        self.assertEqual(actual_response, response)
diff --git a/appointment/tests/test_views.py b/appointment/tests/test_views.py
index e601958..f96db25 100644
--- a/appointment/tests/test_views.py
+++ b/appointment/tests/test_views.py
@@ -39,12 +39,18 @@ def setUp(self):
         middleware.process_request(self.request)
         self.request.session.save()
         self.appointment = self.create_appointment_for_user1()
+        self.tomorrow = date.today() + timedelta(days=1)
 
     def need_staff_login(self):
         self.user1.is_staff = True
         self.user1.save()
         self.client.force_login(self.user1)
 
+    def need_superuser_login(self):
+        self.user1.is_superuser = True
+        self.user1.save()
+        self.client.force_login(self.user1)
+
     def clean_staff_member_objects(self):
         """Delete all AppointmentRequests and Appointments linked to the StaffMember instance of self.user1."""
         AppointmentRequest.objects.filter(staff_member__user=self.user1).delete()
@@ -220,3 +226,98 @@ def test_remove_staff_member(self):
         # Check if staff member is deleted
         staff_member_exists = StaffMember.objects.filter(pk=self.staff_member.id).exists()
         self.assertFalse(staff_member_exists, "Appointment should be deleted but still exists.")
+
+    def test_fetch_service_list_for_staff(self):
+        self.need_staff_login()
+
+        # Assuming self.service1 and self.service2 are services linked to self.staff_member1
+        self.staff_member1.services_offered.add(self.service1, self.service2)
+        staff_member_services = [self.service1, self.service2]
+
+        # Simulate a request without appointmentId
+        url = reverse('appointment:fetch_service_list_for_staff')
+        response = self.client.get(url, HTTP_X_REQUESTED_WITH='XMLHttpRequest')
+        self.assertEqual(response.status_code, 200)
+        response_data = response.json()
+        self.assertEqual(response_data["message"], "Successfully fetched services.")
+        self.assertCountEqual(
+            response_data["services_offered"],
+            [{"id": service.id, "name": service.name} for service in staff_member_services]
+        )
+
+        # Create a test appointment and link it to self.staff_member1
+        test_appointment = self.create_appointment_for_user1()
+
+        # Simulate a request with appointmentId
+        url_with_appointment = f"{url}?appointmentId={test_appointment.id}"
+        response_with_appointment = self.client.get(url_with_appointment, HTTP_X_REQUESTED_WITH='XMLHttpRequest')
+        self.assertEqual(response_with_appointment.status_code, 200)
+        response_data_with_appointment = response_with_appointment.json()
+        self.assertEqual(response_data_with_appointment["message"], "Successfully fetched services.")
+        # Assuming the staff member linked to the appointment offers the same services
+        self.assertCountEqual(
+            response_data_with_appointment["services_offered"],
+            [{"id": service.id, "name": service.name} for service in staff_member_services]
+        )
+
+    def test_update_appt_min_info_create(self):
+        self.need_staff_login()
+
+        # Preparing data
+        data = {
+            'isCreating': True, 'service_id': '1', 'appointment_id': None, 'client_name': 'Bryan Zap',
+            'client_email': 'bz@gmail.com', 'client_phone': '+33769992738', 'client_address': 'Naples, Florida',
+            'want_reminder': 'false', 'additional_info': '', 'start_time': '15:00:26',
+            'date': self.tomorrow.strftime('%Y-%m-%d')
+        }
+        url = reverse('appointment:update_appt_min_info')
+
+        # Making the request
+        response = self.client.post(url, data=json.dumps(data), content_type='application/json',
+                                    **{'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'})
+
+        # Check response status
+        self.assertEqual(response.status_code, 200)
+
+        # Check response content
+        response_data = response.json()
+        self.assertIn('message', response_data)
+        self.assertEqual(response_data['message'], 'Appointment created successfully.')
+        self.assertIn('appt', response_data)
+
+        # Verify appointment created in the database
+        appointment_id = response_data['appt'][0]['id']
+        self.assertTrue(Appointment.objects.filter(id=appointment_id).exists())
+
+    def test_update_appt_min_info_update(self):
+        self.need_superuser_login()
+
+        # Create an appointment to update
+        appt = self.create_appointment_for_user1()
+
+        # Preparing data for update
+        data = {
+            'isCreating': False, 'service_id': '1', 'appointment_id': appt.id, 'client_name': 'Bryan Zap',
+            'client_email': 'bz@gmail.com', 'client_phone': '+33769992738', 'client_address': 'Naples, Florida',
+            'want_reminder': 'false', 'additional_info': '', 'start_time': '15:00:26',
+            'date': self.tomorrow.strftime('%Y-%m-%d')
+        }
+        url = reverse('appointment:update_appt_min_info')
+
+        # Making the request
+        response = self.client.post(url, data=json.dumps(data), content_type='application/json',
+                                    **{'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'})
+
+        # Check response status
+        self.assertEqual(response.status_code, 200)
+
+        # Check response content
+        response_data = response.json()
+        self.assertIn('message', response_data)
+        self.assertEqual(response_data['message'], 'Appointment updated successfully.')
+        self.assertIn('appt', response_data)
+
+        # Verify appointment updated in the database
+        updated_appt = Appointment.objects.get(id=appt.id)
+        self.assertEqual(updated_appt.client.email, data['client_email'])
+
diff --git a/appointment/utils/email_ops.py b/appointment/utils/email_ops.py
index cde1249..b61b3c2 100644
--- a/appointment/utils/email_ops.py
+++ b/appointment/utils/email_ops.py
@@ -10,7 +10,7 @@
 
 from django.utils.translation import gettext as _
 
-from appointment import email_messages
+from appointment import messages_ as email_messages
 from appointment.email_sender import send_email
 from appointment.models import EmailVerificationCode, AppointmentRequest
 from appointment.settings import APPOINTMENT_PAYMENT_URL
diff --git a/appointment/views_admin.py b/appointment/views_admin.py
index cdef3f1..da8eae6 100644
--- a/appointment/views_admin.py
+++ b/appointment/views_admin.py
@@ -16,32 +16,29 @@
 from django.utils.translation import gettext_lazy as _
 from django.views.decorators.http import require_POST
 
-from appointment.decorators import require_ajax, require_staff_or_superuser, require_superuser, \
-    require_user_authenticated
+from appointment.decorators import (
+    require_ajax, require_staff_or_superuser, require_superuser, require_user_authenticated)
 from appointment.forms import PersonalInformationForm, ServiceForm, StaffAppointmentInformationForm
+from appointment.messages_ import appt_updated_successfully
 from appointment.models import Appointment, DayOff, StaffMember, WorkingHours
-from appointment.services import create_staff_member_service, email_change_verification_service, \
-    fetch_user_appointments, handle_entity_management_request, handle_service_management_request, \
-    prepare_appointment_display_data, prepare_user_profile_data, save_appointment, save_appt_date_time, \
-    update_personal_info_service
-from appointment.utils.date_time import convert_str_to_date, convert_str_to_time
-from appointment.utils.db_helpers import AppointmentRequest, Service, create_and_save_appointment, create_new_user, \
-    get_day_off_by_id, \
-    get_staff_member_by_user_id, \
-    get_user_by_email, get_user_model, \
-    get_working_hours_by_id
+from appointment.services import (
+    create_new_appointment, create_staff_member_service, email_change_verification_service,
+    fetch_user_appointments, handle_entity_management_request, handle_service_management_request,
+    prepare_appointment_display_data, prepare_user_profile_data, save_appt_date_time, update_existing_appointment,
+    update_personal_info_service)
+from appointment.utils.db_helpers import (
+    Service, get_day_off_by_id, get_staff_member_by_user_id, get_user_model,
+    get_working_hours_by_id)
 from appointment.utils.error_codes import ErrorCode
-from appointment.utils.json_context import convert_appointment_to_json, get_generic_context, \
-    get_generic_context_with_extra, handle_unauthorized_response, json_response
+from appointment.utils.json_context import (
+    convert_appointment_to_json, get_generic_context, get_generic_context_with_extra, handle_unauthorized_response,
+    json_response)
 from appointment.utils.permissions import check_extensive_permissions, check_permissions
 
 
 ###############################################################
 
 
-appt_updated_successfully = _("Appointment updated successfully.")
-
-
 @require_user_authenticated
 @require_staff_or_superuser
 def get_user_appointments(request, response_type='html'):
@@ -240,7 +237,8 @@ def fetch_service_list_for_staff(request):
         else:
             staff_member = StaffMember.objects.get(user=request.user)
             # Ensure the staff member is associated with this appointment
-            if not Appointment.objects.filter(id=appointment_id, staff_member=staff_member).exists():
+            if not Appointment.objects.filter(id=appointment_id,
+                                              appointment_request__staff_member=staff_member).exists():
                 return json_response("You do not have permission to access this appointment.", status_code=403)
     else:
         # Fetch all services for the staff member (create mode)
@@ -250,84 +248,6 @@ def fetch_service_list_for_staff(request):
     return json_response("Successfully fetched services.", custom_data={'services_offered': services})
 
 
-def create_new_appointment(data, request):
-    service = Service.objects.get(id=data.get("service_id"))
-    staff_member = StaffMember.objects.get(user=request.user)
-
-    # Convert date and start time strings to datetime objects
-    date = convert_str_to_date(data.get("date"))
-    start_time = convert_str_to_time(data.get("start_time"))
-    start_datetime = datetime.datetime.combine(date, start_time)
-
-    appointment_request = AppointmentRequest(
-        date=start_datetime.date(),
-        start_time=start_datetime.time(),
-        end_time=(start_datetime + service.duration).time(),
-        service=service,
-        staff_member=staff_member,
-    )
-    appointment_request.full_clean()  # Validates the model
-    appointment_request.save()
-
-    # Prepare client data
-    email = data.get("client_email", "")
-    name_parts = data.get("client_name", "").split()
-    first_name = name_parts[0] if name_parts else ""
-    last_name = name_parts[-1] if len(name_parts) > 1 else ""  # Use an empty string if no last name
-
-    client_data = {
-        'email': email,
-        'first_name': first_name,
-        'last_name': last_name,
-    }
-
-    # Use your custom user creation logic
-    user = get_user_by_email(email)
-    if not user:
-        create_new_user(client_data)
-
-    # Create and save the new appointment
-    appointment_data = {
-        'phone': data.get("phone_number", ""),
-        'address': data.get("client_address", ""),
-        'want_reminder': data.get("want_reminder", False),
-        'additional_info': data.get("additional_info", ""),
-        'paid': False
-    }
-    appointment = create_and_save_appointment(appointment_request, client_data, appointment_data)
-    appointment_list = convert_appointment_to_json(request, [appointment])
-
-    return json_response("Appointment created successfully.", custom_data={'appt': appointment_list})
-
-
-def update_existing_appointment(data, request):
-    try:
-        appt = Appointment.objects.get(id=data.get("appointment_id"))
-        print(f"want_reminder: {data.get('want_reminder')}")
-        want_reminder = data.get("want_reminder") == 'true'
-        appt = save_appointment(
-            appt,
-            client_name=data.get("client_name"),
-            client_email=data.get("client_email"),
-            start_time=data.get("start_time"),
-            phone_number=data.get("phone_number"),
-            client_address=data.get("client_address"),
-            service_id=data.get("service_id"),
-            want_reminder=want_reminder,
-            additional_info=data.get("additional_info")
-        )
-        appointments_json = convert_appointment_to_json(request, [appt])[0]
-        return json_response(appt_updated_successfully, custom_data={'appt': appointments_json})
-    except Appointment.DoesNotExist:
-        return json_response("Appointment does not exist.", status=404, success=False,
-                             error_code=ErrorCode.APPOINTMENT_NOT_FOUND)
-    except Service.DoesNotExist:
-        return json_response("Service does not exist.", status=404, success=False,
-                             error_code=ErrorCode.SERVICE_NOT_FOUND)
-    except Exception as e:
-        return json_response(str(e.args[0]), status=400, success=False)
-
-
 @require_user_authenticated
 @require_staff_or_superuser
 @require_ajax
@@ -335,6 +255,7 @@ def update_existing_appointment(data, request):
 def update_appt_min_info(request):
     data = json.loads(request.body)
     is_creating = data.get('isCreating', False)
+    print("this is the data", data)
 
     if is_creating:
         # Logic for creating a new appointment

From 2c8f76ad0e5001348f409e2c46524517d1bcd11e Mon Sep 17 00:00:00 2001
From: Adams Pierre David <57180807+adamspd@users.noreply.github.com>
Date: Mon, 1 Jan 2024 15:50:21 +0100
Subject: [PATCH 6/7] Added more tests

---
 appointment/tests/test_views.py | 82 +++++++++++++++++++++++++--------
 1 file changed, 63 insertions(+), 19 deletions(-)

diff --git a/appointment/tests/test_views.py b/appointment/tests/test_views.py
index f96db25..6cf19b3 100644
--- a/appointment/tests/test_views.py
+++ b/appointment/tests/test_views.py
@@ -40,6 +40,13 @@ def setUp(self):
         self.request.session.save()
         self.appointment = self.create_appointment_for_user1()
         self.tomorrow = date.today() + timedelta(days=1)
+        self.appt = self.create_appointment_for_user1()
+        self.data = {
+            'isCreating': False, 'service_id': '1', 'appointment_id': self.appt.id, 'client_name': 'Bryan Zap',
+            'client_email': 'bz@gmail.com', 'client_phone': '+33769992738', 'client_address': 'Naples, Florida',
+            'want_reminder': 'false', 'additional_info': '', 'start_time': '15:00:26',
+            'date': self.tomorrow.strftime('%Y-%m-%d')
+        }
 
     def need_staff_login(self):
         self.user1.is_staff = True
@@ -264,16 +271,11 @@ def test_update_appt_min_info_create(self):
         self.need_staff_login()
 
         # Preparing data
-        data = {
-            'isCreating': True, 'service_id': '1', 'appointment_id': None, 'client_name': 'Bryan Zap',
-            'client_email': 'bz@gmail.com', 'client_phone': '+33769992738', 'client_address': 'Naples, Florida',
-            'want_reminder': 'false', 'additional_info': '', 'start_time': '15:00:26',
-            'date': self.tomorrow.strftime('%Y-%m-%d')
-        }
+        self.data.update({'isCreating': True, 'appointment_id': None})
         url = reverse('appointment:update_appt_min_info')
 
         # Making the request
-        response = self.client.post(url, data=json.dumps(data), content_type='application/json',
+        response = self.client.post(url, data=json.dumps(self.data), content_type='application/json',
                                     **{'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'})
 
         # Check response status
@@ -293,19 +295,10 @@ def test_update_appt_min_info_update(self):
         self.need_superuser_login()
 
         # Create an appointment to update
-        appt = self.create_appointment_for_user1()
-
-        # Preparing data for update
-        data = {
-            'isCreating': False, 'service_id': '1', 'appointment_id': appt.id, 'client_name': 'Bryan Zap',
-            'client_email': 'bz@gmail.com', 'client_phone': '+33769992738', 'client_address': 'Naples, Florida',
-            'want_reminder': 'false', 'additional_info': '', 'start_time': '15:00:26',
-            'date': self.tomorrow.strftime('%Y-%m-%d')
-        }
         url = reverse('appointment:update_appt_min_info')
 
         # Making the request
-        response = self.client.post(url, data=json.dumps(data), content_type='application/json',
+        response = self.client.post(url, data=json.dumps(self.data), content_type='application/json',
                                     **{'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'})
 
         # Check response status
@@ -318,6 +311,57 @@ def test_update_appt_min_info_update(self):
         self.assertIn('appt', response_data)
 
         # Verify appointment updated in the database
-        updated_appt = Appointment.objects.get(id=appt.id)
-        self.assertEqual(updated_appt.client.email, data['client_email'])
+        updated_appt = Appointment.objects.get(id=self.appt.id)
+        self.assertEqual(updated_appt.client.email, self.data['client_email'])
+
+    def test_update_nonexistent_appointment(self):
+        self.need_superuser_login()
 
+        # Preparing data with a non-existent appointment ID
+        self.data['appointment_id'] = 999
+        url = reverse('appointment:update_appt_min_info')
+
+        # Making the request
+        response = self.client.post(url, data=json.dumps(self.data), content_type='application/json',
+                                    **{'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'})
+
+        # Check response status and content
+        self.assertEqual(response.status_code, 404)
+        response_data = response.json()
+        self.assertIn('message', response_data)
+        self.assertEqual(response_data['message'], "Appointment does not exist.")
+
+    def test_update_with_nonexistent_service(self):
+        self.need_superuser_login()
+
+        # Preparing data with a non-existent service ID
+        self.data['service_id'] = 999
+        url = reverse('appointment:update_appt_min_info')
+
+        # Making the request
+        response = self.client.post(url, data=json.dumps(self.data), content_type='application/json',
+                                    **{'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'})
+
+        # Check response status and content
+        self.assertEqual(response.status_code, 404)
+        response_data = response.json()
+        self.assertIn('message', response_data)
+        self.assertEqual(response_data['message'], "Service does not exist.")
+
+    def test_update_with_invalid_data_causing_exception(self):
+        self.need_superuser_login()
+
+        # Preparing invalid data to trigger an exception, for example here, no email address
+        data = {
+            'isCreating': False, 'service_id': '1', 'appointment_id': self.appt.id,
+        }
+        url = reverse('appointment:update_appt_min_info')
+
+        # Making the request
+        response = self.client.post(url, data=json.dumps(data), content_type='application/json',
+                                    **{'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'})
+
+        # Check response status and content
+        self.assertEqual(response.status_code, 400)
+        response_data = response.json()
+        self.assertIn('message', response_data)

From 116220cdd386a8bdf6c1a7f4f7b213ea674a0df9 Mon Sep 17 00:00:00 2001
From: Adams Pierre David <57180807+adamspd@users.noreply.github.com>
Date: Mon, 1 Jan 2024 16:19:31 +0100
Subject: [PATCH 7/7] Added more tests for admin views

---
 appointment/tests/test_views.py | 79 ++++++++++++++++++++++++++++++++-
 appointment/views_admin.py      |  2 +-
 2 files changed, 79 insertions(+), 2 deletions(-)

diff --git a/appointment/tests/test_views.py b/appointment/tests/test_views.py
index 6cf19b3..b8d2789 100644
--- a/appointment/tests/test_views.py
+++ b/appointment/tests/test_views.py
@@ -13,7 +13,7 @@
 
 from appointment.models import AppointmentRequest, Appointment, EmailVerificationCode, StaffMember
 from appointment.tests.base.base_test import BaseTest
-from appointment.utils.db_helpers import WorkingHours
+from appointment.utils.db_helpers import Service, WorkingHours
 from appointment.views import verify_user_and_login
 
 
@@ -63,6 +63,11 @@ def clean_staff_member_objects(self):
         AppointmentRequest.objects.filter(staff_member__user=self.user1).delete()
         Appointment.objects.filter(appointment_request__staff_member__user=self.user1).delete()
 
+    def remove_staff_member(self):
+        """Remove the StaffMember instance of self.user1."""
+        self.clean_staff_member_objects()
+        StaffMember.objects.filter(user=self.user1).delete()
+
     def test_get_available_slots_ajax(self):
         """get_available_slots_ajax view should return a JSON response with available slots for the selected date."""
         url = reverse('appointment:available_slots_ajax')
@@ -365,3 +370,75 @@ def test_update_with_invalid_data_causing_exception(self):
         self.assertEqual(response.status_code, 400)
         response_data = response.json()
         self.assertIn('message', response_data)
+
+    def test_delete_service_with_superuser(self):
+        self.need_superuser_login()
+        # Test deletion with a superuser
+        response = self.client.get(reverse('appointment:delete_service', args=[self.service1.id]))
+
+        # Check if the service was deleted
+        self.assertFalse(Service.objects.filter(id=self.service1.id).exists())
+
+        # Check if the success message is added
+        messages_ = list(get_messages(response.wsgi_request))
+        self.assertIn(_("Service deleted successfully!"), [m.message for m in messages_])
+
+        # Check if it redirects to the user profile
+        self.assertRedirects(response, reverse('appointment:user_profile'))
+
+    def test_delete_service_without_superuser(self):
+        # Log in as a regular/staff user
+        self.need_staff_login()
+
+        response = self.client.get(reverse('appointment:delete_service', args=[self.service1.id]))
+
+        # Check for a forbidden status code, as only superusers should be able to delete services
+        self.assertEqual(response.status_code, 403)
+
+    def test_delete_nonexistent_service(self):
+        self.need_superuser_login()
+        # Try to delete a service that does not exist
+        response = self.client.get(reverse('appointment:delete_service', args=[99999]))
+
+        # Check for a 404-status code
+        self.assertEqual(response.status_code, 404)
+
+    def test_remove_staff_member_with_superuser(self):
+        self.need_superuser_login()
+        self.clean_staff_member_objects()
+        # Test removal of staff member by a superuser
+        response = self.client.get(reverse('appointment:remove_superuser_staff_member'))
+
+        # Check if the StaffMember instance was deleted
+        self.assertFalse(StaffMember.objects.filter(user=self.user1).exists())
+
+        # Check if it redirects to the user profile
+        self.assertRedirects(response, reverse('appointment:user_profile'))
+
+    def test_remove_staff_member_without_superuser(self):
+        # Log out superuser and log in as a regular user
+        self.need_staff_login()
+        response = self.client.get(reverse('appointment:remove_superuser_staff_member'))
+
+        # Check for a forbidden status code, as only superusers should be able to remove staff members
+        self.assertEqual(response.status_code, 403)
+
+    def test_make_staff_member_with_superuser(self):
+        self.need_superuser_login()
+        self.remove_staff_member()
+        # Test creating a staff member by a superuser
+        response = self.client.get(reverse('appointment:make_superuser_staff_member'))
+
+        # Check if the StaffMember instance was created
+        self.assertTrue(StaffMember.objects.filter(user=self.user1).exists())
+
+        # Check if it redirects to the user profile
+        self.assertRedirects(response, reverse('appointment:user_profile'))
+
+    def test_make_staff_member_without_superuser(self):
+        self.need_staff_login()
+        response = self.client.get(reverse('appointment:make_superuser_staff_member'))
+
+        # Check for a forbidden status code, as only superusers should be able to create staff members
+        self.assertEqual(response.status_code, 403)
+
diff --git a/appointment/views_admin.py b/appointment/views_admin.py
index da8eae6..c1da323 100644
--- a/appointment/views_admin.py
+++ b/appointment/views_admin.py
@@ -387,7 +387,7 @@ def create_new_staff_member(request):
 
 @require_user_authenticated
 @require_superuser
-def make_superuser_staff_member(request, ):
+def make_superuser_staff_member(request):
     user = request.user
     StaffMember.objects.create(user=user)
     return redirect('appointment:user_profile')