Index: src/main/java/com/zinemasterapp/zinemasterapp/controller/ProductController.java
===================================================================
--- src/main/java/com/zinemasterapp/zinemasterapp/controller/ProductController.java	(revision 62a052f7b2dd66d876c4e6200bf1bfd2e99d9979)
+++ src/main/java/com/zinemasterapp/zinemasterapp/controller/ProductController.java	(revision 99adf50bc33c245de97c9ab3d513a66edfbbc65c)
@@ -94,4 +94,24 @@
     }
 
+    @PutMapping("/{id}/add-quantity")
+    public ResponseEntity<?> addQuantity(@PathVariable String id, @RequestBody Map<String, Integer> payload) {
+        Optional<Product> productOpt = productRepository.findById(id);
+        if (productOpt.isEmpty()) {
+            return ResponseEntity.notFound().build();
+        }
+
+        Product product = productOpt.get();
+        int quantityToAdd = payload.getOrDefault("quantityToAdd", 0);
+        if (quantityToAdd <= 0) {
+            return ResponseEntity.badRequest().body("Invalid quantity");
+        }
+
+        product.setQuantity(product.getQuantity() + quantityToAdd);
+        productRepository.save(product);
+
+        return ResponseEntity.ok().build();
+    }
+
+
 
 }
Index: src/main/java/com/zinemasterapp/zinemasterapp/controller/UserController.java
===================================================================
--- src/main/java/com/zinemasterapp/zinemasterapp/controller/UserController.java	(revision 62a052f7b2dd66d876c4e6200bf1bfd2e99d9979)
+++ src/main/java/com/zinemasterapp/zinemasterapp/controller/UserController.java	(revision 99adf50bc33c245de97c9ab3d513a66edfbbc65c)
@@ -4,8 +4,14 @@
 import com.zinemasterapp.zinemasterapp.repository.UserRepository;
 
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
+import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.List;
 import java.util.Map;
+import java.util.Optional;
+import java.util.Random;
 
 @RestController
@@ -13,4 +19,7 @@
 @CrossOrigin(origins = "http://localhost:8082")
 public class UserController {
+
+    @Autowired
+    private PasswordEncoder passwordEncoder;//za da go enkodirame passwordot
 
     private final UserRepository userRepository;
@@ -31,3 +40,69 @@
         return ResponseEntity.ok().build();
     }
+    @GetMapping
+    public ResponseEntity<List<User>> getAllUsers() {
+        List<User> users = userRepository.findAll();
+        return ResponseEntity.ok(users);
+    }
+
+    @PutMapping("/{id}/role")
+    public ResponseEntity<?> updateUserRole(@PathVariable String id, @RequestBody Map<String, String> body) {//najlesno e so hash
+        Optional<User> userOpt = userRepository.findById(id);
+        if (userOpt.isEmpty()) return ResponseEntity.notFound().build();
+
+        String newRole = body.get("userType");
+        User user = userOpt.get();
+        user.setUserType(newRole);
+        userRepository.save(user);
+        return ResponseEntity.ok().build();
+    }
+
+    @PutMapping("/{id}/access")
+    public ResponseEntity<?> updateAccess(@PathVariable String id, @RequestBody Map<String, Integer> body) {
+        Optional<User> userOpt = userRepository.findById(id);
+        if (userOpt.isEmpty()) return ResponseEntity.notFound().build();
+
+        User user = userOpt.get();
+        user.setAccess(body.get("access"));
+        userRepository.save(user);
+        return ResponseEntity.ok().build();
+    }
+
+    @PostMapping
+    public ResponseEntity<?> createUser(@RequestBody User user) {
+        System.out.println("Stigna za " + user.getName());//MORA DA IMA ADRESA KADE RABOTI KORISNIKOT!!
+
+        String uniqueId;
+        do {
+            uniqueId = "U" + System.currentTimeMillis() + String.format("%03d", new Random().nextInt(1000));
+        } while (userRepository.existsById(uniqueId));
+        user.setId(uniqueId);
+
+        String username = generateUniqueUsername(user.getName(), user.getSurname());
+        user.setUsername(username);
+
+        user.setPassword(passwordEncoder.encode(user.getPassword()));
+
+        userRepository.save(user);
+
+        return ResponseEntity.ok().build();
+    }
+
+
+    private String generateUniqueUsername(String name, String surname) {
+        String baseUsername = name.toLowerCase() + "." + surname.toLowerCase();
+        String username = baseUsername;
+        int counter = 1;
+
+        while (userRepository.findByUsername(username).isPresent()) {
+            username = name.toLowerCase() + counter + "." + surname.toLowerCase();
+            counter++;
+        }
+
+        return username;
+    }
+
+
+
+
 }
Index: src/main/java/com/zinemasterapp/zinemasterapp/security/SecurityConfig.java
===================================================================
--- src/main/java/com/zinemasterapp/zinemasterapp/security/SecurityConfig.java	(revision 62a052f7b2dd66d876c4e6200bf1bfd2e99d9979)
+++ src/main/java/com/zinemasterapp/zinemasterapp/security/SecurityConfig.java	(revision 99adf50bc33c245de97c9ab3d513a66edfbbc65c)
@@ -22,5 +22,5 @@
 
     @Bean
