Index: ReserveNGo-frontend/src/components/Project/Manager/ManagerDashboard.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Manager/ManagerDashboard.vue	(revision 24773993a3920d696f87df9772f0ae52ca96af83)
+++ ReserveNGo-frontend/src/components/Project/Manager/ManagerDashboard.vue	(revision 24773993a3920d696f87df9772f0ae52ca96af83)
@@ -0,0 +1,282 @@
+<script>
+import { userStore } from '@/PiniaStores/UserStore.js'
+
+export default {
+  data() {
+    return {
+      workers: [],
+      workersForLocal: [],
+      localId: null,
+      user: userStore(),
+      showAddWorkerModal: false,
+      positions: ['CHEF', 'COOK', 'WAITER', 'BARTENDER', 'MANAGER'],
+      sortKey: '',
+      sortOrder: 'asc',
+    }
+  },
+  computed: {
+    sortedWorkers() {
+      if (!this.sortKey) return this.workersForLocal;
+
+      return [...this.workersForLocal].sort((a, b) => {
+        let valueA = a[this.sortKey] || '';
+        let valueB = b[this.sortKey] || '';
+
+        if (typeof valueA === 'string') {
+          valueA = valueA.toLowerCase();
+          valueB = valueB.toLowerCase();
+        }
+
+        if (valueA < valueB) return this.sortOrder === 'asc' ? -1 : 1;
+        if (valueA > valueB) return this.sortOrder === 'asc' ? 1 : -1;
+        return 0;
+      });
+    }
+  },
+  methods: {
+    sortBy(key) {
+      if (this.sortKey === key) {
+        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
+      } else {
+        this.sortKey = key;
+        this.sortOrder = 'asc';
+      }
+    },
+    fetchWorkersForLocal() {
+      fetch('http://localhost:8080/api/local-manager/local-workers', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: this.user.getToken,
+        },
+      })
+        .then((res) => res.json())
+        .then((data) => (this.workersForLocal = data))
+        .catch((err) => console.log(err))
+    },
+    fetchWorkers() {
+      fetch('http://localhost:8080/api/local-manager/workers', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: this.user.getToken,
+        },
+      })
+        .then((res) => res.json())
+        .then((data) => (this.workers = data))
+        .catch((err) => console.log(err))
+    },
+    fetchLocal() {
+      fetch('http://localhost:8080/api/local-manager/my-local', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: this.user.getToken,
+        },
+      })
+        .then((res) => res.json())
+        .then((data) => (this.localId = data.id))
+        .catch((err) => console.log(err))
+    },
+    assignWorker(workerId) {
+      fetch(`http://localhost:8080/api/local-manager/assign/${workerId}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: this.user.getToken,
+        },
+      })
+        .then((response) => {
+          if (!response.ok) throw new Error('Failed to Assign worker.')
+          this.workers = this.workers.filter((worker) => worker.workerId !== workerId)
+          this.fetchWorkers()
+          this.fetchWorkersForLocal()
+        })
+        .catch((err) => console.log(err))
+    },
+    removeWorker(workerId) {
+      fetch(`http://localhost:8080/api/local-manager/remove/${workerId}`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: this.user.getToken,
+        },
+      })
+        .then((response) => {
+          if (!response.ok) throw new Error('Failed to remove worker')
+          this.fetchWorkersForLocal()
+          this.fetchWorkers()
+        })
+        .catch((err) => console.log(err))
+    },
+    changeWorkerPosition(workerId, position) {
+      fetch(`http://localhost:8080/api/local-manager/change-position/${workerId}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: this.user.getToken,
+        },
+        body: JSON.stringify({
+          position: position,
+        }),
+      })
+        .then((response) => {
+          if (!response.ok) throw new Error('Failed to change position');
+          this.fetchWorkersForLocal();
+        })
+        .catch(err => console.error('Error changing position:', err));
+    },
+    openAddWorkerModal() {
+      this.fetchWorkers()
+      this.showAddWorkerModal = true
+    },
+  },
+  mounted() {
+    this.fetchLocal()
+    this.fetchWorkersForLocal()
+  },
+}
+</script>
+
+<template>
+  <div class="container mt-4">
+    <h3 class="mb-3">Workers Overview</h3>
+
+    <!-- Add Worker Modal -->
+    <div
+      v-if="showAddWorkerModal"
+      class="modal fade show d-block"
+      tabindex="-1"
+      style="background: rgba(0, 0, 0, 0.5)"
+    >
+      <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Add Worker</h5>
+            <button type="button" class="btn-close" @click="showAddWorkerModal = false"></button>
+          </div>
+          <div class="modal-body">
+            <ul class="list-group">
+              <li
+                v-for="worker in workers"
+                :key="worker.id"
+                class="list-group-item d-flex justify-content-between align-items-center"
+              >
+                <span>{{ worker.firstName }} {{ worker.lastName }} - {{ worker.email }}</span>
+                <button class="btn btn-sm btn-success" @click="assignWorker(worker.id)">Add</button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Workers Table -->
+    <div class="table-responsive shadow-sm table-container">
+      <table class="table table-striped table-hover align-middle">
+        <thead class="table-light">
+        <tr>
+          <th style="cursor: pointer;" @click="sortBy('firstName')">
+            First Name
+            <span v-if="sortKey === 'firstName'">{{ sortOrder === 'asc' ? '↑' : '↓' }}</span>
+          </th>
+          <th style="cursor: pointer;" @click="sortBy('lastName')">
+            Last Name
+            <span v-if="sortKey === 'lastName'">{{ sortOrder === 'asc' ? '↑' : '↓' }}</span>
+          </th>
+          <th>Email</th>
+          <th>Phone Number</th>
+          <th style="cursor: pointer;" @click="sortBy('position')">
+            Position
+            <span v-if="sortKey === 'position'">{{ sortOrder === 'asc' ? '↑' : '↓' }}</span>
+          </th>
+          <th class="text-end">Actions</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="worker in sortedWorkers" :key="worker.id">
+          <td>{{ worker.firstName }}</td>
+          <td>{{ worker.lastName }}</td>
+          <td>{{ worker.email }}</td>
+          <td>{{ worker.phoneNumber }}</td>
+          <td>
+            <select
+              class="form-select form-select-sm"
+              :value="worker.position"
+              @change="changeWorkerPosition(worker.id, $event.target.value)"
+            >
+              <option :value="null" selected disabled>
+                {{ worker.position ? worker.position : 'Assign Position' }}
+              </option>
+              <option v-for="pos in positions" :key="pos" :value="pos">
+                {{ pos }}
+              </option>
+            </select>
+          </td>
+          <td class="text-end">
+            <button class="btn btn-sm btn-outline-danger" @click="removeWorker(worker.id)">Remove</button>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Add Worker Button -->
+    <button class="btn btn-success mt-3" @click="openAddWorkerModal">+ Add Worker</button>
+  </div>
+</template>
+
+<style scoped>
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+  overflow: hidden;
+}
+
+.table-container {
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+
+table {
+  font-size: 0.95rem;
+  table-layout: fixed;
+  width: 100%;
+}
+
+th,
+td {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+thead th {
+  position: sticky;
+  top: 0;
+  background-color: #f8f9fa;
+  z-index: 2;
+  user-select: none;
+}
+
+th span {
+  margin-left: 5px;
+  font-size: 0.8rem;
+}
+
+.modal {
+  display: block;
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision 6df993513b3a1035922e8be54718dc8296479f54)
+++ ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision 24773993a3920d696f87df9772f0ae52ca96af83)
@@ -30,4 +30,5 @@
     if(this.user && this.user.data.role==="ROLE_LOCAL_MANAGER"){
       this.fetchLocalForManager();
+
     }
   }
@@ -60,4 +61,8 @@
           <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_MANAGER'">
             <router-link :to="`/more_details/${this.managerLocalId}`" class="nav-link text-black">My Restaurant</router-link>
+          </li>
+
+          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_MANAGER'">
+            <router-link to="/manager-dashboard" class="nav-link text-black">Dashboard</router-link>
           </li>
 
Index: ReserveNGo-frontend/src/router/index.js
===================================================================
--- ReserveNGo-frontend/src/router/index.js	(revision 6df993513b3a1035922e8be54718dc8296479f54)
+++ ReserveNGo-frontend/src/router/index.js	(revision 24773993a3920d696f87df9772f0ae52ca96af83)
@@ -11,4 +11,5 @@
 import AdminDashboard from '@/components/Project/Admin/AdminDashboard.vue'
 import LocaleNotAssigned from '@/components/Project/Manager/locale-not-assigned.vue'
+import ManagerDashboard from '@/components/Project/Manager/ManagerDashboard.vue'
 
 const router = createRouter({
@@ -60,4 +61,9 @@
       name: 'admin-dashboard',
       component: AdminDashboard,
+    },
+    {
+      path: '/manager-dashboard',
+      name: 'manager-dashboard',
+      component: ManagerDashboard,
     }
   ],