Index: ReserveNGo-frontend/src/App.vue
===================================================================
--- ReserveNGo-frontend/src/App.vue	(revision 420a2dd87c002908545df9e252877014a3e3400b)
+++ ReserveNGo-frontend/src/App.vue	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
@@ -6,4 +6,5 @@
     </main>
   </div>
+  <ToastContainer></ToastContainer>
 </template>
 
@@ -11,7 +12,8 @@
 import NavBar from './components/Project/Nav_bar_new.vue'
 import { userStore } from '@/PiniaStores/UserStore.js'
+import ToastContainer from './components/Project/Utility/ToastContainer.vue'
 
 export default {
-  components: { NavBar },
+  components: { NavBar, ToastContainer },
   beforeMount() {
     userStore().getLocalStorage()
Index: ReserveNGo-frontend/src/components/Project/Event/AddEventModal.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/AddEventModal.vue	(revision 420a2dd87c002908545df9e252877014a3e3400b)
+++ ReserveNGo-frontend/src/components/Project/Event/AddEventModal.vue	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
@@ -1,4 +1,6 @@
 <script>
 import { userStore } from '@/PiniaStores/UserStore.js'
+import { useLocalManager } from '@/repository/LocalManager.ts'
+import {useToasts} from '@/composables/useToast.js'
 
 export default {
@@ -21,4 +23,5 @@
       user: userStore(),
       isLoading: false,
+      showToast: useToasts().showToast,
     }
   },
@@ -39,27 +42,24 @@
       }
 