-    public PasswordEncoder passwordEncoder() {
+    public PasswordEncoder passwordEncoder() {//ova go koristime vo usercontroller
         return new BCryptPasswordEncoder();//enkriptirani se passwords
     }
@@ -37,7 +37,10 @@
                 .cors(cors -> cors.configurationSource(corsConfigurationSource()))
                 .authorizeHttpRequests(auth -> auth
+                                .requestMatchers(HttpMethod.POST, "/api/users").permitAll()
                         .requestMatchers(HttpMethod.PUT, "/api/users/**").permitAll()
                         .requestMatchers(HttpMethod.GET, "/api/requests/**").permitAll()
+                                .requestMatchers(HttpMethod.GET, "/api/users/**").permitAll()
                                 .requestMatchers(HttpMethod.POST, "/api/products").permitAll()
+                                .requestMatchers(HttpMethod.PUT, "/api/products/**").permitAll()
                                 .requestMatchers(HttpMethod.PUT, "/api/requests/**").permitAll()// mora za put eksplicitno da kazam
                         .requestMatchers(
@@ -64,5 +67,5 @@
         config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "OPTIONS"));//koj metodi gi dozvoluvame
         config.setAllowedHeaders(List.of("*"));//koj headeri gi dozvoluvame
-        config.setAllowCredentials(false);//za cookies
+        config.setAllowCredentials(true);//za cookies
 
         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();//za koj URLS ova sea so go definiravme vazi
Index: zinemaster-frontend/src/components/AllRequests.vue
===================================================================
--- zinemaster-frontend/src/components/AllRequests.vue	(revision 62a052f7b2dd66d876c4e6200bf1bfd2e99d9979)
+++ zinemaster-frontend/src/components/AllRequests.vue	(revision 99adf50bc33c245de97c9ab3d513a66edfbbc65c)
@@ -2,111 +2,111 @@
 
   <header class="bg-dark text-white p-3 fixed-top shadow-sm">
-        <div class="container d-flex justify-content-between align-items-center">
-            <h4 class="mb-0">ZineMaster</h4>
-            <nav>
-                <router-link to="/main" class="btn btn-outline-light btn-sm me-2">Дома</router-link> 
-                <router-link to="/requests" class="btn btn-outline-light btn-sm me-2">Сите нарачки</router-link>
-                <button class="btn btn-outline-light btn-sm me-2" @click="logout">Logout</button>
-                <router-link to="/profile">
-                  <img :src="userProfileImage" alt="Profile" class="rounded-circle me-2 " style="width: 35px; height: 35px; object-fit: cover; border: 2px solid white; cursor: pointer;"/>
-                </router-link>
-            </nav>
-        </div>
-    </header>
-
-    <div class="d-flex justify-content-center flex-wrap gap-4 my-4 pt-5">
-
-  <!-- status -->
-  <div class="text-center">
-    <label class="form-label"><strong>Статус</strong></label>
-    <select v-model="selectedStatus" class="form-select form-select-sm">
-      <option value="all">Сите</option>
-      <option value="pending">Во тек</option>
-      <option value="approved">Одобрени</option>
-      <option value="rejected">Одбиени</option>
-    </select>
+    <div class="container d-flex justify-content-between align-items-center">
+      <h4 class="mb-0">ZineMaster</h4>
+      <nav>
+        <router-link to="/main" class="btn btn-outline-light btn-sm me-2">Дома</router-link>
+        <router-link to="/requests" class="btn btn-outline-light btn-sm me-2">Сите нарачки</router-link>
+        <button class="btn btn-outline-light btn-sm me-2" @click="logout">Logout</button>
+        <router-link to="/profile">
+          <img :src="userProfileImage" alt="Profile" class="rounded-circle me-2 " style="width: 35px; height: 35px; object-fit: cover; border: 2px solid white; cursor: pointer;"/>
+        </router-link>
+      </nav>
+    </div>
+  </header>
+
+  <div class="d-flex justify-content-center flex-wrap gap-4 my-4 pt-5">
+
+    <!-- status -->
+    <div class="text-center">
+      <label class="form-label"><strong>Статус</strong></label>
+      <select v-model="selectedStatus" class="form-select form-select-sm">
+        <option value="all">Сите</option>
+        <option value="pending">Во тек</option>
+        <option value="approved">Одобрени</option>
+        <option value="rejected">Одбиени</option>
+      </select>
+    </div>
+
+    <!-- datum -->
+    <div class="text-center">
+      <label class="form-label"><strong>Датум</strong></label>
+      <input type="date" v-model="selectedDate" class="form-control form-control-sm">
+
+      <div class="form-check mt-2">
+        <input class="form-check-input" type="radio" id="dateFrom" value="from" v-model="dateFilterType">
+        <label class="form-check-label" for="dateFrom">Од тој датум па натаму</label>
+      </div>
+      <div class="form-check">
+        <input class="form-check-input" type="radio" id="dateExact" value="exact" v-model="dateFilterType">
+        <label class="form-check-label" for="dateExact">Само на тој датум</label>
+      </div>
+
+
+    </div>
+
+    <!-- korisnik -->
+    <div class="text-center">
+      <label class="form-label"><strong>Корисник</strong></label>
+      <select v-model="selectedUser" class="form-select form-select-sm">
+        <option value="all">Сите</option>
+        <option v-for="u in uniqueUsers" :key="u" :value="u">{{ u }}</option>
+      </select>
+    </div>
+
   </div>
 
-  <!-- datum -->
-  <div class="text-center">
-    <label class="form-label"><strong>Датум</strong></label>
-    <input type="date" v-model="selectedDate" class="form-control form-control-sm">
-
-    <div class="form-check mt-2">
-  <input class="form-check-input" type="radio" id="dateFrom" value="from" v-model="dateFilterType">
-  <label class="form-check-label" for="dateFrom">Од тој датум па натаму</label>
-</div>
-<div class="form-check">
-  <input class="form-check-input" type="radio" id="dateExact" value="exact" v-model="dateFilterType">
-  <label class="form-check-label" for="dateExact">Само на тој датум</label>
-</div>
-
-
-  </div>
-
-  <!-- korisnik -->
-  <div class="text-center">
-    <label class="form-label"><strong>Корисник</strong></label>
-    <select v-model="selectedUser" class="form-select form-select-sm">
-      <option value="all">Сите</option>
-      <option v-for="u in uniqueUsers" :key="u" :value="u">{{ u }}</option>
-    </select>
-  </div>
-
-</div>
-
-   
-    <div class="container mt-3">
-        <h2 class="pb-3">Сите нарачки</h2>
-        <div v-if="filteredRequests.length === 0">Нема нарачки</div>
-       
-      <div class="row">
-        <div v-for="req in filteredRequests" :key="req.id" class="col-md-4 mb-4">
-          <div class="card shadow-sm text-dark h-100" :class="statusClass(req.status)">
-            <div class="card-body d-flex align-items-start">
-              <div class="me-3 fs-2"><!--Moze da se trgne?-->
-                <span v-if="req.status === 'approved'" class="text-success">✔️</span>
-                <span v-else-if="req.status === 'pending'" class="text-warning">⏳</span>
-                <span v-else-if="req.status === 'rejected'" class="text-danger">❌</span>
+
+  <div class="container mt-3">
+    <h2 class="pb-3">Сите нарачки</h2>
+    <div v-if="filteredRequests.length === 0">Нема нарачки</div>
+
+    <div class="row">
+      <div v-for="req in filteredRequests" :key="req.id" class="col-md-4 mb-4">
+        <div class="card shadow-sm text-dark h-100" :class="statusClass(req.status)">
+          <div class="card-body d-flex align-items-start">
+            <div class="me-3 fs-2"><!--Moze da se trgne?-->
+              <span v-if="req.status === 'approved'" class="text-success">✔️</span>
+              <span v-else-if="req.status === 'pending'" class="text-warning">⏳</span>
+              <span v-else-if="req.status === 'rejected'" class="text-danger">❌</span>
+            </div>
+            <div>
+              <h5 class="card-title mb-1">Нарачка <strong>{{ req.id }}</strong></h5>
+              <p class="mb-1"><strong>Корисник:</strong> {{ req.username }}</p>
+              <p class="mb-1"><strong>Датум:</strong> {{ req.requestDate }}</p>
+              <p class="mb-0"><strong>Статус:</strong> {{ req.status }}</p>
+              <p v-if="req.processedBy && req.status !== 'pending' " class="mt-2 text-muted small">
+                <span>{{req.status === 'approved' ? 'Одобрена од: ' : 'Одбиена од: ' }}</span> {{ req.processedBy }}
+              </p>
+              <!-- so kopce ili bez kopce da e?-->
+              <button
+                  class="btn btn-sm mt-2 text-dark"
+                  :class="buttonClass(req.status)"
+                  @click="toggleDetails(req.id)" v-if="req.status != 'unavailable'">
+                {{ expandedRequests.includes(req.id) ? 'Скриј производи' : 'Покажи производи' }}
+              </button>
+
+              <!-- proizvodite -->
+              <div v-if="expandedRequests.includes(req.id)" class="mt-3">
+                <ul class="list-group">
+                  <li v-for="item in req.items" :key="item.id" class="list-group-item">
+                    {{ item.productName || item.product?.name || 'Непознат производ' }} - {{ item.quantityRequested }} парчиња
+                  </li>
+                </ul>
               </div>
-            <div>
-          <h5 class="card-title mb-1">Нарачка <strong>{{ req.id }}</strong></h5>
-          <p class="mb-1"><strong>Корисник:</strong> {{ req.username }}</p>
-          <p class="mb-1"><strong>Датум:</strong> {{ req.requestDate }}</p>
-          <p class="mb-0"><strong>Статус:</strong> {{ req.status }}</p>
-          <p v-if="req.processedBy && req.status !== 'pending' " class="mt-2 text-muted small">
-            <span>{{req.status === 'approved' ? 'Одобрена од: ' : 'Одбиена од: ' }}</span> {{ req.processedBy }}
-          </p>
-          <!-- so kopce ili bez kopce da e?-->
-          <button 
-            class="btn btn-sm mt-2 text-dark"
-            :class="buttonClass(req.status)"
-            @click="toggleDetails(req.id)" v-if="req.status != 'unavailable'">
-                {{ expandedRequests.includes(req.id) ? 'Скриј производи' : 'Покажи производи' }}
-          </button>
-
-          <!-- proizvodite -->
-          <div v-if="expandedRequests.includes(req.id)" class="mt-3">
-            <ul class="list-group">
-              <li v-for="item in req.items" :key="item.id" class="list-group-item">
-                {{ item.productName || item.product?.name || 'Непознат производ' }} - {{ item.quantityRequested }} парчиња
-              </li>
-            </ul>
-          </div>
-
-          <!--kopceto za odobruvanje i odbivanje-->
-          <div v-if="user.userType === 'ProductAdministrator' && req.status === 'pending' && req.username !== user.username" class="mt-2 d-flex gap-2" >
-            <button class="btn btn-sm btn-success" @click="updateStatus(req.id, 'approved')">Одобри</button>
-            <button class="btn btn-sm btn-danger" @click="updateStatus(req.id, 'rejected')">Одбиј</button>
-          </div>
-
+
+              <!--kopceto za odobruvanje i odbivanje-->
+              <div v-if="user.userType === 'ProductAdministrator' && req.status === 'pending' && req.username !== user.username" class="mt-2 d-flex gap-2" >
+                <button class="btn btn-sm btn-success" @click="updateStatus(req.id, 'approved')">Одобри</button>
+                <button class="btn btn-sm btn-danger" @click="updateStatus(req.id, 'rejected')">Одбиј</button>
+              </div>
+
+            </div>
           </div>
         </div>
       </div>
     </div>
-</div>
-
-
-    </div>
+
+
+  </div>
 
 
@@ -117,4 +117,6 @@
 import { ref, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
+import Swal from 'sweetalert2';
+
 
 const allRequests = ref([]);
@@ -123,5 +125,5 @@
 const selectedStatus = ref('all');
 const selectedDate = ref('');
-const dateFilterType = ref('from'); 
+const dateFilterType = ref('from');
 const selectedUser = ref('all');
 const uniqueUsers = computed(() => {
@@ -130,12 +132,16 @@
 });
 const expandedRequests = ref([]);
-const userProfileImage = ref("https://www.gravatar.com/avatar/?d=mp"); 
+const userProfileImage = ref("https://www.gravatar.com/avatar/?d=mp");
 
 onMounted(async () => {
-  const res = await fetch('http://localhost:8081/api/requests'); 
+  const res = await fetch('http://localhost:8081/api/requests');
   if (res.ok) {
     allRequests.value = await res.json();
   } else {
-    alert("Не успеа вчитување на нарачките.");
+    await Swal.fire({
+      icon: 'error',
+      title: 'Грешка',
+      text: 'Не успеа вчитување на нарачките.'
+    });
   }
 
@@ -151,6 +157,6 @@
 
 const logout = () => {
-    localStorage.removeItem('user');
-    router.push('/login');
+  localStorage.removeItem('user');
+  router.push('/login');
 };
 
@@ -162,5 +168,5 @@
   }
 
-  
+
   const req = allRequests.value.find(r => r.id === requestId);
   if (!req.items) {
@@ -168,7 +174,11 @@
     if (res.ok) {
       const fullRequest = await res.json();
-      req.items = fullRequest.items; 
+      req.items = fullRequest.items;
     } else {
-      alert("Не може да се вчитаат детали за нарачката.");
+      await Swal.fire({
+        icon: 'error',
+        title: 'Грешка',
+        text: 'Не може да се вчитаат деталите за нарачката.'
+      });
       return;
     }
@@ -189,18 +199,26 @@
 const buttonClass = (status) => {
   switch (status) {
-    case 'approved': return 'bg-success';      
-    case 'pending': return 'bg-warning';       
-    case 'rejected': return 'bg-danger';        
+    case 'approved': return 'bg-success';
+    case 'pending': return 'bg-warning';
+    case 'rejected': return 'bg-danger';
     default: return 'bg-secondary';
   }
 };
 const updateStatus = async (requestId, newStatus) => {
-  const confirmed = confirm(`Дали сте сигурни дека сакате да ја означите нарачката како '${newStatus}'?`);
-  if (!confirmed) return;
+  const result = await Swal.fire({
+    title: 'Потврда на статус',
+    text: `Дали сте сигурни дека сакате да ја означите нарачката како '${newStatus}'?`,
+    icon: 'question',
+    showCancelButton: true,
+    confirmButtonText: 'Да, означи',
+    cancelButtonText: 'Откажи'
+  });
+
+  if (!result.isConfirmed) return;
 
   const res = await fetch(`http://localhost:8081/api/requests/${requestId}/status?status=${newStatus}&adminId=${user.value.id}`, {
-  method: 'PUT',
-  headers: { 'Content-Type': 'application/json' }
-});
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' }
+  });
 
   if (res.ok) {
@@ -208,24 +226,22 @@
     if (req) {
       req.status = newStatus;
-      req.processedBy = user.value.username; 
+      req.processedBy = user.value.username;
     }
-    alert(`Нарачката е успешно означена како '${newStatus}'`);
+    await Swal.fire({
+      icon: 'success',
+      title: 'Успешно',
+      text: `Нарачката е означена како '${newStatus}'`
+    });
   } else {
-    alert("Грешка при ажурирање на статусот.");
-  }
- 
-};
-//const filteredRequests = computed(() => {
-  //return allRequests.value.filter(req => {
-    //const statusMatch = selectedStatus.value === 'all' || req.status === selectedStatus.value;
-
-    //const userMatch = selectedUser.value === 'all' || req.username === selectedUser.value;
-
-    //const dateMatch = !selectedDate.value || new Date(req.requestDate) >= new Date(selectedDate.value);
-
-    //return statusMatch && userMatch && dateMatch;
-  //});
-//});
- 
+    await Swal.fire({
+      icon: 'error',
+      title: 'Грешка',
+      text: 'Настана проблем при ажурирање на статусот.'
+    });
+  }
+
+};
+
+
 const filteredRequests = computed(() => {
   return allRequests.value.filter(req => {
Index: zinemaster-frontend/src/components/MainPage.vue
===================================================================
--- zinemaster-frontend/src/components/MainPage.vue	(revision 62a052f7b2dd66d876c4e6200bf1bfd2e99d9979)
+++ zinemaster-frontend/src/components/MainPage.vue	(revision 99adf50bc33c245de97c9ab3d513a66edfbbc65c)
@@ -11,5 +11,10 @@
             <img :src="userProfileImage" alt="Profile" class="rounded-circle me-2 " style="width: 35px; height: 35px; object-fit: cover; border: 2px solid white; cursor: pointer;"/>
           </router-link>
+          <router-link v-if="user.userType === 'UserAdministrator'" to="/manage-users" class="btn btn-outline-warning btn-sm me-2">
+            Управувај со корисници
+          </router-link>
+
         </nav>
+
       </div>
     </header>
@@ -124,12 +129,11 @@
           <div class="col-md-4 mb-3" v-for="product in filteredProducts" :key="product.id">
             <div class="card h-100">
-              <img :src="product.imageUrl" class="card-img-top" :alt="product.name">
-              <div class="card-body">
-                <h5 class="card-title">{{ product.name }}</h5>
-                <p class="card-text">Достапно: {{ product.quantity - product.reserved - product.tempReserved }}</p>
-                <p class="card-text text-muted small">Резервирано: {{ product.reserved + product.tempReserved }}</p>
-                <input type="number" min="1" :max="product.quantity" v-model.number="selectedQuantities[product.id]" class="form-control mb-2" placeholder="Количина">
-                <button class="btn btn-sm btn-primary" @click="addToRequest(product)">Додади</button>
-              </div>
+              <img :src="getFullImageUrl(product.imageUrl)" class="card-img-top" :alt="product.name" style="height: 200px; object-fit: cover;">        <div class="card-body">
+              <h5 class="card-title">{{ product.name }}</h5>
+              <p class="card-text">Достапно: {{ product.quantity - product.reserved - product.tempReserved }}</p>
+              <p class="card-text text-muted small">Резервирано: {{ product.reserved + product.tempReserved }}</p>
+              <input type="number" min="1" :max="product.quantity" v-model.number="selectedQuantities[product.id]" class="form-control mb-2" placeholder="Количина">
+              <button class="btn btn-sm btn-primary" @click="addToRequest(product)">Додади</button>
+            </div>
             </div>
           </div>
@@ -155,9 +159,16 @@
               <p class="card-text">Достапно: {{ product.quantity - product.reserved }}</p>
               <p class="card-text text-muted small">Резервирано: {{ product.reserved }}</p>
-              <button v-if="user.userType === 'ProductAdministrator' && product.reserved == 0" class="btn btn-sm btn-danger ms-2" @click="deleteProduct(product.id)">Избриши</button>
+              <div v-if="user.userType === 'ProductAdministrator' ">
+                <input type="number" v-model.number="product.addQuantity" min="1" placeholder="Додади количина" class="form-control form-control-sm d-inline w-50 me-2">
+                <button class="btn btn-sm btn-outline-success" @click="addQuantity(product)">
+                  Додади
+                </button>
+                <button v-if="user.userType === 'ProductAdministrator' && product.reserved == 0" class="btn btn-sm btn-danger ms-2" @click="deleteProduct(product.id)">Избриши</button>
+              </div>
             </div>
           </div>
         </div>
       </div>
+
 
 
@@ -171,4 +182,5 @@
 import { ref, onMounted , computed} from 'vue';//, watchEffect -> za pomos pri debug
 import { useRouter } from 'vue-router';
+import Swal from 'sweetalert2';
 
 const router = useRouter();
@@ -234,5 +246,5 @@
 
   if (!quantity || quantity <= 0 || quantity > available) {
-    alert("Внесете валидна количина!");
+    Swal.fire("Грешка", "Внесете валидна количина!", "warning");
     return;
   }
@@ -268,9 +280,11 @@
   if (res.ok) {
     const newRequestId = await res.text();
-    alert("Нарачката е успешно поднесена со ID: " + newRequestId);
+    await Swal.fire("Успешно",
+        `Нарачката е поднесена со ID: ${newRequestId}`,
+        "success");
     creatingRequest.value = false;
     fetchUserRequests();
   } else {
-    alert("Грешка при поднесување.");
+    Swal.fire("Грешка", "Грешка при поднесување.", "error");
   }
 
@@ -288,6 +302,13 @@
 const cancelRequest = () => {
   if (requestItems.value.length > 0) {
-    const confirmed = confirm('Имате додадено производи. Дали сте сигурни дека сакате да ја откажете нарачката?');
-    if (!confirmed) return;
+    const result = Swal.fire({
+      title: 'Потврда',
+      text: 'Имате додадено производи. Дали сте сигурни дека сакате да ја откажете нарачката?',
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonText: 'Да',
+      cancelButtonText: 'Не'
+    });
+    if (!result.isConfirmed) return;
   }
 
@@ -312,11 +333,19 @@
     accessible: p.accessible ?? true,
     tempReserved: 0 ,
-    categories: p.categories ?? []
+    categories: p.categories ?? []  ,
+    addQuantity: 0
   }));
 };
 
 const deleteProduct = async (productId) => {
-  const confirmed = confirm('Дали сте сигурни дека сакате да го избришете овој производ?');
-  if (!confirmed) return;
+  const result = await Swal.fire({
+    title: 'Потврда',
+    text: 'Дали сте сигурни дека сакате да го избришете овој производ?',
+    icon: 'warning',
+    showCancelButton: true,
+    confirmButtonText: 'Избриши',
+    cancelButtonText: 'Откажи'
+  });
+  if (!result.isConfirmed) return;
 
   const res = await fetch(`http://localhost:8081/api/products/${productId}`, {
@@ -325,8 +354,8 @@
 
   if (res.ok) {
-    alert('Производот е избришан.');
+    await Swal.fire("Успешно", "Производот е избришан.", "success");
     await fetchProducts();
   } else {
-    alert('Неуспешно бришење.');
+    Swal.fire("Грешка", "Неуспешно бришење.", "error");
   }
 };
@@ -347,5 +376,9 @@
   if (!newProduct.value.name || !newProduct.value.quantity ||newProduct.value.categoryIds.length === 0 ||!imageFile.value)
   {
-    alert("Сите полиња се задолжителни, вклучувајќи и слика.");
+    await Swal.fire({
+      icon: 'warning',
+      title: 'Недостаток на податоци',
+      text: 'Сите полиња се задолжителни, вклучувајќи и слика.',
+    });
     return;
   }
@@ -367,5 +400,9 @@
 
   if (res.ok) {
-    alert("Производот е додаден успешно.");
+    await Swal.fire({
+      icon: 'success',
+      title: 'Успешно додаден',
+      text: 'Производот е додаден успешно.'
+    });
     showAddForm.value = false;
     newProduct.value = {
@@ -380,10 +417,11 @@
     await fetchProducts();
   } else {
-    alert("Грешка при додавање.");
-  }
-};
-
-
-
+    await Swal.fire({
+      icon: 'error',
+      title: 'Грешка',
+      text: 'Грешка при додавање.'
+    });
+  }
+};
 
 
@@ -393,5 +431,8 @@
 const addCategory = async () => {
   if (!newCategoryName.value.trim()) {
-    alert("Внесете име на категорија.");
+    await Swal.fire({
+      icon: 'warning',
+      title: 'Внесете име на категорија.'
+    });
     return;
   }
@@ -404,15 +445,27 @@
 
   if (res.ok) {
-    alert("Категоријата е додадена.");
+    await Swal.fire({
+      icon: 'success',
+      title: 'Додадена категорија'
+    });
     newCategoryName.value = '';
     await fetchCategories();
   } else {
-    alert("Грешка при додавање категорија.");
+    await Swal.fire({
+      icon: 'error',
+      title: 'Грешка при додавање категорија.'
+    });
   }
 };
 
 const deleteCategoryWithProducts = async (categoryId) => {
-  const confirmDelete = confirm('Дали сакате да ја избришете оваа категорија ЗАЕДНО со сите производи во неа?');
-  if (!confirmDelete) return;
+  const confirmDelete = await Swal.fire({
+    title: 'Дали сакате да ја избришете оваа категорија ЗАЕДНО со сите производи во неа?',
+    icon: 'warning',
+    showCancelButton: true,
+    confirmButtonText: 'Да, избриши',
+    cancelButtonText: 'Откажи'
+  });
+  if (!confirmDelete.isConfirmed) return;
 
   const res = await fetch(`http://localhost:8081/api/categories/${categoryId}?deleteProducts=true`, {
@@ -421,9 +474,15 @@
 
   if (res.ok) {
-    alert("Категоријата и производите се избришани.");
+    await Swal.fire({
+      icon: 'success',
+      title: 'Категоријата и производите се избришани.'
+    });
     await fetchCategories();
     await fetchProducts();
   } else {
-    alert("Неуспешно бришење.");
+    await Swal.fire({
+      icon: 'error',
+      title: 'Неуспешно бришење.'
+    });
   }
 };
@@ -431,6 +490,12 @@
 
 const deleteCategoryOnly = async (categoryId) => {
-  const confirmDelete = confirm('Дали сакате да ја избришете оваа категорија, а производите да останат без категорија?');
-  if (!confirmDelete) return;
+  const confirmDelete = await Swal.fire({
+    title: 'Дали сакате да ја избришете оваа категорија, а производите да останат без категорија?',
+    icon: 'question',
+    showCancelButton: true,
+    confirmButtonText: 'Избриши само категорија',
+    cancelButtonText: 'Откажи'
+  });
+  if (!confirmDelete.isConfirmed) return;
 
   const res = await fetch(`http://localhost:8081/api/categories/${categoryId}?deleteProducts=false`, {
@@ -439,9 +504,15 @@
 
   if (res.ok) {
-    alert("Категоријата е избришана. Производите остануваат.");
+    await Swal.fire({
+      icon: 'success',
+      title: 'Категоријата е избришана. Производите остануваат.'
+    });
     await fetchCategories();
     await fetchProducts();
   } else {
-    alert("Неуспешно бришење.");
+    await Swal.fire({
+      icon: 'error',
+      title: 'Неуспешно бришење.'
+    });
   }
 };
@@ -457,5 +528,5 @@
   return categories.value.filter(cat => {
     const relatedProducts = products.value.filter(p => p.categories && p.categories.some(c => c.id === cat.id) && p.accessable);
-    return relatedProducts.length === 0 || relatedProducts.every(p => p.reserved === 0);//site mora reserved:0
+    return relatedProducts.length === 0 || relatedProducts.every(p => p.reserved === 0);
   });
 });
@@ -493,4 +564,34 @@
 
 
+const addQuantity = async (product) => {
+  if (!product.addQuantity || product.addQuantity <= 0) {
+    await Swal.fire({
+      icon: 'warning',
+      title: 'Внесете валидна количина за додавање.'
+    });
+    return;
+  }
+
+  const res = await fetch(`http://localhost:8081/api/products/${product.id}/add-quantity`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ quantityToAdd: product.addQuantity })
+  });
+
+  if (res.ok) {
+    await Swal.fire({
+      icon: 'success',
+      title: 'Успешно додадено',
+      text: 'Количината е успешно додадена.'
+    });
+    product.addQuantity = 0;
+    await fetchProducts();
+  } else {
+    await Swal.fire({
+      icon: 'error',
+      title: 'Грешка при ажурирање.'
+    });
+  }
+};
 
 
Index: zinemaster-frontend/src/components/ManageUsers.vue
===================================================================
--- zinemaster-frontend/src/components/ManageUsers.vue	(revision 99adf50bc33c245de97c9ab3d513a66edfbbc65c)
+++ zinemaster-frontend/src/components/ManageUsers.vue	(revision 99adf50bc33c245de97c9ab3d513a66edfbbc65c)
@@ -0,0 +1,333 @@
+<template>
+  <header class="bg-dark text-white p-3 fixed-top shadow-sm">
+    <div class="container d-flex justify-content-between align-items-center">
+      <h4 class="mb-0">ZineMaster</h4>
+      <nav>
+        <router-link to="/requests" class="btn btn-outline-light btn-sm me-2">Сите нарачки</router-link>
+        <button class="btn btn-outline-light btn-sm me-2" @click="logout">Logout</button>
+        <router-link to="/profile">
+          <img :src="userProfileImage" alt="Profile" class="rounded-circle me-2 " style="width: 35px; height: 35px; object-fit: cover; border: 2px solid white; cursor: pointer;"/>
+        </router-link>
+        <router-link v-if="currentUser.userType === 'UserAdministrator'" to="/manage-users" class="btn btn-outline-warning btn-sm me-2">
+          Управувај со корисници
+        </router-link>
+
+      </nav>
+
+    </div>
+  </header>
+
+
+  <div class="container mt-5 pt-5">
+
+    <div v-if="loading" class="alert alert-info">Се вчитува...</div>
+    <div v-if="error" class="alert alert-danger">Грешка при вчитување на корисниците.</div>
+
+    <button class="btn btn-success mb-3" @click="showAddUserForm = !showAddUserForm">
+      {{ showAddUserForm ? 'Откажи' : 'Додади нов корисник' }}
+    </button>
+
+    <div v-if="showAddUserForm" class="border rounded p-3 mb-4 bg-light">
+      <h5>Нов корисник</h5>
+      <div class="mb-2">
+        <input v-model="newUser.name" type="text" class="form-control" placeholder="Име">
+      </div>
+      <div class="mb-2">
+        <input v-model="newUser.surname" type="text" class="form-control" placeholder="Презиме">
+      </div>
+      <div class="mb-2">
+        <input v-model="newUser.startDate" type="date" class="form-control">
+      </div>
+      <div class="mb-2">
+        <select v-model="newUser.userType" class="form-select">
+          <option value="Worker">Worker</option>
+          <option value="ProductAdministrator">ProductAdministrator</option>
+          <option value="UserAdministrator">UserAdministrator</option>
+        </select>
+      </div>
+      <div class="mb-3">
+        <label for="address" class="form-label">Адреса</label>
+        <select v-model="newUser.address" class="form-select" required>
+          <option disabled value="">Избери адреса</option>
+          <option>Main Warehouse</option>
+          <option>Office A</option>
+          <option>Ohrids Warehouse B</option>
+          <option>Office C</option>
+
+        </select>
+      </div>
+      <button class="btn btn-primary" @click="createUser">Зачувај</button>
+    </div>
+
+
+    <table v-if="!loading && !error" class="table table-striped">
+      <thead>
+      <tr>
+        <th>Име</th>
+        <th style="cursor: pointer;" @click="sortByStartDate">
+          Почетен датум
+
+        </th>
+        <th>Тип на корисник</th>
+        <th>Промена на типот на корисник </th>
+        <th>Активен?</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="u in users" :key="u.id">
+        <td>{{ u.name }} {{ u.surname }}</td>
+        <td>{{ u.startDate }}</td>
+        <td>{{ u.userType }}</td>
+        <td>
+          <div v-if="u.access === 0">
+            <div class="text-danger small">Нема пристап – прво одобри пристап.</div>
+          </div>
+          <div v-else>
+            <select v-model="u.newRole" class="form-select form-select-sm w-auto d-inline-block me-2" :disabled="u.id === currentUser.id">
+              <option value="Worker">Worker</option>
+              <option value="ProductAdministrator">ProductAdministrator</option>
+              <option value="UserAdministrator">UserAdministrator</option>
+            </select>
+            <button class="btn btn-sm btn-primary" @click="updateRole(u)" :disabled="u.id === currentUser.id || u.userType === u.newRole">
+              Промени
+            </button>
+          </div>
+        </td>
+        <td>
+          <label class="switch">
+            <input type="checkbox" :checked="u.access === 1" @change="toggleAccess(u)" :disabled="u.userType === 'UserAdministrator'">
+            <span class="slider round"></span>
+          </label>
+        </td>
+
+      </tr>
+      </tbody>
+    </table>
+
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import Swal from 'sweetalert2'//za poubavi confirms i alerts
+
+
+const router = useRouter();
+const users = ref([]);
+const currentUser = ref({});
+const loading = ref(true);
+const error = ref(false);
+const userProfileImage = ref("https://www.gravatar.com/avatar/?d=mp");
+const sortOrder = ref('asc');
+
+onMounted(async () => {
+  const stored = localStorage.getItem('user');
+  if (!stored) {
+    router.push('/login');
+    return;
+  }
+
+  currentUser.value = JSON.parse(stored);
+  userProfileImage.value = currentUser.value.profilePic || "https://www.gravatar.com/avatar/?d=mp";
+
+  try {
+    const res = await fetch('http://localhost:8081/api/users');
+    if (!res.ok) throw new Error();
+    const data = await res.json();
+    users.value = data.map(u => ({
+      ...u,
+      newRole: u.userType
+    }));
+    loading.value = false;
+  } catch (e) {
+    error.value = true;
+    loading.value = false;
+  }
+});
+
+const updateRole = async (user) => {
+  const result = await Swal.fire({
+    title: 'Промена на улога',
+    text: `Дали сте сигурни дека сакате да ја промените улогата на ${user.username} во ${user.newRole}?`,
+    icon: 'warning',
+    showCancelButton: true,
+    confirmButtonText: 'Да, промени',
+    cancelButtonText: 'Откажи'
+  });
+
+  if (!result.isConfirmed) return;
+
+  const res = await fetch(`http://localhost:8081/api/users/${user.id}/role`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ userType: user.newRole })
+  });
+
+  if (res.ok) {
+    Swal.fire({
+      icon: 'success',
+      title: 'Успешно',
+      text: 'Улогата е успешно променета.'
+    });
+    user.userType = user.newRole;
+  } else {
+    Swal.fire({
+      icon: 'error',
+      title: 'Грешка',
+      text: 'Неуспешна промена на улога.'
+    });
+  }
+};
+const toggleAccess = async (u) => {
+  const newAccess = u.access === 1 ? 0 : 1;
+
+  const res = await fetch(`http://localhost:8081/api/users/${u.id}/access`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ access: newAccess })
+  });
+
+  if (res.ok) {
+    alert(`Пристапот е ${newAccess === 1 ? 'одобрен' : 'одземен'}.`);
+    await fetchUsers();
+  } else {
+
+    Swal.fire({
+      icon: 'error',
+      title: 'Грешка',
+      text: 'Грешка при менување на пристап.'
+    });
+  }
+};
+
+const fetchUsers = async () => {
+  try {
+    const res = await fetch('http://localhost:8081/api/users');
+    if (!res.ok) throw new Error("Неуспешно превземање на корисници");
+
+    users.value = await res.json();
+  } catch (err) {
+    console.error("Грешка при превземање на корисници:", err);
+  }
+};
+
+const sortByStartDate = () => {
+  sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
+  users.value.sort((a, b) => {
+    const dateA = new Date(a.startDate);
+    const dateB = new Date(b.startDate);
+
+    return sortOrder.value === 'asc' ? dateA - dateB : dateB - dateA;
+  });
+};
+
+const showAddUserForm = ref(false);
+const newUser = ref({
+  name: '',
+  surname: '',
+  startDate: '',
+  userType: 'Worker',
+  address: ''
+});
+
+const createUser = async () => {
+  if (!newUser.value.name || !newUser.value.surname || !newUser.value.startDate) {
+    Swal.fire({
+      icon: 'warning',
+      title: 'Недостасуваат полиња',
+      text: 'Пополнете ги сите полиња.'
+    });
+    return;
+  }
+
+  const password = 'test123';
+
+
+  const res = await fetch('http://localhost:8081/api/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      name: newUser.value.name,
+      surname: newUser.value.surname,
+      startDate: newUser.value.startDate,
+      userType: newUser.value.userType,
+      password,
+      access: 1,
+      address: newUser.value.address
+    })
+  });
+
+  if (res.ok) {
+    await Swal.fire({
+      icon: 'success',
+      title: 'Успешно!',
+      text: 'Корисникот е додаден.'
+    });
+    showAddUserForm.value = false;
+    await fetchUsers();
+  } else {
+    Swal.fire({
+      icon: 'error',
+      title: 'Грешка!',
+      text: 'Настана грешка при додавање.'
+    });
+  }
+};
+
+const logout = () => {
+  localStorage.removeItem('user');
+  router.push('/login');
+};
+
+
+
+
+
+</script>
+<style lang="css" scoped>
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 46px;
+  height: 24px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0; left: 0;
+  right: 0; bottom: 0;
+  background-color: #e74c3c;
+  transition: .4s;
+  border-radius: 34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #2ecc71;
+}
+
+input:checked + .slider:before {
+  transform: translateX(22px);
+}
+
+</style>
Index: zinemaster-frontend/src/components/ProfilePage.vue
===================================================================
--- zinemaster-frontend/src/components/ProfilePage.vue	(revision 62a052f7b2dd66d876c4e6200bf1bfd2e99d9979)
+++ zinemaster-frontend/src/components/ProfilePage.vue	(revision 99adf50bc33c245de97c9ab3d513a66edfbbc65c)
@@ -2,19 +2,19 @@
 
   <header class="bg-dark text-white p-3 fixed-top shadow-sm">
