From 2ecc6242af91e6bd63b11d4acecb8e8772055b46 Mon Sep 17 00:00:00 2001
From: Rogaix <rxg3r.web@gmail.com>
Date: Sat, 23 Aug 2025 00:49:05 +0200
Subject: [PATCH 01/12] fix(ui/components): remove grid-template-columns from
 #app styles to center router views

---
 ui/apps/portal/src/assets/main.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/apps/portal/src/assets/main.css b/ui/apps/portal/src/assets/main.css
index 90bc218..9d60e79 100644
--- a/ui/apps/portal/src/assets/main.css
+++ b/ui/apps/portal/src/assets/main.css
@@ -38,7 +38,6 @@ a,
 
   #app {
     display: grid;
-    grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
 }

From cdebc898dbfc527bd6e4ca1ceb01f58fa242a5d8 Mon Sep 17 00:00:00 2001
From: Rogaix <rxg3r.web@gmail.com>
Date: Sat, 23 Aug 2025 01:01:59 +0200
Subject: [PATCH 02/12] feat: add UsersView component with user loading and
 error handling

---
 ui/apps/portal/src/views/users/UsersView.vue | 50 ++++++++++++++++++++
 ui/apps/portal/src/views/users/index.ts      |  1 +
 ui/apps/portal/src/vue-shims.d.ts            |  5 ++
 3 files changed, 56 insertions(+)
 create mode 100644 ui/apps/portal/src/views/users/UsersView.vue
 create mode 100644 ui/apps/portal/src/views/users/index.ts
 create mode 100644 ui/apps/portal/src/vue-shims.d.ts

diff --git a/ui/apps/portal/src/views/users/UsersView.vue b/ui/apps/portal/src/views/users/UsersView.vue
new file mode 100644
index 0000000..635ab7a
--- /dev/null
+++ b/ui/apps/portal/src/views/users/UsersView.vue
@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <h1 class="text-2xl font-bold mb-4">Users</h1>
+        <Card class="max-w-2xl mx-auto mt-8">
+        <template #content>
+            <div v-if="loading" class="mb-4">Loading users...</div>
+            <div v-else-if="error" class="mb-4 text-red-500">{{ error }}</div>
+            <table v-if="users.length" class="min-w-full">
+            <thead>
+                <tr>
+                <th class="px-4 py-2 border-b">Name</th>
+                <th class="px-4 py-2 border-b">Email</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="user in users" :key="user.id">
+                <td class="px-4 py-2 border-b">{{ user.name }}</td>
+                <td class="px-4 py-2 border-b">{{ user.email }}</td>
+                </tr>
+            </tbody>
+            </table>
+            <div v-else class="text-gray-500">No users found.</div>
+        </template>
+        </Card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { apiService, type User } from '@/services/api'
+import { Card } from '@quixsi/components'
+
+const users = ref<User[]>([])
+const loading = ref(true)
+const error = ref('')
+
+onMounted(async () => {
+  await fetchUsers()
+})
+
+const fetchUsers = async () => {
+  try {
+    users.value = await apiService.getUsers()
+  } catch (e: any) {
+    error.value = e.message || 'Failed to load users.'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
diff --git a/ui/apps/portal/src/views/users/index.ts b/ui/apps/portal/src/views/users/index.ts
new file mode 100644
index 0000000..d6e35d6
--- /dev/null
+++ b/ui/apps/portal/src/views/users/index.ts
@@ -0,0 +1 @@
+export { default as UsersView } from './UsersView.vue'
diff --git a/ui/apps/portal/src/vue-shims.d.ts b/ui/apps/portal/src/vue-shims.d.ts
new file mode 100644
index 0000000..ac1ded7
--- /dev/null
+++ b/ui/apps/portal/src/vue-shims.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

From 957b8dd5be100e3b5dcae2b1ea542316b4b915ba Mon Sep 17 00:00:00 2001
From: Rogaix <rxg3r.web@gmail.com>
Date: Sat, 23 Aug 2025 01:02:23 +0200
Subject: [PATCH 03/12] feat: add routing for UsersView and update HomeView
 with navigation link

---
 ui/apps/portal/src/router/index.ts    | 7 +++++++
 ui/apps/portal/src/views/HomeView.vue | 7 ++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/ui/apps/portal/src/router/index.ts b/ui/apps/portal/src/router/index.ts
index 29788a1..ba95e29 100644
--- a/ui/apps/portal/src/router/index.ts
+++ b/ui/apps/portal/src/router/index.ts
@@ -1,5 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
+
 import HomeView from '../views/HomeView.vue'
+import { UsersView } from '../views/users'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,6 +11,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView,
     },
+    {
+      path: '/users',
+      name: 'users',
+      component: UsersView,
+    },
   ],
 })
 
