Index: ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision b6e5d263385871d2fd2758369ed56830fc4387ad)
+++ ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision 166f25df42e476b2f2ee0cd31dba64cc8a25214b)
@@ -39,9 +39,13 @@
   <nav class="navbar navbar-expand-lg navbar-dark custom-background-nav py-2 px-5 ">
     <div class="container-fluid">
-      <router-link to="/" class="navbar-brand d-flex align-items-center">
+      <router-link v-if="user.data.role !== 'ROLE_LOCAL_MANAGER'" to="/" class="navbar-brand d-flex align-items-center">
         <img src="/src/assets/rng_logo.png" alt="Logo" height="50" class="me-2" />
         <span class="fw-bold text-black">Reserve And Go</span>
       </router-link>
 
+      <div  v-if="user.data.role === 'ROLE_LOCAL_MANAGER'" class="navbar-brand d-flex align-items-center">
+        <img src="/src/assets/rng_logo.png" alt="Logo" height="50" class="me-2" />
+        <span class="fw-bold text-black">Reserve And Go</span>
+      </div>
 
       <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision b6e5d263385871d2fd2758369ed56830fc4387ad)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 166f25df42e476b2f2ee0cd31dba64cc8a25214b)
@@ -7,5 +7,5 @@
 import PlusAddImage from '@/components/Project/Utility/PlusAddImage.vue'
 import { useLocalManager } from '@/repository/LocalManager.ts'
-import {useUtility} from '@/repository/Utility.ts'
+import {useUtility} from '@/repository/utility.ts'
 
 export default {
@@ -29,32 +29,59 @@
         menuPhoto: '',
         menuLink: '',
-        contact: '',
+        contact: {
+          phone: '',
+          email: '',
+          socialLinks: {}
+        },
         logo: '',
       },
+
+      eventsForCarousel: [],
       local_id: this.$route.params['id'],
       locale_logo_base64encoded: '',
       userStore: userStore(),
       router: useRouter(),
+      isEditing: false,
+      cachedLocale: null,
     }
   },
   computed: {
     roundedRating() {
-      return Math.round(this.locale.averageRating * 2) / 2
-    },
+      const rating = parseFloat(this.locale.averageRating);
+      if (isNaN(rating)) return 0;
+      return Math.round(rating * 2) / 2
+    },
+    servicesAsString: {
+      get() {
+        return Array.isArray(this.locale.services) ? this.locale.services.join(', ') : '';
+      },
+      set(newValue) {
+        this.locale.services = newValue.split(',').map(s => s.trim()).filter(Boolean);
+      }
+    }
   },
   mounted() {
-    fetch(`http://localhost:8080/api/locals/${this.local_id}`)
-      .then((res) => res.json())
-      .then((data) => {
-        this.locale = data
-        console.log("PRINTING WORKING HOURS BEFORE THEY DONT WORK", this.locale.workingHours)
-        this.locale.events = transformArray(this.locale.events, 2);
-        useUtility.fetchImageBase64(this.locale.logo)
-          .then((base64) => {this.locale_logo_base64encoded = base64});
-      })
-      .catch((err) => console.log('Error in Locale_', err))
-
+    this.fetchLocaleData();
   },
   methods: {
+    fetchLocaleData() {
+      fetch(`http://localhost:8080/api/locals/${this.local_id}`)
+        .then((res) => res.json())
+        .then((data) => {
+          this.locale = data;
+          // Safety checks for nested objects
+          if (!this.locale.contact) {
+            this.locale.contact = { phone: '', email: '' };
+          }
+          if (!this.locale.services) {
+            this.locale.services = [];
+          }
+          // Use a separate property for display-transformed events
+          this.eventsForCarousel = transformArray(this.locale.events, 2);
+          useUtility.fetchImageBase64(this.locale.logo)
+            .then((base64) => {this.locale_logo_base64encoded = base64});
+        })
+        .catch((err) => console.log('Error fetching locale data:', err))
+    },
     addToFavourites() {
       fetch(`http://localhost:8080/api/customer/favourite-locals/add/${this.locale.id}`, {
@@ -67,17 +94,55 @@
     uploadLogo() {
       const profilePictureFile = document.getElementById('logoPhotoInput').files[0];
-      if (!profilePictureFile) {console.warn("Unable to find the logoPhotoInput"); return;}
-
+      if (!profilePictureFile) {console.warn("No logo file selected"); return;}
       const formData = new FormData();
       formData.append('logo', profilePictureFile);
-
       useLocalManager.uploadLogo(formData)
         .then((imagePath) => useUtility.fetchImageBase64(imagePath)
-          .then((base64) => {this.locale_logo_base64encoded = base64})
-          .catch((error) => console.log(error)))
+          .then((base64) => {this.locale_logo_base64encoded = base64}))
         .catch((error) => {console.log(error)});
-
-
-    }
+    },
+    startEditing() {
+      // Create a deep copy of the current state to allow for cancellation
+      this.cachedLocale = JSON.parse(JSON.stringify(this.locale));
+      this.isEditing = true;
+    },
+    cancelEditing() {
+      // Restore the original data from the cached copy
+      this.locale = this.cachedLocale;
+      this.isEditing = false;
+      this.cachedLocale = null;
+    },
+    saveLocalChanges(){
+      // Prepare the payload for saving. The `workingHours` property is sent as-is.
+      const payload = { ...this.locale };
+      // Remove the display-only property before sending
+      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),
+      })
+        .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.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);
+        });
+    },
   },
 }