-      try {
-        const response = await fetch('http://localhost:8080/api/local-manager/add-event', {
-          method: 'POST',
-          headers: {
-            Authorization: this.user.getToken,
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(this.event),
+      useLocalManager.addEvent(this.event)
+        .then(() => {
+          this.$emit('event-added')
+          this.event = {
+            name: '',
+            description: '',
+            eventType: 'Music',
+            eventStart: '',
+            eventEnd: ''
+          }
+          this.close()
+          this.showToast("Successfully added the event")
+        })
+        .catch((err) => {
+          this.showToast(err.response, 'error')
+        })
+        .finally(() => {
+          this.isLoading = false
         })
 
-        if (!response.ok) {
-          throw new Error('Server responded with an error!')
-        }
-        this.$emit('event-added')
-        this.event = { name: '', description: '', eventType: 'Music', eventStart: '', eventEnd: '' }
-        this.close()
-
-      } catch (err) {
-        console.error('Failed to add event:', err)
-        alert('An error occurred. Please try again.')
-      } finally {
-        this.isLoading = false
-      }
     },
   },
Index: ReserveNGo-frontend/src/components/Project/Event/EditEventModal.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/EditEventModal.vue	(revision 420a2dd87c002908545df9e252877014a3e3400b)
+++ ReserveNGo-frontend/src/components/Project/Event/EditEventModal.vue	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
@@ -1,37 +1,230 @@
 <script>
-  import { userStore } from '@/PiniaStores/UserStore.js'
-
-  export default {
-    props: ['eventId'],
-    data(){
-      return {
-        event:{
-          name:'',
-          description:'',
-          eventType:'',
-          eventStart:'',
-          eventEnd:'',
-        },
-        user:userStore(),
-      }
-    },
-    methods:{
-      editEvent(){
-        fetch(`http://localhost:8080/api/local-manager/events/edit/${this.eventId}`,{
-          method:'PUT',
-          headers:{
-            Authorisation: this.user.getToken,
-          }
-        })
-      }
+import { userStore } from '@/PiniaStores/UserStore.js'
+import { useLocalManager } from '@/repository/LocalManager.ts'
+import { useToasts } from '@/composables/useToast.js'
+
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      required: true,
+    },
+    // --- NEW: Optional prop for the event to edit ---
+    // If this is passed, we're in "Edit Mode".
+    eventToEdit: {
+      type: Object,
+      default: null,
+    },
+  },
+  emits: ['close', 'event-added', 'event-updated'], // Added 'event-updated' emit
+
+  data() {
+    return {
+      // We now use a local copy for the form to avoid mutating props.
+      eventData: {},
+      user: userStore(),
+      isLoading: false,
+      showToast: useToasts().showToast,
     }
-  }
+  },
+
+  // --- NEW: Computed properties for a dynamic UI ---
+  computed: {
+    isEditMode() {
+      // The modal is in "Edit Mode" if an event prop was passed.
+      return !!this.eventToEdit;
+    },
+    modalTitle() {
+      return this.isEditMode ? 'Edit Event' : 'Add New Event';
+    },
+    saveButtonText() {
+      if (this.isLoading) {
+        return this.isEditMode ? 'Updating...' : 'Saving...';
+      }
+      return this.isEditMode ? 'Update Event' : 'Save Event';
+    },
+  },
+
+  // --- NEW: Watcher to initialize the form when the modal opens ---
+  watch: {
+    show(newVal) {
+      if (newVal) {
+        // When the modal is shown, populate the form.
+        this.initializeForm();
+      }
+    }
+  },
+
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+
+    // --- NEW: Helper to set up the form for either mode ---
+    initializeForm() {
+      if (this.isEditMode) {
+        // In Edit Mode, create a deep copy of the prop to avoid mutation.
+        // This also ensures the form data has the event's ID.
+        this.eventData = JSON.parse(JSON.stringify(this.eventToEdit));
+      } else {
+        // In Add Mode, set up a fresh, empty object.
+        this.eventData = {
+          name: '',
+          description: '',
+          eventType: 'LIVE_MUSIC', // A sensible default
+          eventStart: '',
+          eventEnd: '',
+        };
+      }
+    },
+
+    // --- NEW: Master submit handler ---
+    async handleSubmit() {
+      // This single method decides which action to take.
+      if (this.isEditMode) {
+        await this.updateEvent();
+      } else {
+        await this.addEvent();
+      }
+    },
+
+    // --- REFACTORED: Now uses async/await for cleaner syntax ---
+    async addEvent() {
+      if (this.isLoading) return;
+      this.isLoading = true;
+
+      if (!this.eventData.name || !this.eventData.eventStart || !this.eventData.eventEnd) {
+        alert('Please fill in all required fields (Name, Start Date, End Date).');
+        this.isLoading = false;
+        return;
+      }
+
+      try {
+        await useLocalManager.addEvent(this.eventData);
+        this.$emit('event-added');
+        this.close();
+        this.showToast("Successfully added the event", "success");
+      } catch (err) {
+        this.showToast(err.response?.data?.message || 'Failed to add event', 'error');
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    // --- NEW: Method for updating an existing event ---
+    async updateEvent() {
+      if (this.isLoading) return;
+      this.isLoading = true;
+
+      try {
+        // Assumes your updateEvent method needs the event object (with its ID).
+        await useLocalManager.updateEvent(this.eventData, this.eventData.id);
+        this.$emit('event-updated', this.eventData); // Emit the new data back
+        this.close();
+        this.showToast("Successfully updated the event", "success");
+      } catch (err) {
+        this.showToast(err.response?.data?.message || 'Failed to update event', 'error');
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+}
 </script>
 
 <template>
-<div class="container"></div>
+  <!-- Modal Backdrop (No changes) -->
+  <div v-if="show" class="modal-backdrop fade show"></div>
+
+  <!-- Modal -->
+  <div
+    v-if="show"
+    class="modal fade show"
+    style="display: block"
+    tabindex="-1"
+    aria-labelledby="eventFormModalLabel"
+    aria-modal="true"
+    role="dialog"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <!-- MODIFIED: Form now calls the master handleSubmit method -->
+        <form @submit.prevent="handleSubmit">
+          <div class="modal-header">
+            <!-- MODIFIED: Title is now dynamic -->
+            <h5 class="modal-title" id="eventFormModalLabel">{{ modalTitle }}</h5>
+            <button type="button" class="btn-close" @click="close" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <!-- All v-model instances are now bound to `eventData` instead of `event` -->
+
+            <!-- Event Name -->
+            <div class="mb-3">
+              <label for="eventName" class="form-label">Event Name</label>
+              <input type="text" class="form-control" id="eventName" v-model="eventData.name" required />
+            </div>
+
+            <!-- Event Description -->
+            <div class="mb-3">
+              <label for="eventDescription" class="form-label">Description</label>
+              <textarea
+                class="form-control"
+                id="eventDescription"
+                rows="3"
+                v-model="eventData.description"
+              ></textarea>
+            </div>
+
+            <!-- Event Type -->
+            <div class="mb-3">
+              <label for="eventType" class="form-label">Event Type</label>
+              <select class="form-select" id="eventType" v-model="eventData.eventType">
+                <option>LIVE_MUSIC</option>
+                <option>DJ_NIGHT</option>
+                <option>FOOD_SPECIAL</option>
+                <option>DRINK_SPECIAL</option>
+                <option>HAPPY_HOUR</option>
+              </select>
+            </div>
+
+            <!-- Event Start/End -->
+            <div class="row">
+              <div class="col-md-6 mb-3">
+                <label for="eventStart" class="form-label">Start Date & Time</label>
+                <input
+                  type="datetime-local"
+                  class="form-control"
+                  id="eventStart"
+                  v-model="eventData.eventStart"
+                  required
+                />
+              </div>
+              <div class="col-md-6 mb-3">
+                <label for="eventEnd" class="form-label">End Date & Time</label>
+                <input
+                  type="datetime-local"
+                  class="form-control"
+                  id="eventEnd"
+                  v-model="eventData.eventEnd"
+                  required
+                />
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="close">Close</button>
+            <!-- MODIFIED: Button text is now dynamic -->
+            <button type="submit" class="btn btn-primary" :disabled="isLoading">
+              <span v-if="isLoading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+              {{ saveButtonText }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
-
+/* No style changes needed */
 </style>
Index: ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue	(revision 420a2dd87c002908545df9e252877014a3e3400b)
+++ ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
@@ -2,7 +2,9 @@
 import { userStore } from '@/PiniaStores/UserStore.js'
 import { useLocales } from '@/repository/Locale'
+import {useLocalManager} from '@/repository/LocalManager.ts'
 import { config } from '@/constants/Api_config'
 import pankake from '@/components/ectd/easy-american-pancake-recipe.jpg'
 import { transformArray } from '@/mixins/utilFunctions'
+import {useToasts} from '@/composables/useToast.js'
 
 
@@ -14,7 +16,9 @@
       itemsPerSlide: 3,
       showEditModal: false,
+      showToast: useToasts().showToast,
     }
   },
   props: ['allEvents'],
+  emits: ['event-deleted', 'edit-started'],
 
   // 2. COMPUTED: Create a property that automatically recalculates when its dependencies change.
@@ -70,17 +74,12 @@
     },
     deleteEvent(eventId){
-      fetch(`http://localhost:8080/api/local-manager/delete-event/${eventId}`, {
-          method: 'DELETE',
-        headers: {
-            Authorization: this.userStore_.getToken,
-        }
-      })
-        .then(res=>{
-          if (res.ok){
-            this.$emit('event-deleted', eventId)
-          }
+      useLocalManager.deleteEvent(eventId)
+        .then(() => {
+          this.$emit('event-deleted', eventId)
+          this.showToast("Successfully deleted event")
         })
-
-        .catch((err)=>console.log(err))
+        .catch((err)=> {
+          this.showToast(err.response, 'error')
+        })
     }
   },
@@ -127,6 +126,6 @@
                   </div>
                 </div>
-                <button class="btn btn-dark " @click="showEditModal==true">Edit event</button>
-                <button class="btn btn-danger " @click="deleteEvent(event.id)">Delete event</button>
+                <button v-if="userStore_.isLocaleManager" class="btn btn-dark " @click="$emit('edit-started', event.id)">Edit event</button>
+                <button v-if="userStore_.isLocaleManager" class="btn btn-danger " @click="deleteEvent(event.id)">Delete event</button>
               </div>
             </div>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 420a2dd87c002908545df9e252877014a3e3400b)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