diff --git a/ui/apps/portal/src/views/HomeView.vue b/ui/apps/portal/src/views/HomeView.vue
index c9997f4..5d769ed 100644
--- a/ui/apps/portal/src/views/HomeView.vue
+++ b/ui/apps/portal/src/views/HomeView.vue
@@ -1,3 +1,8 @@
 <template>
-  Home
+  <div class="space-y-4">
+    <h1 class="text-2xl font-bold">Home</h1>
+    <router-link to="/users" class="text-blue-600 underline hover:text-blue-800">
+      Go to Users
+    </router-link>
+  </div>
 </template>

From 20f35bb3df1c2a3acb80e294a1a59e75206c826b Mon Sep 17 00:00:00 2001
From: Rogaix <rxg3r.web@gmail.com>
Date: Sat, 23 Aug 2025 01:46:34 +0200
Subject: [PATCH 04/12] feat: implement user creation functionality and
 refactor user fetching logic into composable

---
 ui/apps/portal/src/views/users/UsersView.vue  | 27 +++-------
 .../src/views/users/create/CreateUser.vue     | 38 ++++++++++++++
 .../portal/src/views/users/create/index.ts    |  1 +
 ui/apps/portal/src/views/users/index.ts       |  1 +
 ui/apps/portal/src/views/users/useUsers.ts    | 51 +++++++++++++++++++
 5 files changed, 98 insertions(+), 20 deletions(-)
 create mode 100644 ui/apps/portal/src/views/users/create/CreateUser.vue
 create mode 100644 ui/apps/portal/src/views/users/create/index.ts
 create mode 100644 ui/apps/portal/src/views/users/useUsers.ts

diff --git a/ui/apps/portal/src/views/users/UsersView.vue b/ui/apps/portal/src/views/users/UsersView.vue
index 635ab7a..fa4eb84 100644
--- a/ui/apps/portal/src/views/users/UsersView.vue
+++ b/ui/apps/portal/src/views/users/UsersView.vue
@@ -22,29 +22,16 @@
             <div v-else class="text-gray-500">No users found.</div>
         </template>
         </Card>
+        <CreateUser />
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { apiService, type User } from '@/services/api'
+import { onMounted } from 'vue'
 import { Card } from '@quixsi/components'
+import { CreateUser } from './create'
+import { useUsers } from './useUsers'
+const { users, loading, error, fetchUsers } = useUsers()
 
-const users = ref<User[]>([])
-const loading = ref(true)
-const error = ref('')
-
-onMounted(async () => {
-  await fetchUsers()
-})
-
-const fetchUsers = async () => {
-  try {
-    users.value = await apiService.getUsers()
-  } catch (e: any) {
-    error.value = e.message || 'Failed to load users.'
-  } finally {
-    loading.value = false
-  }
-}
-</script>
+onMounted(fetchUsers)
+</script>
\ No newline at end of file
diff --git a/ui/apps/portal/src/views/users/create/CreateUser.vue b/ui/apps/portal/src/views/users/create/CreateUser.vue
new file mode 100644
index 0000000..951107b
--- /dev/null
+++ b/ui/apps/portal/src/views/users/create/CreateUser.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="max-w-2xl mx-auto mt-12 flex flex-col gap-2">
+    <h3 class="text-lg font-semibold mb-2">Create User</h3>
+    <div v-if="error" class="text-red-500 text-sm mt-1">{{ error }}</div>
+    <div class="flex gap-2">
+        <Input
+            v-model="newName"
+            placeholder="Name"
+            class="flex-1"
+        />
+        <Input
+            v-model="newEmail"
+            placeholder="Email"
+            class="flex-1"
+        />
+    </div>
+    <Button 
+        class="bg-slate-500 hover:bg-blue-400 text-white"
+        @click="createNewUser"
+    >
+        Create new user
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Input, Button } from '@quixsi/components'
+import { useUsers } from '../useUsers'
+
+const newName = ref('')
+const newEmail = ref('')
+const { createUser, error } = useUsers()
+
+const createNewUser = async () => {
+    await createUser(newName.value, newEmail.value)
+}
+</script>
diff --git a/ui/apps/portal/src/views/users/create/index.ts b/ui/apps/portal/src/views/users/create/index.ts
new file mode 100644
index 0000000..cc0d2e3
--- /dev/null
+++ b/ui/apps/portal/src/views/users/create/index.ts
@@ -0,0 +1 @@
+export { default as CreateUser } from './CreateUser.vue'
diff --git a/ui/apps/portal/src/views/users/index.ts b/ui/apps/portal/src/views/users/index.ts
index d6e35d6..432bbf0 100644
--- a/ui/apps/portal/src/views/users/index.ts
+++ b/ui/apps/portal/src/views/users/index.ts
@@ -1 +1,2 @@
 export { default as UsersView } from './UsersView.vue'