@@ -100,5 +165,4 @@
             <PlusAddImage></PlusAddImage>
           </div>
-
           <button @click="uploadLogo" class="btn btn-dark m-3">Save Logo</button>
         </div>
@@ -107,65 +171,67 @@
         <div class="col-12 col-md-8">
           <div class="card p-4 shadow-sm">
-            <h3 class="mb-3">{{ locale.name }}</h3>
-
-            <div class="mb-3 text-muted">
-              <i class="fas fa-map-marker-alt me-2"></i> {{ locale.address }}
-            </div>
-
-            <!-- Star Rating -->
+            <!-- Name -->
+            <h3 v-if="!isEditing" class="mb-3">{{ locale.name }}</h3>
+            <div v-else class="mb-3">
+              <label for="nameInput" class="form-label fw-bold">Name</label>
+              <input type="text" id="nameInput" class="form-control" v-model="locale.name">
+            </div>
+
+            <!-- Address -->
+            <div v-if="!isEditing" class="mb-3 text-muted"><i class="fas fa-map-marker-alt me-2"></i> {{ locale.address }}</div>
+            <div v-else class="mb-3">
+              <label for="addressInput" class="form-label fw-bold">Address</label>
+              <input type="text" id="addressInput" class="form-control" v-model="locale.address">
+            </div>
+
+            <!-- Star Rating (Not Editable) -->
             <div class="mb-3 d-flex align-items-center">
-              <div class="text-warning me-2">
-                <i
-                  v-for="n in 5"
-                  :key="n"
-                  :class="[
-                    roundedRating >= n
-                      ? 'fas fa-star'
-                      : roundedRating >= n - 0.5
-                        ? 'fas fa-star-half-alt'
-                        : 'far fa-star',
-                  ]"
-                ></i>
-              </div>
+              <div class="text-warning me-2"><i v-for="n in 5" :key="n" :class="[ roundedRating >= n ? 'fas fa-star' : roundedRating >= n - 0.5 ? 'fas fa-star-half-alt' : 'far fa-star', ]"></i></div>
               <small class="text-muted">({{ locale.averageRating }})</small>
             </div>
 
-            <div class="mb-3">
-              <p>{{ locale.description }}</p>
-
-<!--                          <stong>Working HOurs</stong>
-              <p>{{locale.workingHours}}</p>-->
-
-              <!--              <p><strong>Working Hours:</strong> {{ locale.workingHours }}</p>-->
-              <!--              <p><strong>Working Hours: </strong></p>-->
+            <!-- Description -->
+            <div class="mb-3">
+              <h6 class="fw-bold">Description</h6>
+              <p v-if="!isEditing">{{ locale.description }}</p>
+              <textarea v-else id="descriptionInput" class="form-control" rows="4" v-model="locale.description"></textarea>
+            </div>
+
+            <!-- Working Hours (Read-only) -->
+            <div class="mb-3">
+              <h6 class="fw-bold">Working Hours</h6>
+              <!-- This component simply displays whatever data it is given -->
               <WorkingHoursTable :workingHours="locale.workingHours"></WorkingHoursTable>
-
-              <!-- Contact Info -->
-              <div class="mb-3">
-                <strong>Contact:</strong>
-                <ul>
-                  <li v-if="locale.contact.phone">
-                    <strong>Phone:</strong> {{ locale.contact.phone }}
-                  </li>
-                  <li v-if="locale.contact.email">
-                    <strong>Email:</strong> {{ locale.contact.email }}
-                  </li>
-                  <li v-if="Object.keys(locale.contact.socialLinks || {}).length">
-                    <strong>Social:</strong>
-                    <ul>
-                      <li v-for="(link, name) in locale.contact.socialLinks" :key="name">
-                        {{ name }}: <a :href="link" target="_blank">{{ link }}</a>
-                      </li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>
-
-              <p>
-                <strong>Menu:</strong>
-                <a v-if="locale.menuLink" :href="locale.menuLink" target="_blank">{{
-                  locale.menuLink
-                }}</a>
-              </p>
+            </div>
+
+            <!-- Contact Info -->
+            <div class="mb-3">
+              <h6 class="fw-bold">Contact</h6>
+              <ul v-if="!isEditing" class="list-unstyled">
+                <li v-if="locale.contact.phone"><strong>Phone:</strong> {{ locale.contact.phone }}</li>
+                <li v-if="locale.contact.email"><strong>Email:</strong> {{ locale.contact.email }}</li>
+              </ul>
+              <div v-else class="mt-2">
+                <div class="mb-2">
+                  <label for="phoneInput" class="form-label">Phone</label>
+                  <input type="text" id="phoneInput" class="form-control" v-model="locale.contact.phone">
+                </div>
+                <div class="mb-2">
+                  <label for="emailInput" class="form-label">Email</label>
+                  <input type="email" id="emailInput" class="form-control" v-model="locale.contact.email">
+                </div>
+              </div>
+            </div>
+
+            <!-- Menu Link -->
+            <div class="mb-3">
+              <h6 class="fw-bold">Menu</h6>
+              <template v-if="!isEditing">
+                <a v-if="locale.menuLink" :href="locale.menuLink" target="_blank">{{ locale.menuLink }}</a>
+                <span v-else class="text-muted">Not available.</span>
+              </template>
+              <div v-else>
+                <input type="url" id="menuLinkInput" class="form-control" v-model="locale.menuLink" placeholder="https://example.com/menu">
+              </div>
             </div>
 