-        <div class="container d-flex justify-content-between align-items-center">
-            <h4 class="mb-0">ZineMaster</h4>
-            <nav>
-                <router-link to="/main" class="btn btn-outline-light btn-sm me-2">Дома</router-link> 
-                <router-link to="/requests" class="btn btn-outline-light btn-sm me-2">Сите нарачки</router-link>
-                <button class="btn btn-outline-light btn-sm me-2" @click="logout">Logout</button>
-                
-            </nav>
-        </div>
-    </header>
+    <div class="container d-flex justify-content-between align-items-center">
+      <h4 class="mb-0">ZineMaster</h4>
+      <nav>
+        <router-link to="/main" class="btn btn-outline-light btn-sm me-2">Дома</router-link>
+        <router-link to="/requests" class="btn btn-outline-light btn-sm me-2">Сите нарачки</router-link>
+        <button class="btn btn-outline-light btn-sm me-2" @click="logout">Logout</button>
+
+      </nav>
+    </div>
+  </header>
 
 
   <div class="container mt-5 pt-5">
     <div class="row">
-      
+
       <!-- korisnikot -->
       <div class="col-md-4">
@@ -22,6 +22,6 @@
           <div class="card-body text-center">
             <img :src="userProfileImage" class="rounded-circle mb-3"