+export { CreateUser } from './create'
diff --git a/ui/apps/portal/src/views/users/useUsers.ts b/ui/apps/portal/src/views/users/useUsers.ts
new file mode 100644
index 0000000..d4bf78e
--- /dev/null
+++ b/ui/apps/portal/src/views/users/useUsers.ts
@@ -0,0 +1,51 @@
+import { ref } from 'vue'
+import { apiService, type User } from '@/services/api'
+
+export function useUsers() {
+    const users = ref<User[]>([])
+    const loading = ref(true)
+    const error = ref('')
+
+    const fetchUsers = async () => {
+        loading.value = true
+        try {
+            users.value = await apiService.getUsers()
+        } catch (e: any) {
+            error.value = e.message || 'Failed to load users.'
+        } finally {
+            loading.value = false
+        }
+    }
+
+    const createUser = async (name: string, email: string) => {
+        error.value = ''
+        
+        try {
+            if (!name.trim()) {
+                throw new Error('Name is required.')
+            }
+
+            if (!email.trim()) {
+                throw new Error('Email is required.')
+            }
+
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+            if (!emailRegex.test(email)) {
+                throw new Error('Invalid email address.')
+            }
+            
+            await apiService.createUser({ name, email })
+            await fetchUsers()
+        } catch (e: any) {
+            error.value = e.message || 'Failed to create user.'
+        }
+    }
+
+    return {
+        users,
+        loading,
+        error,
+        fetchUsers,
+        createUser,
+    }
+}

From 707ff924d43f60ac7cd30b2dca476fddef899e7a Mon Sep 17 00:00:00 2001
From: Rogaix <rxg3r.web@gmail.com>
Date: Sat, 23 Aug 2025 01:59:07 +0200
Subject: [PATCH 05/12] feat: add delete user functionality and handle no
 content response in API

---
 ui/apps/portal/src/services/api.ts           |  4 +++
 ui/apps/portal/src/views/users/UsersView.vue | 28 +++++++++++++++++---
 ui/apps/portal/src/views/users/useUsers.ts   | 10 +++++++
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/ui/apps/portal/src/services/api.ts b/ui/apps/portal/src/services/api.ts
index 8486cb8..046aa36 100644
--- a/ui/apps/portal/src/services/api.ts
+++ b/ui/apps/portal/src/services/api.ts
@@ -25,6 +25,10 @@ export class ApiService {
       throw new Error(`API request failed: ${response.statusText}`)
     }
 
+    if (response.status === 204) {
+      // No content to parse
+      return undefined as T
+    }
     return response.json()
   }
 
diff --git a/ui/apps/portal/src/views/users/UsersView.vue b/ui/apps/portal/src/views/users/UsersView.vue
index fa4eb84..32e0b28 100644
--- a/ui/apps/portal/src/views/users/UsersView.vue
+++ b/ui/apps/portal/src/views/users/UsersView.vue
@@ -14,8 +14,30 @@
             </thead>
             <tbody>
                 <tr v-for="user in users" :key="user.id">
-                <td class="px-4 py-2 border-b">{{ user.name }}</td>
-                <td class="px-4 py-2 border-b">{{ user.email }}</td>
+                    <td class="px-4 py-2 border-b flex items-center gap-2">
+                        {{ user.name }}
+                        <button 
+                            @click="deleteUser(user.id)" 
+                            title="Delete user" 
+                            class="text-red-500 hover:text-red-700 cursor-pointer"
+                        >
+                            <svg 
+                                xmlns="http://www.w3.org/2000/svg" 
+                                class="inline w-4 h-4" 
+                                fill="none" 
+                                viewBox="0 0 24 24" 
+                                stroke="currentColor"
+                            >
+                                <path 
+                                    stroke-linecap="round" 
+                                    stroke-linejoin="round" 
+                                    stroke-width="2" 
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            </svg>
+                        </button>
+                    </td>
+                    <td class="px-4 py-2 border-b">{{ user.email }}</td>
                 </tr>
             </tbody>
             </table>
@@ -31,7 +53,7 @@ import { onMounted } from 'vue'
 import { Card } from '@quixsi/components'
 import { CreateUser } from './create'
 import { useUsers } from './useUsers'
-const { users, loading, error, fetchUsers } = useUsers()
+const { users, loading, error, fetchUsers, deleteUser } = useUsers()
 
 onMounted(fetchUsers)
 </script>
\ No newline at end of file
diff --git a/ui/apps/portal/src/views/users/useUsers.ts b/ui/apps/portal/src/views/users/useUsers.ts
index d4bf78e..f81fcef 100644
--- a/ui/apps/portal/src/views/users/useUsers.ts
+++ b/ui/apps/portal/src/views/users/useUsers.ts
@@ -41,11 +41,21 @@ export function useUsers() {
         }
     }
 