@@ -13,8 +13,11 @@
 import ManagerFileInput from '@/components/Project/Utility/ManagerFileInput.vue'
 import HorizontalScroller from '@/components/Project/Utility/HorizontalScroller.vue'
-import AddEventModal from '@/components/Project/Event/AddEventModal.vue'
+import AddEventModal from '@/components/Project/Event/EditEventModal.vue'
+import {useToasts} from '@/composables/useToast.js'
+import LoadingIcon from '@/components/Project/Utility/LoadingIcon.vue'
 
 export default {
   components: {
+    LoadingIcon,
     HorizontalScroller,
     events_carousel,
@@ -75,6 +78,21 @@
       //END UPLOADINg files state
 
+      //loading details
+      isSaveChangesLoading: false,
+      //END loading details
+
       isAddEventModalVisible: false,
+
+
+      //Edit Event
+      isEventModalVisible: false,
+      targetEditEvent: null,
+      //End Edit event
+
+      //Toast
+      showToast: useToasts().showToast,
+      //Toast end
     }
+
   },
   computed: {
@@ -111,7 +129,9 @@
       useLocalManager
         .deletePhoto({ localPhotosUrls })
-        .then((response) => console.log('SUCCESUFL DELATION', response))
+        .then((response) => {
+          this.showToast("Successfully deleted a locale image")
+        })
         .catch((error) => {
-          console.log('UNSUCCESFUL DELATION', error.rawResponse)
+          this.showToast(error.response, 'error')
           this.locale.localPhotos.push(image)
         })
@@ -175,7 +195,13 @@
           })
           this.$refs.uploadLogoInputRef.reset()