-              style="width: 100px; height: 100px; object-fit: cover; border: 2px solid #ccc;" 
-              alt="Profile" @click="triggerFileInput"/>
+                 style="width: 100px; height: 100px; object-fit: cover; border: 2px solid #ccc;"
+                 alt="Profile" @click="triggerFileInput"/>
             <input type="file" ref="fileInput" accept="image/*" @change="handleFileChange" style="display: none"/>
             <h4 class="card-title">{{ user.name }} {{ user.surname }}</h4>
@@ -42,85 +42,90 @@
       </div>
 
-     <!-- narackite -->
-<div class="col-md-8">
-  <h4>Мои нарачки</h4>
-  <!--Filteri-->
-<div class="mb-4">
-  <div class="row g-2 align-items-center">
-    <!-- Статус -->
-    <div class="col-md-3">
-      <label class="form-label mb-1">Статус:</label>
-      <select v-model="selectedStatus" class="form-select">
-        <option value="">Сите</option>
-        <option value="pending">Во тек</option>
-        <option value="approved">Одобрени</option>
-        <option value="rejected">Одбиени</option>
-      </select>
-    </div>
-
-    <!-- Датум -->
-    <div class="col-md-3">
-      <label class="form-label mb-1">Датум:</label>
-      <input type="date" v-model="selectedDate" class="form-control" />
-    </div>
-
-    <!-- Радио филтер -->
-    <div class="col-md-6 d-flex flex-column flex-md-row align-items-start align-items-md-center gap-2 pt-md-4">
-      <div class="form-check me-3">
-        <input class="form-check-input" type="radio" id="dateFrom" value="from" v-model="dateFilterType">
-        <label class="form-check-label" for="dateFrom">Од тој датум па натаму</label>
-      </div>
-      <div class="form-check">
-        <input class="form-check-input" type="radio" id="dateExact" value="exact" v-model="dateFilterType">
-        <label class="form-check-label" for="dateExact">Само на тој датум</label>
-      </div>
-    </div>
-  </div>
-</div>
-
-
-
-  <div v-if="filteredRequests.length === 0" class="mt-3 text-muted">Нема нарачки.</div>
-  <div class="row">
-    <div v-for="req in filteredRequests" :key="req.id" class="col-md-6 mb-3">
-      <div class="card h-100 shadow-sm text-dark" :class="statusClass(req.status)">
-        <div class="card-body d-flex align-items-start">
-          <!-- ikona -->
-          <div class="me-3 fs-2">
-            <span v-if="req.status === 'approved'" class="text-success">✔️</span>
-            <span v-else-if="req.status === 'pending'" class="text-warning">⏳</span>
-            <span v-else-if="req.status === 'rejected'" class="text-danger">❌</span>
+      <!-- narackite -->
+      <div class="col-md-8">
+        <h4>Мои нарачки</h4>
+        <!--Filteri-->
+        <div class="mb-4">
+          <div class="row g-2 align-items-center">
+            <!-- Статус -->
+            <div class="col-md-3">
+              <label class="form-label mb-1">Статус:</label>
+              <select v-model="selectedStatus" class="form-select">
+                <option value="">Сите</option>
+                <option value="pending">Во тек</option>
+                <option value="approved">Одобрени</option>
+                <option value="rejected">Одбиени</option>
+              </select>
+            </div>
+
+            <!-- Датум -->
+            <div class="col-md-3">
+              <label class="form-label mb-1">Датум:</label>
+              <input type="date" v-model="selectedDate" class="form-control" />
+            </div>
+
+            <!-- Радио филтер -->
+            <div class="col-md-6 d-flex flex-column flex-md-row align-items-start align-items-md-center gap-2 pt-md-4">
+              <div class="form-check me-3">
+                <input class="form-check-input" type="radio" id="dateFrom" value="from" v-model="dateFilterType">
+                <label class="form-check-label" for="dateFrom">Од тој датум па натаму</label>
+              </div>
+              <div class="form-check">
+                <input class="form-check-input" type="radio" id="dateExact" value="exact" v-model="dateFilterType">
+                <label class="form-check-label" for="dateExact">Само на тој датум</label>
+              </div>
+            </div>
           </div>