+    const deleteUser = async (id: string) => {
+        try {
+            await apiService.deleteUser(id)
+            await fetchUsers()
+        } catch (e: any) {
+            error.value = e.message || 'Failed to delete user.'
+        }
+    }
+
     return {
         users,
         loading,
         error,
         fetchUsers,
         createUser,
+        deleteUser,
     }
 }

From 3bcc69dd7a2bc030c4099144949f7f2e14292927 Mon Sep 17 00:00:00 2001
From: Rogaix <rxg3r.web@gmail.com>
Date: Sat, 23 Aug 2025 02:06:10 +0200
Subject: [PATCH 06/12] refactor: change useUsers to a singleton composable. A
 proper store should be considered for a bigger prod application

---
 ui/apps/portal/src/views/users/useUsers.ts | 78 ++++++++++------------
 1 file changed, 37 insertions(+), 41 deletions(-)

diff --git a/ui/apps/portal/src/views/users/useUsers.ts b/ui/apps/portal/src/views/users/useUsers.ts
index f81fcef..46b242d 100644
--- a/ui/apps/portal/src/views/users/useUsers.ts
+++ b/ui/apps/portal/src/views/users/useUsers.ts
@@ -1,55 +1,51 @@
 import { ref } from 'vue'
 import { apiService, type User } from '@/services/api'
 
