final fe part 1

app/pages/admin/users/index.vue

@@ -488,7 +488,7 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, reactive, computed, onMounted } from 'vue';
 import { useAuthStore } from "~/stores/auth-store.js";
 import { storeToRefs } from "pinia";
@@ -497,19 +497,18 @@ const config = useRuntimeConfig();
 const api = config.public.apiBase;
 const authStore = useAuthStore();
 const { token } = storeToRefs(authStore);
+const notifications = useNotifications();
 
-// State
-const users = ref<any[]>([]);
+const users = ref([]);
 const loading = ref(false);
 const showModal = ref(false);
 const showDetailsModal = ref(false);
 const isEditing = ref(false);
 const searchQuery = ref('');
-const selectedUser = ref<any>(null);
-const userHistory = ref<any[]>([]);
+const selectedUser = ref(null);
+const userHistory = ref([]);
 
-// Mock history data generator
-const generateMockHistory = (userId: number) => {
+const generateMockHistory = () => {
     const actions = ['UPLOADED_PUBLICATION', 'ADDED_COMMENT', 'CORRECTED_PUBLICATION', 'RATED_PUBLICATION', 'TAGGED_PUBLICATION'];
     const targetTypes = ['Publication', 'Comment', 'Review'];
     const details = [
@@ -554,7 +553,6 @@ const generateMockHistory = (userId: number) => {
     return history.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
 };
 
-// Form Data
 const formData = reactive({
     id: 0,
     name: '',
@@ -564,7 +562,6 @@ const formData = reactive({
     is_active: true
 });
 
-// Computed Stats & Filtering
 const filteredUsers = computed(() => {
     if (!searchQuery.value) return users.value;
     const query = searchQuery.value.toLowerCase();
@@ -577,11 +574,10 @@ const filteredUsers = computed(() => {
 const activeCount = computed(() => users.value.filter(u => u.is_active).length);
 const adminCount = computed(() => users.value.filter(u => u.role === 'ADMIN').length);
 
-// --- API ACTIONS ---
 const fetchUsers = async () => {
     loading.value = true;
     try {
-        const data = await $fetch<any[]>(`${api}/admin/users`, {
+        const data = await $fetch(`${api}/admin/users`, {
             method: 'GET',
             headers: { Authorization: `Bearer ${token.value}` }
         });
@@ -605,10 +601,11 @@ const createUser = async () => {
                 role: formData.role
             }
         });
+        notifications.success("User created successfully");
         closeModal();
         fetchUsers();
     } catch (error) {
-        alert("Failed to create user.");
+        notifications.error("Failed to create user");
     }
 };
 
@@ -622,10 +619,11 @@ const updateUser = async () => {
                 is_active: formData.is_active
             }
         });
+        notifications.success("User updated successfully");
         closeModal();
         fetchUsers();
     } catch (error) {
-        alert("Failed to update user.");
+        notifications.error("Failed to update user");
     }
 };
 
@@ -635,33 +633,32 @@ const sendPasswordRecovery = async () => {
     try {
         await $fetch(`${api}/auth/recover-password`, {
             method: 'POST',
-            // headers: { Authorization: ... } // EP02 is usually public, but check your API requirements
             body: {
                 email: formData.email
             }
         });
-        alert(`Recovery sent to ${formData.email}`);
+        notifications.success(`Recovery sent to ${formData.email}`);
     } catch (error) {
-        alert("Failed to send recovery.");
         console.error(error);
+        notifications.error("Failed to send recovery");
     }
 };
 
-const confirmDelete = async (user: any) => {
+const confirmDelete = async (user) => {
     if (!confirm(`Are you sure you want to delete ${user.name}?`)) return;
     try {
         await $fetch(`${api}/admin/users/${user.id}`, {
             method: 'DELETE',
             headers: { Authorization: `Bearer ${token.value}` }
         });
+        notifications.success("Deleted user");
         fetchUsers();
     } catch (error) {
-        alert("Error deleting user.");
+        notifications.error("Failed to delete user");
     }
 };
 
-// --- HELPERS ---
-const openUserDetails = (user: any) => {
+const openUserDetails = (user) => {
     selectedUser.value = user;
     userHistory.value = generateMockHistory(user.id);
     showDetailsModal.value = true;
@@ -679,7 +676,7 @@ const openCreateModal = () => {
     showModal.value = true;
 };
 
-const openEditModal = (user: any) => {
+const openEditModal = (user) => {
     isEditing.value = true;
     formData.id = user.id;
     formData.name = user.name;
@@ -708,7 +705,7 @@ const resetForm = () => {
     formData.is_active = true;
 };
 
-const getInitials = (name: string) => {
+const getInitials = (name) => {
     if (!name) return '??';
     return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
 };