-          <!-- tekst -->
-          <div>
-            <h5 class="card-title mb-1">Нарачка <strong>{{ req.id }}</strong></h5>
-            <p class="mb-1"><strong>Датум:</strong> {{ req.requestDate }}</p>
-            <p class="mb-0"><strong>Статус:</strong> {{ req.status }}</p>
-
-            <!-- so kopce ili bez kopce da e?-->
-          <button 
-            class="btn btn-sm mt-2 text-dark"
-            :class="buttonClass(req.status)"
-            @click="toggleDetails(req.id)" v-if="req.status != 'unavailable'">
-                {{ expandedRequests.includes(req.id) ? 'Скриј производи' : 'Покажи производи' }}
-          </button>
-
-          <!-- proizvodite -->
-          <div v-if="expandedRequests.includes(req.id)" class="mt-3">
-            <ul class="list-group">
-              <li v-for="item in req.items" :key="item.id" class="list-group-item">
-                {{ item.productName || item.product?.name || 'Непознат производ' }} - {{ item.quantityRequested }} парчиња
-              </li>
-            </ul>
-          </div>
+        </div>
+
+
+
+        <div v-if="filteredRequests.length === 0" class="mt-3 text-muted">Нема нарачки.</div>
+        <div class="row">
+          <div v-for="req in filteredRequests" :key="req.id" class="col-md-6 mb-3">
+            <div class="card h-100 shadow-sm text-dark" :class="statusClass(req.status)">
+              <div class="card-body d-flex align-items-start">
+                <!-- ikona -->
+                <div class="me-3 fs-2">
+                  <span v-if="req.status === 'approved'" class="text-success">✔️</span>
+                  <span v-else-if="req.status === 'pending'" class="text-warning">⏳</span>
+                  <span v-else-if="req.status === 'rejected'" class="text-danger">❌</span>
+                </div>
+                <!-- tekst -->
+                <div>
+                  <h5 class="card-title mb-1">Нарачка <strong>{{ req.id }}</strong></h5>
+                  <p class="mb-1"><strong>Датум:</strong> {{ req.requestDate }}</p>
+                  <p class="mb-0"><strong>Статус:</strong> {{ req.status }}</p>
+                  <p v-if="req.processedBy && req.status !== 'pending' " class="mt-2 text-muted small">
+                    <span>{{req.status === 'approved' ? 'Одобрена од: ' : 'Одбиена од: ' }}</span> {{getUsernameById(req.processedBy)}}
+                  </p>
+
+
+
+                  <!-- so kopce ili bez kopce da e?-->
+                  <button
+                      class="btn btn-sm mt-2 text-dark"
+                      :class="buttonClass(req.status)"
+                      @click="toggleDetails(req.id)" v-if="req.status != 'unavailable'">
+                    {{ expandedRequests.includes(req.id) ? 'Скриј производи' : 'Покажи производи' }}
+                  </button>
+
+                  <!-- proizvodite -->
+                  <div v-if="expandedRequests.includes(req.id)" class="mt-3">
+                    <ul class="list-group">
+                      <li v-for="item in req.items" :key="item.id" class="list-group-item">
+                        {{ item.productName || item.product?.name || 'Непознат производ' }} - {{ item.quantityRequested }} парчиња
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+
     </div>
   </div>