-export function useUsers() {
-    const users = ref<User[]>([])
-    const loading = ref(true)
-    const error = ref('')
+const users = ref<User[]>([])
+const loading = ref(true)
+const error = ref('')
 
-    const fetchUsers = async () => {
-        loading.value = true
-        try {
-            users.value = await apiService.getUsers()
-        } catch (e: any) {
-            error.value = e.message || 'Failed to load users.'
-        } finally {
-            loading.value = false
-        }
+const fetchUsers = async () => {
+    loading.value = true
+    try {
+        users.value = await apiService.getUsers()
+    } catch (e: any) {
+        error.value = e.message || 'Failed to load users.'
+    } finally {
+        loading.value = false
     }
+}
 
-    const createUser = async (name: string, email: string) => {
-        error.value = ''
-        
-        try {
-            if (!name.trim()) {
-                throw new Error('Name is required.')
-            }
-
-            if (!email.trim()) {
-                throw new Error('Email is required.')
-            }
-
-            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-            if (!emailRegex.test(email)) {
-                throw new Error('Invalid email address.')
-            }
-            
-            await apiService.createUser({ name, email })
-            await fetchUsers()
-        } catch (e: any) {
-            error.value = e.message || 'Failed to create user.'
+const createUser = async (name: string, email: string) => {
+    error.value = ''
+    try {
+        if (!name.trim()) {
+            throw new Error('Name is required.')
+        }
+        if (!email.trim()) {
+            throw new Error('Email is required.')
         }
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+        if (!emailRegex.test(email)) {
+            throw new Error('Invalid email address.')
+        }
+        await apiService.createUser({ name, email })
+        await fetchUsers()
+    } catch (e: any) {
+        error.value = e.message || 'Failed to create user.'
     }
+}
 
-    const deleteUser = async (id: string) => {
-        try {
-            await apiService.deleteUser(id)
-            await fetchUsers()
-        } catch (e: any) {
-            error.value = e.message || 'Failed to delete user.'
-        }
+const deleteUser = async (id: string) => {
+    try {
+        await apiService.deleteUser(id)
+        await fetchUsers()
+    } catch (e: any) {
+        error.value = e.message || 'Failed to delete user.'
     }
+}
 
+export function useUsers() {
     return {
         users,
         loading,

From eec81b8cf06c94a60cd0842aba7c7d7d5a50b634 Mon Sep 17 00:00:00 2001
From: Rogaix <rxg3r.web@gmail.com>
Date: Sat, 23 Aug 2025 02:11:03 +0200
Subject: [PATCH 07/12] fix: reset error state before fetching users and
 creating a user

feat: add a basic check if an email already exists.
---
 ui/apps/portal/src/views/users/useUsers.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/ui/apps/portal/src/views/users/useUsers.ts b/ui/apps/portal/src/views/users/useUsers.ts
index 46b242d..44464cc 100644
--- a/ui/apps/portal/src/views/users/useUsers.ts
+++ b/ui/apps/portal/src/views/users/useUsers.ts
@@ -7,6 +7,8 @@ const error = ref('')
 
 const fetchUsers = async () => {
     loading.value = true
+    error.value = ''
+
     try {
         users.value = await apiService.getUsers()
     } catch (e: any) {
@@ -25,10 +27,16 @@ const createUser = async (name: string, email: string) => {
         if (!email.trim()) {
             throw new Error('Email is required.')
         }
+        
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
         if (!emailRegex.test(email)) {
             throw new Error('Invalid email address.')
         }
+
+        if (users.value.some(u => u.email.toLowerCase() === email.trim().toLowerCase())) {
+            throw new Error('Email is already in use.')
+        }
+        
         await apiService.createUser({ name, email })
         await fetchUsers()
     } catch (e: any) {
@@ -37,6 +45,8 @@ const createUser = async (name: string, email: string) => {
 }
 
 const deleteUser = async (id: string) => {
+    error.value = ''
+    
     try {
         await apiService.deleteUser(id)
         await fetchUsers()

From 310f1999a6f966be7be9138acb95c5036cf73324 Mon Sep 17 00:00:00 2001
From: Rogaix <rxg3r.web@gmail.com>
Date: Sat, 23 Aug 2025 02:19:35 +0200
Subject: [PATCH 08/12] fix: adjust error message display and layout in
 UsersView and CreateUser components

---
 ui/apps/portal/src/views/users/UsersView.vue         | 4 ++--
 ui/apps/portal/src/views/users/create/CreateUser.vue | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/ui/apps/portal/src/views/users/UsersView.vue b/ui/apps/portal/src/views/users/UsersView.vue
index 32e0b28..8491c55 100644
--- a/ui/apps/portal/src/views/users/UsersView.vue
+++ b/ui/apps/portal/src/views/users/UsersView.vue
@@ -1,10 +1,9 @@
 <template>
     <div>
         <h1 class="text-2xl font-bold mb-4">Users</h1>
-        <Card class="max-w-2xl mx-auto mt-8">
+        <Card class="max-w-2xl mx-auto my-8">
         <template #content>
             <div v-if="loading" class="mb-4">Loading users...</div>
-            <div v-else-if="error" class="mb-4 text-red-500">{{ error }}</div>
             <table v-if="users.length" class="min-w-full">
             <thead>
                 <tr>
@@ -44,6 +43,7 @@
             <div v-else class="text-gray-500">No users found.</div>
         </template>
         </Card>
+        <div v-if="error" class="max-w-2xl mx-auto mt-8 text-red-500">{{ error }}</div>
         <CreateUser />
     </div>
 </template>
diff --git a/ui/apps/portal/src/views/users/create/CreateUser.vue b/ui/apps/portal/src/views/users/create/CreateUser.vue
index 951107b..ce8a815 100644
--- a/ui/apps/portal/src/views/users/create/CreateUser.vue
+++ b/ui/apps/portal/src/views/users/create/CreateUser.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="max-w-2xl mx-auto mt-12 flex flex-col gap-2">
+  <div class="max-w-2xl mx-auto mt-2 flex flex-col gap-2">
     <h3 class="text-lg font-semibold mb-2">Create User</h3>
-    <div v-if="error" class="text-red-500 text-sm mt-1">{{ error }}</div>
     <div class="flex gap-2">
         <Input
             v-model="newName"

From 8725af8d91f985a121bc5fbea8853113c2fe08cd Mon Sep 17 00:00:00 2001
From: Rogaix <rxg3r.web@gmail.com>
Date: Sat, 23 Aug 2025 02:54:10 +0200
Subject: [PATCH 09/12] feat: add Toast component and update exports in index
 files

---
 ui/packages/components/src/ui/index.ts        |  3 +-
 ui/packages/components/src/ui/toast/Toast.vue | 68 +++++++++++++++++++
 ui/packages/components/src/ui/toast/index.ts  |  1 +
 3 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 ui/packages/components/src/ui/toast/Toast.vue
 create mode 100644 ui/packages/components/src/ui/toast/index.ts

diff --git a/ui/packages/components/src/ui/index.ts b/ui/packages/components/src/ui/index.ts
index 18c161d..fa806df 100644
--- a/ui/packages/components/src/ui/index.ts
+++ b/ui/packages/components/src/ui/index.ts
@@ -1,4 +1,5 @@
 export * from "./button"
 export * from "./input"
 export * from "./checkbox"
-export * from "./card"
\ No newline at end of file
+export * from "./card"
+export * from "./toast"
\ No newline at end of file
diff --git a/ui/packages/components/src/ui/toast/Toast.vue b/ui/packages/components/src/ui/toast/Toast.vue
new file mode 100644
index 0000000..733f031
--- /dev/null
+++ b/ui/packages/components/src/ui/toast/Toast.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref, watch, onUnmounted } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#lib/utils'
+
+const props = defineProps<{
+    message: string
+    type?: 'success' | 'error'
+    duration?: number
+    class?: HTMLAttributes['class']
+    toastKey?: string | number
+}>()
+
+const visible = ref(false)
+let timeout: ReturnType<typeof setTimeout> | null = null
+
+watch(() => props.toastKey, (newKey) => {
+    if (timeout) {
+        clearTimeout(timeout)
+    }
+
+    visible.value = false
+
+    if (!props.message) {
+        return
+    }
+
+    setTimeout(() => {
+        visible.value = true
+        timeout = setTimeout(() => {
+            visible.value = false
+        }, props.duration ?? 3000)
+    }, 10)
+}, { immediate: true })
+
+onUnmounted(() => {
+    if (timeout) {
+        clearTimeout(timeout)
+    }
+})
+</script>
+
+<template>
+    <transition name="fade">
+        <div
+            v-if="visible"
+            :key="props.toastKey"
+            data-slot="toast"
+            :class="cn(
+                'fixed z-50 top-8 right-8 px-4 py-2 rounded shadow-lg',
+                type === 'error' ? 'bg-red-500 text-white' : 'bg-green-500 text-white',
+                props.class,
+            )"
+        >
+            {{ message }}
+        </div>
+    </transition>
+</template>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active {
+    transition: opacity 0.3s;
+}
+
+.fade-enter-from, .fade-leave-to {
+    opacity: 0;
+}
+</style>
diff --git a/ui/packages/components/src/ui/toast/index.ts b/ui/packages/components/src/ui/toast/index.ts
new file mode 100644
index 0000000..2ee019c
--- /dev/null
+++ b/ui/packages/components/src/ui/toast/index.ts
@@ -0,0 +1 @@
+export { default as Toast } from './Toast.vue'

From 67527a8c707ee1589eb3f1380f35c8d62d7dac38 Mon Sep 17 00:00:00 2001
From: Rogaix <rxg3r.web@gmail.com>
Date: Sat, 23 Aug 2025 03:12:03 +0200
Subject: [PATCH 10/12] feat: implement toast notifications for user actions
 and integrate with useUsers

---
 ui/apps/portal/src/App.vue                   | 11 ++++++++
 ui/apps/portal/src/composables/useToast.ts   | 27 ++++++++++++++++++++
 ui/apps/portal/src/views/users/UsersView.vue |  4 +--
 ui/apps/portal/src/views/users/useUsers.ts   |  9 ++++++-
 4 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 ui/apps/portal/src/composables/useToast.ts

diff --git a/ui/apps/portal/src/App.vue b/ui/apps/portal/src/App.vue
index a78fb6f..62d2492 100644
--- a/ui/apps/portal/src/App.vue
+++ b/ui/apps/portal/src/App.vue
@@ -1,7 +1,18 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import { Toast } from '@quixsi/components'
+import { useToast } from '@/composables/useToast'
+
+const { toast } = useToast()
 </script>
 
 <template>
+  <Toast 
+      v-if="toast.message" 
+      :message="toast.message" 
+      :type="toast.type" 
+      :toastKey="toast.key" 
+      @click="toast.message = ''"
+  />
   <RouterView />
 </template>
diff --git a/ui/apps/portal/src/composables/useToast.ts b/ui/apps/portal/src/composables/useToast.ts
new file mode 100644
index 0000000..f2fa3de
--- /dev/null
+++ b/ui/apps/portal/src/composables/useToast.ts
@@ -0,0 +1,27 @@
+import { ref } from 'vue'
+
+export type ToastType = 'success' | 'error'
+
+interface ToastState {
+    message: string
+    type: ToastType
+    key: number
+}
+
+const toast = ref<ToastState>({ message: '', type: 'success', key: 0 })
+
+export function useToast() {
+    const showSuccess = (message: string) => {
+        toast.value = { message, type: 'success', key: Date.now() }
+    }
+
+    const showError = (message: string) => {
+        toast.value = { message, type: 'error', key: Date.now() }
+    }
+
+    const clearToast = () => {
+        toast.value.message = ''
+    }
+  
+    return { toast, showSuccess, showError, clearToast }
+}
diff --git a/ui/apps/portal/src/views/users/UsersView.vue b/ui/apps/portal/src/views/users/UsersView.vue
index 8491c55..b6b00d9 100644
--- a/ui/apps/portal/src/views/users/UsersView.vue
+++ b/ui/apps/portal/src/views/users/UsersView.vue
@@ -43,7 +43,6 @@
             <div v-else class="text-gray-500">No users found.</div>
         </template>
         </Card>
-        <div v-if="error" class="max-w-2xl mx-auto mt-8 text-red-500">{{ error }}</div>
         <CreateUser />
     </div>
 </template>
@@ -53,7 +52,8 @@ import { onMounted } from 'vue'
 import { Card } from '@quixsi/components'
 import { CreateUser } from './create'
 import { useUsers } from './useUsers'
-const { users, loading, error, fetchUsers, deleteUser } = useUsers()
+
+const { users, loading, fetchUsers, deleteUser } = useUsers()
 
 onMounted(fetchUsers)
 </script>
\ No newline at end of file
diff --git a/ui/apps/portal/src/views/users/useUsers.ts b/ui/apps/portal/src/views/users/useUsers.ts
index 44464cc..5b6967c 100644
--- a/ui/apps/portal/src/views/users/useUsers.ts
+++ b/ui/apps/portal/src/views/users/useUsers.ts
@@ -1,6 +1,8 @@
 import { ref } from 'vue'
 import { apiService, type User } from '@/services/api'
+import { useToast } from '@/composables/useToast'
 
+const { showSuccess, showError } = useToast()
 const users = ref<User[]>([])
 const loading = ref(true)
 const error = ref('')
@@ -13,6 +15,7 @@ const fetchUsers = async () => {
         users.value = await apiService.getUsers()
     } catch (e: any) {
         error.value = e.message || 'Failed to load users.'
+        showError(error.value)
     } finally {
         loading.value = false
     }
@@ -39,19 +42,23 @@ const createUser = async (name: string, email: string) => {
         
         await apiService.createUser({ name, email })
         await fetchUsers()
+        showSuccess('User created successfully!')
     } catch (e: any) {
         error.value = e.message || 'Failed to create user.'
+        showError(error.value)
     }
 }
 
 const deleteUser = async (id: string) => {
     error.value = ''
-    
+
     try {
         await apiService.deleteUser(id)
         await fetchUsers()
+        showSuccess('User deleted successfully!')
     } catch (e: any) {
         error.value = e.message || 'Failed to delete user.'
+        showError(error.value)
     }
 }
 

From 3669fb13e384f293f4d45489c875f17f6a830fbb Mon Sep 17 00:00:00 2001
From: Rogaix <rxg3r.web@gmail.com>
Date: Sat, 23 Aug 2025 03:17:04 +0200
Subject: [PATCH 11/12] refactor: moved useUsers composable to correct folder

---
 ui/apps/portal/src/{views/users => composables}/useUsers.ts | 0
 ui/apps/portal/src/views/users/UsersView.vue                | 2 +-
 ui/apps/portal/src/views/users/create/CreateUser.vue        | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename ui/apps/portal/src/{views/users => composables}/useUsers.ts (100%)

diff --git a/ui/apps/portal/src/views/users/useUsers.ts b/ui/apps/portal/src/composables/useUsers.ts
similarity index 100%
rename from ui/apps/portal/src/views/users/useUsers.ts
rename to ui/apps/portal/src/composables/useUsers.ts
diff --git a/ui/apps/portal/src/views/users/UsersView.vue b/ui/apps/portal/src/views/users/UsersView.vue
index b6b00d9..07e6c67 100644
--- a/ui/apps/portal/src/views/users/UsersView.vue
+++ b/ui/apps/portal/src/views/users/UsersView.vue
@@ -51,7 +51,7 @@
 import { onMounted } from 'vue'
 import { Card } from '@quixsi/components'
 import { CreateUser } from './create'
-import { useUsers } from './useUsers'
+import { useUsers } from '@/composables/useUsers'
 
 const { users, loading, fetchUsers, deleteUser } = useUsers()
 
diff --git a/ui/apps/portal/src/views/users/create/CreateUser.vue b/ui/apps/portal/src/views/users/create/CreateUser.vue
index ce8a815..e0e54d2 100644
--- a/ui/apps/portal/src/views/users/create/CreateUser.vue
+++ b/ui/apps/portal/src/views/users/create/CreateUser.vue
@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { Input, Button } from '@quixsi/components'
-import { useUsers } from '../useUsers'
+import { useUsers } from '@/composables/useUsers'
 
 const newName = ref('')
 const newEmail = ref('')

From 02f2b99d72b5a83c5b57db76b320c9013ded31cf Mon Sep 17 00:00:00 2001
From: Rogaix <rxg3r.web@gmail.com>
Date: Sat, 23 Aug 2025 03:40:42 +0200
Subject: [PATCH 12/12] feat: refactor toast handling to support multiple
 notifications and improve display logic

---
 ui/apps/portal/src/App.vue                    | 10 +--
 ui/apps/portal/src/composables/useToast.ts    | 46 ++++++++---
 ui/packages/components/src/ui/toast/Toast.vue | 78 ++++++++-----------
 3 files changed, 69 insertions(+), 65 deletions(-)

diff --git a/ui/apps/portal/src/App.vue b/ui/apps/portal/src/App.vue
index 62d2492..088a075 100644
--- a/ui/apps/portal/src/App.vue
+++ b/ui/apps/portal/src/App.vue
@@ -3,16 +3,10 @@ import { RouterView } from 'vue-router'
 import { Toast } from '@quixsi/components'
 import { useToast } from '@/composables/useToast'
 
-const { toast } = useToast()
+const { toasts, removeToast } = useToast()
 </script>
 
 <template>
-  <Toast 
-      v-if="toast.message" 
-      :message="toast.message" 
-      :type="toast.type" 
-      :toastKey="toast.key" 
-      @click="toast.message = ''"
-  />
+  <Toast :toasts="toasts" @remove="removeToast" />
   <RouterView />
 </template>
diff --git a/ui/apps/portal/src/composables/useToast.ts b/ui/apps/portal/src/composables/useToast.ts
index f2fa3de..ad5e415 100644
--- a/ui/apps/portal/src/composables/useToast.ts
+++ b/ui/apps/portal/src/composables/useToast.ts
@@ -2,26 +2,52 @@ import { ref } from 'vue'
 
 export type ToastType = 'success' | 'error'
 
-interface ToastState {
+export interface ToastState {
     message: string
     type: ToastType
     key: number
+    duration?: number
+    class?: string
 }
 
-const toast = ref<ToastState>({ message: '', type: 'success', key: 0 })
+const toasts = ref<ToastState[]>([])
+const timers = new Map<number, ReturnType<typeof setTimeout>>()
 
 export function useToast() {
-    const showSuccess = (message: string) => {
-        toast.value = { message, type: 'success', key: Date.now() }
+    const scheduleRemoval = (key: number, duration = 3000) => {
+        if (timers.has(key)) return
+        const t = setTimeout(() => {
+            removeToast(key)
+        }, duration)
+        timers.set(key, t)
     }
 
-    const showError = (message: string) => {
-        toast.value = { message, type: 'error', key: Date.now() }
+    const showSuccess = (message: string, duration = 3000) => {
+        const key = Date.now() + Math.random()
+        toasts.value.push({ message, type: 'success', key, duration })
+        scheduleRemoval(key, duration)
     }
 
-    const clearToast = () => {
-        toast.value.message = ''
+    const showError = (message: string, duration = 3000) => {
+        const key = Date.now() + Math.random()
+        toasts.value.push({ message, type: 'error', key, duration })
+        scheduleRemoval(key, duration)
     }
-  
-    return { toast, showSuccess, showError, clearToast }
+
+    const removeToast = (key: string | number) => {
+        toasts.value = toasts.value.filter(t => t.key !== key)
+        const timer = timers.get(Number(key))
+        if (timer) {
+            clearTimeout(timer)
+            timers.delete(Number(key))
+        }
+    }
+
+    const clearToasts = () => {
+        toasts.value = []
+        timers.forEach(t => clearTimeout(t))
+        timers.clear()
+    }
+
+    return { toasts, showSuccess, showError, removeToast, clearToasts }
 }
diff --git a/ui/packages/components/src/ui/toast/Toast.vue b/ui/packages/components/src/ui/toast/Toast.vue
index 733f031..ac97b07 100644
--- a/ui/packages/components/src/ui/toast/Toast.vue
+++ b/ui/packages/components/src/ui/toast/Toast.vue
@@ -1,60 +1,44 @@
 <script setup lang="ts">
-import { ref, watch, onUnmounted } from 'vue'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '#lib/utils'
 
-const props = defineProps<{
-    message: string
-    type?: 'success' | 'error'
-    duration?: number
-    class?: HTMLAttributes['class']
-    toastKey?: string | number
+defineProps<{
+    toasts: Array<{
+            message: string
+            type?: 'success' | 'error'
+            key: string | number
+            class?: HTMLAttributes['class']
+            duration?: number
+    }>
 }>()
 
-const visible = ref(false)
-let timeout: ReturnType<typeof setTimeout> | null = null
-
-watch(() => props.toastKey, (newKey) => {
-    if (timeout) {
-        clearTimeout(timeout)
-    }
-
-    visible.value = false
-
-    if (!props.message) {
-        return
-    }
-
-    setTimeout(() => {
-        visible.value = true
-        timeout = setTimeout(() => {
-            visible.value = false
-        }, props.duration ?? 3000)
-    }, 10)
-}, { immediate: true })
+const emit = defineEmits<{
+    (e: 'remove', key: string | number): void
+}>()
 
-onUnmounted(() => {
-    if (timeout) {
-        clearTimeout(timeout)
-    }
-})
+const handleRemove = (key: string | number) => {
+    emit('remove', key)
+}
 </script>
 
 <template>
-    <transition name="fade">
-        <div
-            v-if="visible"
-            :key="props.toastKey"
-            data-slot="toast"
-            :class="cn(
-                'fixed z-50 top-8 right-8 px-4 py-2 rounded shadow-lg',
-                type === 'error' ? 'bg-red-500 text-white' : 'bg-green-500 text-white',
-                props.class,
-            )"
-        >
-            {{ message }}
-        </div>
-    </transition>
+    <div class="fixed z-50 top-8 right-8 flex flex-col gap-2 items-end">
+        <transition-group name="fade" tag="div">
+            <div
+                v-for="item in toasts"
+                :key="item.key"
+                data-slot="toast"
+                @click="handleRemove(item.key)"
+                :class="cn(
+                    'px-4 py-2 mb-3 rounded shadow-lg cursor-pointer',
+                    item.type === 'error' ? 'bg-red-500 text-white' : 'bg-green-500 text-white',
+                    item.class,
+                )"
+            >
+                {{ item.message }}
+            </div>
+        </transition-group>
+    </div>
 </template>
 
 <style scoped>