@@ -173,36 +239,35 @@
             <div class="mb-4">
               <h6 class="fw-bold">Services</h6>
-              <div class="d-flex flex-wrap gap-2">
-                <span
-                  v-for="service in locale.services"
-                  :key="service"
-                  class="badge bg-primary text-light"
-                >
-                  {{ service }}
-                </span>
-              </div>
-            </div>
-
+              <div v-if="!isEditing" class="d-flex flex-wrap gap-2">
+                <span v-for="service in locale.services" :key="service" class="badge bg-primary text-light">{{ service }}</span>
+              </div>
+              <div v-else>
+                <label for="servicesInput" class="form-label">Services (comma-separated)</label>
+                <input type="text" id="servicesInput" class="form-control" v-model="servicesAsString">
+              </div>
+            </div>
+
+            <!-- Events Carousel (Read-only) -->
             <h6 class="fw-bold">Events</h6>
             <div class="mb-3 row">
-              <events_carousel :all-events="this.locale.events" />
-            </div>
+              <events_carousel :all-events="eventsForCarousel" />
+            </div>
+
             <!-- Main Action Buttons -->
             <div class="d-flex flex-wrap gap-2 mb-4">
-              <button class="btn btn-dark" v-if="this.userStore.data.role === 'ROLE_CUSTOMER'">
-                <i class="fas fa-calendar-check me-1"></i> Reserve
-              </button>
-
-              <button
-                class="btn btn-outline-danger"
-                v-if="this.userStore.data.role === 'ROLE_CUSTOMER'"
-                @click="addToFavourites"
-              >
-                <i class="fas fa-heart me-1"></i> Add to Favourites
-              </button>
-
-              <router-link to="/" class="btn btn-outline-secondary">
-                <i class="fas fa-arrow-left me-1"></i> Back to Restaurants
-              </router-link>
+              <template v-if="userStore.data.role === 'ROLE_CUSTOMER'">
+                <button class="btn btn-dark"><i class="fas fa-calendar-check me-1"></i> Reserve</button>
+                <button class="btn btn-outline-danger" @click="addToFavourites"><i class="fas fa-heart me-1"></i> Add to Favourites</button>
+              </template>
+
+              <template v-if="userStore.data.role === 'ROLE_LOCAL_MANAGER'">
+                <button v-if="!isEditing" class="btn btn-dark" @click="startEditing"><i class="fas fa-edit me-1"></i> Edit Details</button>
+                <template v-else>
+                  <button class="btn btn-success" @click="saveLocalChanges"><i class="fas fa-save me-1"></i> Save</button>
+                  <button class="btn btn-secondary" @click="cancelEditing"><i class="fas fa-times me-1"></i> Cancel</button>
+                </template>
+              </template>
+
+              <router-link to="/" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-1"></i> Back</router-link>
             </div>
           </div>
@@ -225,3 +290,3 @@
   height: auto;
 }
-</style>
+</style>```
Index: ReserveNGo-frontend/src/components/Project/Restaurant/working-hours-table.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/working-hours-table.vue	(revision b6e5d263385871d2fd2758369ed56830fc4387ad)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/working-hours-table.vue	(revision 166f25df42e476b2f2ee0cd31dba64cc8a25214b)
@@ -27,15 +27,12 @@
       </thead>
       <tbody>
-        <!--      {{ wh.dayOfWeek }}: {{ wh.openTime }} - {{ wh.closeTime }}-->
-        <tr>
+       <tr>
           <td v-for="(wh, index) in workingHours" :key="index" class="time">
             {{ wh.openTime }} - {{ wh.closeTime }}
           </td>
-<!--                  <td class="time">09:00 - 17:00</td>
-        <td class="time">09:00 - 17:00</td>
-        <td class="time">09:00 - 17:00</td>-->
+
         <td class="status-closed">Closed</td>
         <td class="status-closed">Closed</td>
-<!--        <td class="time">09:00 - 21:00</td>-->
+
         </tr>
       </tbody>