-</div>
-
-    </div>
-</div>
 
 </template>
@@ -129,4 +134,6 @@
 import { ref, onMounted,computed } from 'vue';
 import { useRouter } from 'vue-router';
+import Swal from 'sweetalert2';
+
 
 const router = useRouter();
@@ -138,5 +145,6 @@
 const selectedStatus = ref('');
 const selectedDate = ref('');
-const dateFilterType = ref('from'); 
+const dateFilterType = ref('from');
+const allUsers = ref([]);
 
 onMounted(async () => {
@@ -156,13 +164,12 @@
     requests.value = await res.json();
   }
+
+  const userRes = await fetch('http://localhost:8081/api/users');
+  if (userRes.ok) {
+    allUsers.value = await userRes.json();
+  }
 });
 
-//const filteredRequests = computed(() => {
-  //return requests.value.filter(req => {
-    //const matchesStatus = selectedStatus.value === '' || req.status === selectedStatus.value;
-    //const matchesDate = selectedDate.value === '' || req.requestDate === selectedDate.value;
-    //return matchesStatus && matchesDate;
-  //});
-//});
+
 
 const filteredRequests = computed(() => {
@@ -189,6 +196,6 @@
 
 const logout = () => {
-    localStorage.removeItem('user');
-    router.push('/login');
+  localStorage.removeItem('user');
+  router.push('/login');
 };
 
@@ -200,5 +207,5 @@
   }
 
-  
+
   const req = requests.value.find(r => r.id === requestId);
   if (!req.items) {
@@ -206,7 +213,11 @@
     if (res.ok) {
       const fullRequest = await res.json();
-      req.items = fullRequest.items; 
+      req.items = fullRequest.items;
     } else {
-      alert("Не може да се вчитаат детали за нарачката.");
+      await Swal.fire({
+        icon: 'error',
+        title: 'Грешка',
+        text: 'Не може да се вчитаат детали за нарачката.'
+      });
       return;
     }
@@ -241,8 +252,19 @@
       user.value.profilePic = newUrl;
       localStorage.setItem("user", JSON.stringify(user.value));
+      await Swal.fire({
+        icon: 'success',
+        title: 'Слика ажурирана',
+        text: 'Профил сликата е успешно ажурирана.'
+      });
+    } else{
+      await Swal.fire({
+        icon: 'error',
+        title: 'Грешка',
+        text: 'Неуспешна промена на профил сликата.'
+      });
     }
   };
 