+          this.showToast("Successfully uploaded the logo")
         })
         .catch((error) => {
-          console.log(error)
+          if (error.status === 409) {
+            this.showToast(error.response, 'error')
+          }
+          else {
+            this.showToast("You do not have permission to make this request", 'error')
+          }
         })
         .finally(() => {
@@ -195,9 +221,16 @@
         .uploadImage(formData)
         .then((response) => {
-          console.log('SUCCESFUL UPLOAD', response)
           this.fetchLocaleData()
           this.$refs.uploadPhotoInputRef.reset()
-        })
-        .catch((error) => console.log('Unable To upload image', error))
+          this.showToast("Successfully uploaded the photo")
+        })
+        .catch((error) => {
+          if (error.status === 409) {
+            this.showToast(error.response, 'error')
+          }
+          else {
+            this.showToast("You do not have permission to make this request", 'error')
+          }
+        })
         .finally(() => {
           this.isPhotoUploading = false
@@ -216,4 +249,5 @@
     },
     saveLocalChanges() {
+      this.isSaveChangesLoading = true;
       // Prepare the payload for saving. The `workingHours` property is sent as-is.
       const payload = { ...this.locale }
@@ -221,28 +255,17 @@
       delete payload.eventsForCarousel
 
-      fetch(`http://localhost:8080/api/local-manager/my-local/edit`, {
-        method: 'PUT',
-        headers: {
-          Authorization: this.userStore.getToken,
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(payload),
-      })
+      useLocalManager.saveDetailChanges(payload)
         .then((res) => {
-          if (!res.ok) {
-            this.locale = this.cachedLocale // Revert on failure
-            alert('Failed to save changes. Please try again.')
-            throw new Error(`Server responded with status: ${res.status}`)
-          }
+          this.cachedLocale = null
+          this.showToast("Successfully updated")
+          this.fetchLocaleData()
+        })
+        .catch((error) => {
+          this.locale = this.cachedLocale // Revert on failure
+          this.showToast(error.response, 'error')
+        })
+        .finally(() => {
+          this.isSaveChangesLoading = false
           this.isEditing = false
-          this.cachedLocale = null
-          return res.json()
-        })
-        .then(() => {
-          console.log('Successfully updated.')
-          this.fetchLocaleData() // Refresh data to see the changes
-        })
-        .catch((error) => {
-          console.error('Error updating local:', error)
         })
     },
@@ -253,5 +276,10 @@
     addEvent() {
       this.fetchLocaleData()
-      this.isAddEventModalVisible = false
+      this.isModalVisible = false
+    },
+    startEditingEvent(eventId){
+      this.targetEditEvent = this.locale.events.find(event=>event.id === eventId);
+      console.log("TARGET EDIT EVENT", this.targetEditEvent)
+      this.isEventModalVisible = true;
     }
   },
@@ -455,10 +483,10 @@
 
             <div class="mb-2 row">
-              <events_carousel :all-events="eventsForCarousel" @event-deleted="deleteEvent" />
+              <events_carousel @edit-started="startEditingEvent" :all-events="eventsForCarousel" @event-deleted="deleteEvent" />
             </div>
             <button
               v-if="userStore.isLocaleManager"
               class="btn btn-primary btn-sm mb-2"
-              @click="isAddEventModalVisible = true"
+              @click="isEventModalVisible = true"
             >
               <i class="fas fa-plus me-1"></i> Add Event
@@ -482,5 +510,7 @@
                 <template v-else>
                   <button class="btn btn-success" @click="saveLocalChanges">
-                    <i class="fas fa-save me-1"></i> Save
+                    <i v-if="!isSaveChangesLoading" class="fas fa-save me-1"></i>
+                    <span v-else><LoadingIcon></LoadingIcon></span>
+                    Save
                   </button>
                   <button class="btn btn-secondary" @click="cancelEditing">
@@ -503,7 +533,9 @@
   </div>
   <AddEventModal
-    :show="isAddEventModalVisible"
-    @close="isAddEventModalVisible = false"
+    :show="isEventModalVisible"
+    @close="isEventModalVisible = false; targetEditEvent=null"
     @event-added="addEvent"
+    @event-updated="addEvent"
+    :event-to-edit="targetEditEvent"
   />
 </template>
Index: ReserveNGo-frontend/src/components/Project/Utility/LoadingIcon.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/LoadingIcon.vue	(revision 420a2dd87c002908545df9e252877014a3e3400b)
+++ ReserveNGo-frontend/src/components/Project/Utility/LoadingIcon.vue	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
@@ -1,4 +1,4 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
     <g>
       <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity="0.14" />
Index: ReserveNGo-frontend/src/components/Project/Utility/ToastContainer.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/ToastContainer.vue	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
+++ ReserveNGo-frontend/src/components/Project/Utility/ToastContainer.vue	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
@@ -0,0 +1,59 @@
+<template>
+  <TransitionGroup tag="div" name="toast-stack" class="toast-container">
+    <ToastNotification
+      v-for="toast in toasts"
+      :key="toast.id"
+      :message="toast.message"
+      :type="toast.type"
+      :duration="toast.duration"
+      :id="toast.id"
+      @dismiss="removeToast"
+    />
+  </TransitionGroup>
+</template>
+
+<script>
+import ToastNotification from './ToastNotification.vue';
+import {useToasts} from '@/composables/useToast.js'
+
+export default {
+  name: 'ToastContainer',
+  components: { ToastNotification },
+  setup() {
+    const { toasts, removeToast } = useToasts();
+
+    return {
+      toasts,
+      removeToast,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.toast-container {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 9999;
+}
+
+/* --- Transitions for TransitionGroup --- */
+
+/* 1. Enter/Leave transitions (slide in/out from the right) */
+.toast-stack-enter-active,
+.toast-stack-leave-active {
+  transition: all 0.5s ease;
+}
+.toast-stack-enter-from,
+.toast-stack-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+/* 2. Move transition (the magic for smooth stacking) */
+/* This is applied when items in the list change position */
+.toast-stack-move {
+  transition: transform 0.4s ease-out;
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Utility/ToastNotification.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/ToastNotification.vue	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
+++ ReserveNGo-frontend/src/components/Project/Utility/ToastNotification.vue	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
@@ -0,0 +1,74 @@
+<template>
+  <div :class="['toast-notification', `toast--${type}`]">
+    <span class="toast-message">{{ message }}</span>
+    <div
+      class="toast-timer"
+      :style="{ animationDuration: `${duration}ms` }"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ToastNotification',
+  props: {
+    message: { type: String, required: true },
+    type: { type: String, default: 'success' },
+    duration: { type: Number, default: 5000 },
+    id: { type: [String, Number], required: true },
+  },
+  emits: ['dismiss'],
+  mounted() {
+    setTimeout(() => {
+      this.$emit('dismiss', this.id);
+    }, this.duration);
+  },
+};
+</script>
+
+<style scoped>
+@keyframes deplete {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0;
+  }
+}
+
+.toast-notification {
+  width: 320px;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  color: white;
+  position: relative;
+  overflow: hidden;
+}
+
+.toast--success {
+  background-color: #28a745;
+}
+.toast--error {
+  background-color: #dc3545;
+}
+
+.toast-message {
+  font-weight: 500;
+}
+
+.toast-timer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 4px;
+  background-color: rgba(255, 255, 255, 0.4);
+
+  animation-name: deplete;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+</style>
Index: ReserveNGo-frontend/src/composables/useToast.js
===================================================================
--- ReserveNGo-frontend/src/composables/useToast.js	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
+++ ReserveNGo-frontend/src/composables/useToast.js	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
@@ -0,0 +1,29 @@
+import { readonly, reactive } from 'vue';
+
+const toasts = reactive([]);
+
+function showToast(message, type = 'success', duration = 5000) {
+  const id = Date.now() + Math.random();
+
+  toasts.push({
+    id,
+    message,
+    type,
+    duration,
+  });
+}
+
+function removeToast(id) {
+  const index = toasts.findIndex(toast => toast.id === id);
+  if (index > -1) {
+    toasts.splice(index, 1);
+  }
+}
+
+export function useToasts() {
+  return {
+    toasts: readonly(toasts),
+    showToast,
+    removeToast,
+  };
+}
Index: ReserveNGo-frontend/src/mixins/utilFunctions.js
===================================================================
--- ReserveNGo-frontend/src/mixins/utilFunctions.js	(revision 420a2dd87c002908545df9e252877014a3e3400b)
+++ ReserveNGo-frontend/src/mixins/utilFunctions.js	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
@@ -9,8 +9,8 @@
 export function transformArray(arr, howMany, doDateEdit = true) {
 
-
+  const copiedArray = JSON.parse(JSON.stringify(arr));
 
   if (doDateEdit) {
-  arr.forEach(item => {
+  copiedArray.forEach(item => {
     item.eventEnd = transformDate(item.eventEnd)
     item.eventStart = transformDate(item.eventStart)
@@ -20,5 +20,5 @@
   let newArray = []
   for (let i = 0; i<arr.length; i+=howMany) {
-    newArray.push(arr.slice(i, i + howMany))
+    newArray.push(copiedArray.slice(i, i + howMany))
   }
   return newArray;
Index: ReserveNGo-frontend/src/repository/LocalManager.ts
===================================================================
--- ReserveNGo-frontend/src/repository/LocalManager.ts	(revision 420a2dd87c002908545df9e252877014a3e3400b)
+++ ReserveNGo-frontend/src/repository/LocalManager.ts	(revision e2286fc336ef0aeee6353acf64555a2a06eb7365)
@@ -29,4 +29,7 @@
     return this.httpClient.get('my-local');
   }
+  saveDetailChanges(payload): Promise<any> {
+    return this.httpClient.put('my-local/edit', payload);
+  }
 
   addEvent(formData: FormData): Promise<any> {
@@ -34,4 +37,11 @@
   }
 
+  updateEvent(formData: FormData, eventId): Promise<any> {
+    return this.httpClient.put(`events/edit/${eventId}`, formData)
+  }
+  deleteEvent(eventId): Promise<any> {
+    return this.httpClient.delete(`delete-event/${eventId}`)
+  }
+
 }