-  reader.readAsDataURL(file); 
+  reader.readAsDataURL(file);
 };
 
@@ -259,9 +281,18 @@
 const buttonClass = (status) => {
   switch (status) {
-    case 'approved': return 'bg-success';      
-    case 'pending': return 'bg-warning';       
-    case 'rejected': return 'bg-danger';        
+    case 'approved': return 'bg-success';
+    case 'pending': return 'bg-warning';
+    case 'rejected': return 'bg-danger';
     default: return 'bg-secondary';
   }
 };
+
+const getUsernameById = (id) => {
+  const u = allUsers.value.find(user => user.id === id);
+  console.log(u)
+  return u ? u.username : id;
+};
+
+
+
 </script>
Index: zinemaster-frontend/src/router/index.js
===================================================================
--- zinemaster-frontend/src/router/index.js	(revision 62a052f7b2dd66d876c4e6200bf1bfd2e99d9979)
+++ zinemaster-frontend/src/router/index.js	(revision 99adf50bc33c245de97c9ab3d513a66edfbbc65c)
@@ -4,4 +4,6 @@
 import Requests from '../components/AllRequests.vue'; 
 import Profile from '../components/ProfilePage.vue';
+import ManageUsers from '@/components/ManageUsers.vue';
+
 
 const routes = [
@@ -10,5 +12,6 @@
   { path: '/main', component: Main },
   { path: '/requests', component: Requests },
-  { path: '/profile', component: Profile }
+  { path: '/profile', component: Profile },
+  { path: '/manage-users', component: ManageUsers}
 ];
 
@@ -20,2 +23,3 @@
 export default router;
 
+