From a74e2dc1b95872990297176f440ae10949263d85 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sat, 28 Feb 2026 13:44:37 +0000
Subject: [PATCH 1/6] feat: add role filtering for members in MemberSelect
 component

---
 .../src/components/members/MemberSelect.vue   | 53 +++++++++++++++++--
 1 file changed, 50 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/members/MemberSelect.vue b/frontend/src/components/members/MemberSelect.vue
index 60e69e9c..5bdd734d 100644
--- a/frontend/src/components/members/MemberSelect.vue
+++ b/frontend/src/components/members/MemberSelect.vue
@@ -51,9 +51,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { useQuery } from "@pinia/colada";
-import { getAllMembers } from "@/api/members";
+import { getAllMembers, getMemberRole } from "@/api/members";
+import type { TeamRole } from "@/dto/teams";
 import {
   Select,
   SelectContent,
@@ -70,6 +71,7 @@ interface Props {
   placeholder?: string;
   disabled?: boolean;
   eventId?: number;
+  roleFilter?: TeamRole; // Filter members by role
 }
 
 const props = defineProps<Props>();
@@ -85,10 +87,55 @@ const { data: membersData } = useQuery({
   query: () => getAllMembers({ event: props.eventId }),
 });
 
+// Store member roles when filtering by role
+const memberRoles = ref<Record<string, TeamRole>>({});
+const loadingRoles = ref(false);
+
+// Fetch roles for all members when roleFilter is provided
+watch(
+  () => [membersData.value, props.roleFilter] as const,
+  async ([data, roleFilter]) => {
+    if (!data?.data || !roleFilter) {
+      memberRoles.value = {};
+      return;
+    }
+
+    loadingRoles.value = true;
+    const roles: Record<string, TeamRole> = {};
+
+    try {
+      await Promise.all(
+        data.data.map(async (member) => {
+          try {
+            const response = await getMemberRole(member.id);
+            if (response.data?.role) {
+              roles[member.id] = response.data.role as TeamRole;
+            }
+          } catch {
+            // Member might not have a role, skip
+          }
+        }),
+      );
+    } finally {
+      memberRoles.value = roles;
+      loadingRoles.value = false;
+    }
+  },
+  { immediate: true },
+);
+
 const sortedMembers = computed(() => {
   if (!membersData.value?.data) return [];
 
-  const members = membersData.value.data;
+  let members = membersData.value.data;
+
+  // Filter by role if specified
+  if (props.roleFilter && !loadingRoles.value) {
+    members = members.filter(
+      (member) => memberRoles.value[member.id] === props.roleFilter,
+    );
+  }
+
   return members.sort((a, b) =>
     a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
   );

From 042f13db7ba742b7a29c79772c23f01dbca2ab13 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sat, 28 Feb 2026 13:45:11 +0000
Subject: [PATCH 2/6] feat: enhance CoordinationTeamsView with improved UI and
 member management features

---
 .../CoordinationTeamsView.vue                 | 608 +++++++++---------
 1 file changed, 320 insertions(+), 288 deletions(-)

diff --git a/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue b/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
index fe0b5a6c..6cd4bb3c 100644
--- a/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
+++ b/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
@@ -1,185 +1,246 @@
 <template>
-  <div class="p-4">
-    <Card>
+  <div class="max-w-7xl mx-auto p-6">
+    <div class="mb-8">
+      <h1 class="text-3xl font-bold mb-2">Coordination Teams</h1>
+      <p class="text-muted-foreground">
+        Manage coordination teams and assign members to coordinators
+      </p>
+    </div>
+
+    <!-- Create new team -->
+    <Card class="mb-6">
       <CardHeader>
-        <CardTitle>Coordination Teams</CardTitle>
-        <CardDescription
-          >Manage coordination teams and their mappings</CardDescription
-        >
+        <CardTitle>Create New Team</CardTitle>
       </CardHeader>
       <CardContent>
-        <div
-          class="mb-4 flex flex-col sm:flex-row gap-2 items-start sm:items-center"
-        >
-          <div class="flex flex-col w-full sm:w-auto">
-            <label class="text-sm text-zinc-700 mb-1">Coordinator</label>
+        <div class="flex flex-col sm:flex-row gap-3 items-end">
+          <div class="flex-1 w-full">
+            <label class="text-sm font-medium mb-1.5 block"
+              >Select Coordinator</label
+            >
             <MemberSelect
               v-model="newCoordinator"
               :event-id="selectedEventId"
+              placeholder="Choose a coordinator..."
+              role-filter="COORDINATOR"
             />
           </div>
-          <div class="w-full sm:w-auto">
-            <Button
-              class="w-full sm:w-auto"
-              :disabled="creating || !newCoordinator"
-              @click="createTeam"
-              >Create</Button
-            >
-          </div>
-        </div>
-
-        <div v-if="isLoading" class="py-6 text-center">Loading…</div>
-
-        <div v-else-if="teams.length === 0" class="text-zinc-500">
-          No coordination teams yet.
+          <Button
+            class="w-full sm:w-auto"
+            :disabled="creating || !newCoordinator"
+            @click="createTeam"
+          >
+            <span v-if="creating">Creating...</span>
+            <span v-else>Create Team</span>
+          </Button>
         </div>
+      </CardContent>
+    </Card>
 
-        <ul>
-          <li v-for="t in teams" :key="t.id" class="mb-4">
-            <Card class="p-3">
+    <!-- Loading state -->
+    <div v-if="isLoading" class="py-12 text-center">
+      <div
+        class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"
+      ></div>
+      <p class="mt-2 text-muted-foreground">Loading teams...</p>
+    </div>
+
+    <!-- Empty state -->
+    <div
+      v-else-if="teams.length === 0"
+      class="py-12 text-center border-2 border-dashed rounded-lg"
+    >
+      <p class="text-muted-foreground text-lg">No coordination teams yet.</p>
+      <p class="text-sm text-muted-foreground mt-1">
+        Create your first team above to get started.
+      </p>
+    </div>
+
+    <!-- Teams grid -->
+    <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <Card v-for="team in teams" :key="team.id" class="overflow-hidden">
+        <CardHeader class="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
+          <div class="flex items-start justify-between">
+            <div class="flex items-center gap-3">
               <div
-                class="flex flex-col md:flex-row justify-between items-start gap-4"
+                class="w-12 h-12 rounded-full bg-white border-2 border-indigo-200 flex items-center justify-center"
               >
-                <div class="flex-1">
-                  <div class="flex items-center gap-2">
-                    <Image
-                      v-if="t.coordinator && membersCache[t.coordinator.member]"
-                      :src="(membersCache[t.coordinator.member] as any)?.img"
-                      :alt="
-                        (membersCache[t.coordinator.member] as any)?.name ||
-                        'coordinator'
-                      "
-                      class="w-6 h-6 rounded-full object-cover border"
-                    />
-                    <div class="font-semibold">{{ t.name }}'s Team</div>
-                  </div>
-                  <div class="text-sm text-zinc-600">Coordinated members:</div>
-                  <ul class="mt-2">
-                    <li
-                      v-for="mId in t.coordinatedMembers"
-                      :key="mId"
-                      class="flex items-center gap-2"
-                    >
-                      <div class="flex items-center gap-2">
-                        <MemberWithAvatar
-                          v-if="membersCache[mId]"
-                          :member="membersCache[mId] as any"
-                          size="sm"
-                        />
-                        <div v-else class="text-sm text-zinc-700">
-                          {{ mId }}
-                        </div>
-                      </div>
-                      <Popover
-                        v-model:open="removeConfirmOpen[t.id + '_' + mId]"
-                      >
-                        <PopoverTrigger as-child>
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            :disabled="removing[t.id + '_' + mId]"
-                          >
-                            {{
-                              removing[t.id + "_" + mId]
-                                ? "Removing..."
-                                : "Remove"
-                            }}
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent class="w-80">
-                          <ConfirmDelete
-                            title="Remove member"
-                            message="Remove this member from the coordination team?"
-                            :is-deleting="removing[t.id + '_' + mId]"
-                            @cancel="
-                              removeConfirmOpen[t.id + '_' + mId] = false
-                            "
-                            @confirm="removeMemberConfirm(t, mId)"
-                          />
-                        </PopoverContent>
-                      </Popover>
-                    </li>
-                  </ul>
-
-                  <div class="mt-3 grid grid-cols-1 gap-2">
-                    <div class="flex gap-2 items-center">
-                      <MemberSelect
-                        v-model="selectedTeamToAdd[t.id]"
-                        :event-id="selectedEventId"
-                      />
-                      <Button
-                        :disabled="adding[t.id]"
-                        @click="addCoordinatedTeamFor(t)"
-                        >Add</Button
-                      >
-                    </div>
-                  </div>
-                </div>
-
-                <div
-                  class="flex-shrink-0 mt-3 md:mt-0 md:ml-4 w-full md:w-auto"
+                <Image
+                  v-if="team.coordinator && membersMap[team.coordinator.member]"
+                  :src="membersMap[team.coordinator.member]?.img"
+                  :alt="
+                    membersMap[team.coordinator.member]?.name || 'Coordinator'
+                  "
+                  class="w-10 h-10 rounded-full object-cover"
+                />
+                <span v-else class="text-lg font-bold text-indigo-600">{{
+                  team.name.charAt(0).toUpperCase()
+                }}</span>
+              </div>
+              <div>
+                <CardTitle class="text-xl">{{ team.name }}'s Team</CardTitle>
+                <p
+                  v-if="team.coordinator && membersMap[team.coordinator.member]"
+                  class="text-sm text-muted-foreground"
                 >
-                  <div
-                    class="flex flex-col md:flex-row gap-2 items-stretch md:items-center"
+                  Coordinator:
+                  {{ membersMap[team.coordinator.member]?.name }}
+                </p>
+              </div>
+            </div>
+            <div class="flex gap-2">
+              <Button size="sm" variant="ghost" @click="openEdit(team)">
+                Edit
+              </Button>
+              <Popover v-model:open="deleteConfirmOpen[team.id]">
+                <PopoverTrigger as-child>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    class="text-red-600 hover:text-red-700 hover:bg-red-50"
                   >
+                    Delete
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent class="w-80">
+                  <ConfirmDelete
+                    title="Delete coordination team"
+                    message="Are you sure you want to delete this coordination team? This action cannot be undone."
+                    :is-deleting="deleting[team.id]"
+                    @cancel="deleteConfirmOpen[team.id] = false"
+                    @confirm="deleteTeamConfirm(team)"
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent class="p-4">
+          <!-- Members list -->
+          <div class="mb-4">
+            <h4 class="text-sm font-semibold text-muted-foreground mb-3">
+              Team Members ({{ team.coordinatedMembers?.length || 0 }})
+            </h4>
+            <div
+              v-if="team.coordinatedMembers?.length"
+              class="space-y-2 max-h-64 overflow-y-auto"
+            >
+              <div
+                v-for="memberId in team.coordinatedMembers"
+                :key="memberId"
+                class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition-colors"
+              >
+                <div class="flex items-center gap-2 flex-1 min-w-0">
+                  <Image
+                    v-if="membersMap[memberId]"
+                    :src="membersMap[memberId]?.img"
+                    :alt="membersMap[memberId]?.name || 'Member'"
+                    class="w-8 h-8 rounded-full object-cover border flex-shrink-0"
+                  />
+                  <span v-if="membersMap[memberId]" class="truncate text-sm">{{
+                    membersMap[memberId]?.name
+                  }}</span>
+                  <span v-else class="text-sm text-muted-foreground truncate">{{
+                    memberId
+                  }}</span>
+                </div>
+                <Popover
+                  v-model:open="removeConfirmOpen[team.id + '_' + memberId]"
+                >
+                  <PopoverTrigger as-child>
                     <Button
-                      class="w-full md:w-auto"
-                      variant="outline"
-                      @click="openEdit(t)"
-                      >Edit</Button
+                      size="sm"
+                      variant="ghost"
+                      class="flex-shrink-0 text-red-600 hover:text-red-700 hover:bg-red-50"
+                      :disabled="removing[team.id + '_' + memberId]"
                     >
-                    <Popover v-model:open="deleteConfirmOpen[t.id]">
-                      <PopoverTrigger as-child>
-                        <Button class="w-full md:w-auto" variant="destructive"
-                          >Delete</Button
-                        >
-                      </PopoverTrigger>
-                      <PopoverContent class="w-80">
-                        <ConfirmDelete
-                          title="Delete coordination team"
-                          message="Are you sure you want to delete this coordination team? This action cannot be undone."
-                          :is-deleting="deleting[t.id]"
-                          @cancel="deleteConfirmOpen[t.id] = false"
-                          @confirm="deleteTeamConfirm(t)"
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                </div>
+                      {{
+                        removing[team.id + "_" + memberId]
+                          ? "Removing..."
+                          : "Remove"
+                      }}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent class="w-80">
+                    <ConfirmDelete
+                      title="Remove member"
+                      message="Remove this member from the coordination team?"
+                      :is-deleting="removing[team.id + '_' + memberId]"
+                      @cancel="
+                        removeConfirmOpen[team.id + '_' + memberId] = false
+                      "
+                      @confirm="removeMemberConfirm(team, memberId)"
+                    />
+                  </PopoverContent>
+                </Popover>
               </div>
-            </Card>
-          </li>
-        </ul>
-
-        <div
-          v-if="editing"
-          class="fixed inset-0 bg-black/40 flex items-center justify-center"
-        >
-          <Card class="w-full max-w-md p-6">
-            <h2 class="font-bold mb-3">Edit {{ editing.name }} Team</h2>
-            <div class="mb-3">
-              <label class="text-sm text-zinc-700 mb-1 block">Team name</label>
-              <Input v-model="editingName" />
             </div>
-            <div class="mb-3">
-              <label class="text-sm text-zinc-700 mb-1 block"
-                >Coordinator</label
-              >
+            <div
+              v-else
+              class="text-sm text-muted-foreground text-center py-4 border-2 border-dashed rounded-lg"
+            >
+              No members assigned yet
+            </div>
+          </div>
+
+          <!-- Add member -->
+          <div class="border-t pt-4">
+            <h4 class="text-sm font-semibold text-muted-foreground mb-2">
+              Add Member
+            </h4>
+            <div class="flex gap-2">
               <MemberSelect
-                v-model="editingCoordinator"
+                v-model="selectedTeamToAdd[team.id]"
                 :event-id="selectedEventId"
+                placeholder="Select a member..."
+                class="flex-1"
               />
-            </div>
-            <div class="flex gap-2 justify-end">
-              <Button variant="outline" @click="closeEdit">Cancel</Button>
-              <Button :disabled="saving || savingEdit" @click="saveEdit"
-                >Save</Button
+              <Button
+                :disabled="adding[team.id] || !selectedTeamToAdd[team.id]"
+                @click="addCoordinatedTeamFor(team)"
               >
+                {{ adding[team.id] ? "Adding..." : "Add" }}
+              </Button>
             </div>
-          </Card>
-        </div>
-      </CardContent>
-    </Card>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- Edit modal -->
+    <div
+      v-if="editing"
+      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+      @click.self="closeEdit"
+    >
+      <Card class="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Edit {{ editing.name }}'s Team</CardTitle>
+        </CardHeader>
+        <CardContent class="space-y-4">
+          <div>
+            <label class="text-sm font-medium mb-1.5 block">Team name</label>
+            <Input v-model="editingName" placeholder="Enter team name" />
+          </div>
+          <div>
+            <label class="text-sm font-medium mb-1.5 block">Coordinator</label>
+            <MemberSelect
+              v-model="editingCoordinator"
+              :event-id="selectedEventId"
+              placeholder="Select coordinator..."
+              role-filter="COORDINATOR"
+            />
+          </div>
+          <div class="flex gap-2 justify-end pt-4">
+            <Button variant="outline" @click="closeEdit">Cancel</Button>
+            <Button :disabled="saving || savingEdit" @click="saveEdit">
+              {{ savingEdit ? "Saving..." : "Save Changes" }}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
   </div>
 </template>
 
@@ -192,13 +253,17 @@ import {
   getAllCoordinationTeams,
   createCoordinationTeam,
   updateCoordinationTeamName,
+  addCoordinatedTeam,
+  setCoordinator,
+  deleteCoordinationTeam,
+  removeCoordinatedTeam,
 } from "@/api/coordinationTeams";
+import { getAllMembers, getMemberRole } from "@/api/members";
 
 import Card from "@/components/ui/card/Card.vue";
 import CardContent from "@/components/ui/card/CardContent.vue";
 import CardHeader from "@/components/ui/card/CardHeader.vue";
 import CardTitle from "@/components/ui/card/CardTitle.vue";
-import CardDescription from "@/components/ui/card/CardDescription.vue";
 import Button from "@/components/ui/button/Button.vue";
 import Input from "@/components/ui/input/Input.vue";
 import {
@@ -208,19 +273,33 @@ import {
 } from "@/components/ui/popover";
 import ConfirmDelete from "@/components/ConfirmDelete.vue";
 import Image from "@/components/Image.vue";
-import MemberWithAvatar from "@/components/members/MemberWithAvatar.vue";
+import MemberSelect from "@/components/members/MemberSelect.vue";
 import { useToast } from "@/lib/toast";
 
 const queryCache = useQueryCache();
+const { toast } = useToast();
+const eventStore = useEventStore();
 
 const newCoordinator = ref<string | undefined>(undefined);
 const editing = ref<CoordinationTeam | null>(null);
 const editingName = ref("");
-// coordinator being edited in the modal and original for change detection
 const editingCoordinator = ref<string | undefined>(undefined);
 const editingOriginalCoordinator = ref<string | undefined>(undefined);
 const savingEdit = ref(false);
 
+const selectedEventId = ref<number | undefined>(
+  eventStore.selectedEvent?.id ?? undefined,
+);
+
+watch(
+  () => eventStore.selectedEvent,
+  (newEvent) => {
+    selectedEventId.value = newEvent?.id ?? undefined;
+  },
+  { immediate: true },
+);
+
+// Fetch all teams
 const { data, isLoading } = useQuery({
   key: ["coordinationTeams"],
   query: () => getAllCoordinationTeams(),
@@ -228,38 +307,74 @@ const { data, isLoading } = useQuery({
 
 const teams = computed(() => data.value?.data || []);
 
+// Fetch all members once for the event
+const { data: membersData } = useQuery({
+  key: () => ["members", `${selectedEventId.value}`],
+  query: () => getAllMembers({ event: selectedEventId.value }),
+});
+
+// Create a map of member ID -> member for quick lookups
+const membersMap = computed(() => {
+  if (!membersData.value?.data) return {};
+  return membersData.value.data.reduce(
+    (acc, member) => {
+      acc[member.id] = member;
+      return acc;
+    },
+    {} as Record<string, { id: string; name: string; img: string }>,
+  );
+});
+
+// Mutations
 const { mutate: createMutate, isLoading: creating } = useMutation({
   mutation: (variables: { coordinator: string }) =>
     createCoordinationTeam({ coordinator: variables.coordinator }),
   onSuccess: () => {
     queryCache.invalidateQueries({ key: ["coordinationTeams"] });
     newCoordinator.value = undefined;
+    toast.success({
+      title: "Team created",
+      description: "Coordination team created successfully",
+    });
+  },
+  onError: (error: Error | unknown) => {
+    const errorMessage =
+      error instanceof Error && "response" in error
+        ? (error as { response?: { data?: { message?: string } } }).response
+            ?.data?.message
+        : "An error occurred";
+    toast.error({
+      title: "Failed to create team",
+      description: errorMessage || "An error occurred",
+    });
   },
 });
 
 const { mutate: updateMutate, isLoading: saving } = useMutation({
   mutation: (variables: { id: string; data: { name: string } }) =>
     updateCoordinationTeamName(variables.id, variables.data),
-  onSuccess: () => queryCache.invalidateQueries({ key: ["coordinationTeams"] }),
+  onSuccess: () => {
+    queryCache.invalidateQueries({ key: ["coordinationTeams"] });
+    toast.success({
+      title: "Team updated",
+      description: "Team name updated successfully",
+    });
+  },
 });
 
 const createTeam = async () => {
   if (!newCoordinator.value) return;
   try {
-    // validate selected member is a coordinator in the current event
     const roleRes = await getMemberRole(newCoordinator.value);
     if (roleRes.data?.role !== "COORDINATOR") {
       toast.error({
-        title: "Selected member is not a coordinator",
-        description: "Please pick a coordinator.",
+        title: "Invalid selection",
+        description: "Selected member is not a coordinator",
       });
       return;
     }
   } catch {
-    // If role check fails, log and attempt create — server will return a clear error
-    console.warn(
-      "Could not validate member role before creating coordination team",
-    );
+    console.warn("Could not validate member role before creating team");
   }
 
   createMutate({ coordinator: newCoordinator.value });
@@ -268,7 +383,6 @@ const createTeam = async () => {
 const openEdit = (t: CoordinationTeam) => {
   editing.value = t;
   editingName.value = t.name;
-  // prefill coordinator selection in the edit modal
   editingCoordinator.value = t.coordinator?.member;
   editingOriginalCoordinator.value = t.coordinator?.member;
 };
@@ -280,100 +394,36 @@ const closeEdit = () => {
   editingOriginalCoordinator.value = undefined;
 };
 
-// (variables returned from hooks above are directly usable in the template)
-import MemberSelect from "@/components/members/MemberSelect.vue";
-import {
-  addCoordinatedTeam,
-  setCoordinator,
-  deleteCoordinationTeam,
-  removeCoordinatedTeam,
-} from "@/api/coordinationTeams";
-import { getMemberById, getMemberRole } from "@/api/members";
-
-// selected maps and per-team loading states
+// State management
 const selectedTeamToAdd = reactive<Record<string, string | undefined>>({});
 const adding = reactive<Record<string, boolean>>({});
 const removing = reactive<Record<string, boolean>>({});
 const deleting = reactive<Record<string, boolean>>({});
-
-// popover open state maps (keyed by `${teamId}_${memberId}` for removes)
 const removeConfirmOpen = reactive<Record<string, boolean>>({});
 const deleteConfirmOpen = reactive<Record<string, boolean>>({});
 
-// cached member shape used in this view (subset of Member)
-type CachedMember = { id: string; name?: string; img?: string };
-
-// cache of fetched member objects by id
-const membersCache = reactive<Record<string, CachedMember | null>>({});
-
-// load member details for any member ids present in teams
-const loadMembersForTeams = async () => {
-  if (!teams.value) return;
-  for (const t of teams.value) {
-    if (!t.coordinatedMembers) continue;
-    for (const mid of t.coordinatedMembers) {
-      if (!mid) continue;
-      if (membersCache[mid]) continue;
-      try {
-        const res = await getMemberById(mid);
-        membersCache[mid] = {
-          id: res.data.id,
-          name: res.data.name,
-          img: res.data.img,
-        };
-      } catch {
-        membersCache[mid] = null;
-      }
-    }
-    // also add coordinator member details
-    if (t.coordinator && t.coordinator.member) {
-      const c = t.coordinator.member;
-      if (c && !membersCache[c]) {
-        try {
-          const res = await getMemberById(c);
-          membersCache[c] = {
-            id: res.data.id,
-            name: res.data.name,
-            img: res.data.img,
-          };
-        } catch {
-          membersCache[c] = null;
-        }
-      }
-    }
-  }
-};
-
-watch(teams, () => {
-  loadMembersForTeams();
-});
-
-const eventStore = useEventStore();
-const selectedEventId = ref<number | undefined>(
-  eventStore.selectedEvent?.id ?? undefined,
-);
-const { toast } = useToast();
-
-// Keep selectedEventId in sync with global selectedEvent
-watch(
-  () => eventStore.selectedEvent,
-  (newEvent) => {
-    const newId = newEvent?.id ?? undefined;
-    if (selectedEventId.value !== newId) selectedEventId.value = newId;
-  },
-  { immediate: true },
-);
-
 const { mutate: addCoordinatedMutate } = useMutation({
   mutation: (vars: { id: string; memberId: string }) =>
     addCoordinatedTeam(vars.id, { member: vars.memberId }),
-  onSuccess: () => queryCache.invalidateQueries({ key: ["coordinationTeams"] }),
+  onSuccess: () => {
+    queryCache.invalidateQueries({ key: ["coordinationTeams"] });
+    toast.success({
+      title: "Member added",
+      description: "Member added to team successfully",
+    });
+  },
 });
 
 const { mutate: setCoordinatorMutate } = useMutation({
   mutation: (vars: { id: string; memberId: string }) =>
     setCoordinator(vars.id, { member: vars.memberId }),
-  onSuccess: () => queryCache.invalidateQueries({ key: ["coordinationTeams"] }),
+  onSuccess: () => {
+    queryCache.invalidateQueries({ key: ["coordinationTeams"] });
+    toast.success({
+      title: "Coordinator updated",
+      description: "Team coordinator updated successfully",
+    });
+  },
 });
 
 const addCoordinatedTeamFor = async (t: CoordinationTeam) => {
@@ -383,33 +433,19 @@ const addCoordinatedTeamFor = async (t: CoordinationTeam) => {
   try {
     addCoordinatedMutate({ id: t.id, memberId });
     selectedTeamToAdd[t.id] = undefined;
-    // optimistic fetch of the member for UI
-    try {
-      const res = await getMemberById(memberId);
-      membersCache[memberId] = {
-        id: res.data.id,
-        name: res.data.name,
-        img: res.data.img,
-      };
-    } catch {
-      membersCache[memberId] = null;
-    }
   } finally {
     adding[t.id] = false;
   }
 };
 
-// save edited team name and (optionally) coordinator
 const saveEdit = async () => {
   if (!editing.value) return;
   savingEdit.value = true;
   try {
-    // update name if it changed
     if (editingName.value !== editing.value.name) {
       updateMutate({ id: editing.value.id, data: { name: editingName.value } });
     }
 
-    // if coordinator changed, validate and set
     if (
       editingCoordinator.value !== editingOriginalCoordinator.value &&
       editingCoordinator.value
@@ -418,33 +454,20 @@ const saveEdit = async () => {
         const roleRes = await getMemberRole(editingCoordinator.value);
         if (roleRes.data?.role !== "COORDINATOR") {
           toast.error({
-            title: "Selected member is not a coordinator",
-            description: "Please pick a coordinator.",
+            title: "Invalid selection",
+            description: "Selected member is not a coordinator",
           });
           savingEdit.value = false;
           return;
         }
       } catch {
-        console.warn(
-          "Could not validate member role before assigning coordinator",
-        );
+        console.warn("Could not validate member role");
       }
 
       setCoordinatorMutate({
         id: editing.value.id,
         memberId: editingCoordinator.value,
       });
-      // optimistic fetch for UI
-      try {
-        const res = await getMemberById(editingCoordinator.value);
-        membersCache[editingCoordinator.value] = {
-          id: res.data.id,
-          name: res.data.name,
-          img: res.data.img,
-        };
-      } catch {
-        membersCache[editingCoordinator.value] = null;
-      }
     }
   } finally {
     savingEdit.value = false;
@@ -452,27 +475,38 @@ const saveEdit = async () => {
   }
 };
 
-// remove a coordinated member
 const { mutate: removeCoordinatedMutate } = useMutation({
   mutation: (vars: { id: string; memberId: string }) =>
     removeCoordinatedTeam(vars.id, vars.memberId),
-  onSuccess: () => queryCache.invalidateQueries({ key: ["coordinationTeams"] }),
+  onSuccess: () => {
+    queryCache.invalidateQueries({ key: ["coordinationTeams"] });
+    toast.success({
+      title: "Member removed",
+      description: "Member removed from team successfully",
+    });
+  },
 });
 
 const removeMemberConfirm = async (t: CoordinationTeam, memberId: string) => {
+  const key = `${t.id}_${memberId}`;
   try {
-    removing[`${t.id}_${memberId}`] = true;
+    removing[key] = true;
     removeCoordinatedMutate({ id: t.id, memberId });
   } finally {
-    removing[`${t.id}_${memberId}`] = false;
-    removeConfirmOpen[`${t.id}_${memberId}`] = false;
+    removing[key] = false;
+    removeConfirmOpen[key] = false;
   }
 };
 
-// delete a coordination team
 const { mutate: deleteMutate } = useMutation({
   mutation: (id: string) => deleteCoordinationTeam(id),
-  onSuccess: () => queryCache.invalidateQueries({ key: ["coordinationTeams"] }),
+  onSuccess: () => {
+    queryCache.invalidateQueries({ key: ["coordinationTeams"] });
+    toast.success({
+      title: "Team deleted",
+      description: "Coordination team deleted successfully",
+    });
+  },
 });
 
 const deleteTeamConfirm = async (t: CoordinationTeam) => {
@@ -485,5 +519,3 @@ const deleteTeamConfirm = async (t: CoordinationTeam) => {
   }
 };
 </script>
-
-<style scoped></style>

From 155bb7ff6b3aac7c8bce6962f4862ff7da4a5843 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sat, 28 Feb 2026 13:58:55 +0000
Subject: [PATCH 3/6] feat: improve UI and loading states in
 CoordinationTeamsView with enhanced styling and animations

---
 .../CoordinationTeamsView.vue                 | 421 +++++++++++++++---
 1 file changed, 349 insertions(+), 72 deletions(-)

diff --git a/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue b/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
index 6cd4bb3c..d2806fc0 100644
--- a/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
+++ b/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
@@ -1,21 +1,26 @@
 <template>
-  <div class="max-w-7xl mx-auto p-6">
-    <div class="mb-8">
-      <h1 class="text-3xl font-bold mb-2">Coordination Teams</h1>
-      <p class="text-muted-foreground">
+  <div class="max-w-7xl mx-auto p-4 sm:p-6">
+    <div class="mb-6 sm:mb-8">
+      <h1 class="text-2xl sm:text-3xl font-bold mb-2">Coordination Teams</h1>
+      <p class="text-sm sm:text-base text-muted-foreground">
         Manage coordination teams and assign members to coordinators
       </p>
     </div>
 
     <!-- Create new team -->
-    <Card class="mb-6">
-      <CardHeader>
-        <CardTitle>Create New Team</CardTitle>
+    <Card
+      class="mb-6 sm:mb-8 border-2 shadow-sm hover:shadow-md transition-shadow"
+    >
+      <CardHeader class="pb-3 sm:pb-4">
+        <CardTitle class="text-lg sm:text-xl">Create New Team</CardTitle>
+        <p class="text-xs sm:text-sm text-muted-foreground mt-1">
+          Select a coordinator to create their team
+        </p>
       </CardHeader>
       <CardContent>
-        <div class="flex flex-col sm:flex-row gap-3 items-end">
+        <div class="flex flex-col sm:flex-row gap-4 items-end">
           <div class="flex-1 w-full">
-            <label class="text-sm font-medium mb-1.5 block"
+            <label class="text-sm font-semibold mb-2 block text-foreground"
               >Select Coordinator</label
             >
             <MemberSelect
@@ -26,11 +31,16 @@
             />
           </div>
           <Button
-            class="w-full sm:w-auto"
+            class="w-full sm:w-auto px-6 h-10"
             :disabled="creating || !newCoordinator"
             @click="createTeam"
           >
-            <span v-if="creating">Creating...</span>
+            <span v-if="creating" class="flex items-center gap-2">
+              <div
+                class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"
+              ></div>
+              Creating...
+            </span>
             <span v-else>Create Team</span>
           </Button>
         </div>
@@ -38,32 +48,61 @@
     </Card>
 
     <!-- Loading state -->
-    <div v-if="isLoading" class="py-12 text-center">
+    <div
+      v-if="isLoading"
+      class="flex flex-col items-center justify-center py-20"
+    >
       <div
-        class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"
+        class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-gray-200 border-t-primary"
       ></div>
-      <p class="mt-2 text-muted-foreground">Loading teams...</p>
+      <p class="mt-4 text-muted-foreground font-medium">Loading teams...</p>
     </div>
 
     <!-- Empty state -->
     <div
       v-else-if="teams.length === 0"
-      class="py-12 text-center border-2 border-dashed rounded-lg"
+      class="flex flex-col items-center justify-center py-20 px-4 border-2 border-dashed rounded-xl bg-muted/30"
     >
-      <p class="text-muted-foreground text-lg">No coordination teams yet.</p>
-      <p class="text-sm text-muted-foreground mt-1">
-        Create your first team above to get started.
+      <div
+        class="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-8 w-8 text-muted-foreground"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+          />
+        </svg>
+      </div>
+      <p class="text-muted-foreground text-lg font-medium">
+        No coordination teams yet
+      </p>
+      <p class="text-sm text-muted-foreground mt-2">
+        Create your first team above to get started
       </p>
     </div>
 
     <!-- Teams grid -->
     <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-      <Card v-for="team in teams" :key="team.id" class="overflow-hidden">
-        <CardHeader class="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
-          <div class="flex items-start justify-between">
-            <div class="flex items-center gap-3">
+      <Card
+        v-for="team in teams"
+        :key="team.id"
+        class="overflow-hidden hover:shadow-lg transition-shadow border-2"
+      >
+        <CardHeader
+          class="bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 border-b-2 pb-4"
+        >
+          <div class="flex items-start justify-between gap-2 sm:gap-4">
+            <div class="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
               <div
-                class="w-12 h-12 rounded-full bg-white border-2 border-indigo-200 flex items-center justify-center"
+                class="w-12 h-12 sm:w-14 sm:h-14 rounded-full bg-white shadow-md flex items-center justify-center flex-shrink-0 ring-2 ring-indigo-100"
               >
                 <Image
                   v-if="team.coordinator && membersMap[team.coordinator.member]"
@@ -71,35 +110,97 @@
                   :alt="
                     membersMap[team.coordinator.member]?.name || 'Coordinator'
                   "
-                  class="w-10 h-10 rounded-full object-cover"
+                  class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover"
                 />
-                <span v-else class="text-lg font-bold text-indigo-600">{{
-                  team.name.charAt(0).toUpperCase()
-                }}</span>
+                <span
+                  v-else
+                  class="text-xl sm:text-2xl font-bold text-indigo-600 select-none"
+                  >{{ team.name.charAt(0).toUpperCase() }}</span
+                >
               </div>
-              <div>
-                <CardTitle class="text-xl">{{ team.name }}'s Team</CardTitle>
+              <div class="min-w-0 flex-1">
+                <CardTitle class="text-lg sm:text-xl font-bold truncate"
+                  >{{ team.name }}'s Team</CardTitle
+                >
                 <p
                   v-if="team.coordinator && membersMap[team.coordinator.member]"
-                  class="text-sm text-muted-foreground"
+                  class="text-xs sm:text-sm text-muted-foreground font-medium truncate mt-1"
                 >
-                  Coordinator:
                   {{ membersMap[team.coordinator.member]?.name }}
                 </p>
+                <p
+                  v-else
+                  class="text-xs sm:text-sm text-muted-foreground italic mt-1"
+                >
+                  No coordinator
+                </p>
               </div>
             </div>
-            <div class="flex gap-2">
-              <Button size="sm" variant="ghost" @click="openEdit(team)">
-                Edit
+            <div class="flex gap-1 flex-shrink-0">
+              <Button
+                size="sm"
+                variant="ghost"
+                class="hover:bg-white/80 hidden sm:flex"
+                @click="openEdit(team)"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                  />
+                </svg>
+                <span class="ml-1.5">Edit</span>
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                class="hover:bg-white/80 sm:hidden p-2"
+                @click="openEdit(team)"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                  />
+                </svg>
               </Button>
               <Popover v-model:open="deleteConfirmOpen[team.id]">
                 <PopoverTrigger as-child>
                   <Button
                     size="sm"
                     variant="ghost"
-                    class="text-red-600 hover:text-red-700 hover:bg-red-50"
+                    class="text-red-600 hover:text-red-700 hover:bg-red-50 p-2"
                   >
-                    Delete
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-4 w-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                      />
+                    </svg>
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent class="w-80">
@@ -116,34 +217,60 @@
           </div>
         </CardHeader>
 
-        <CardContent class="p-4">
+        <CardContent class="p-4 sm:p-6">
           <!-- Members list -->
-          <div class="mb-4">
-            <h4 class="text-sm font-semibold text-muted-foreground mb-3">
-              Team Members ({{ team.coordinatedMembers?.length || 0 }})
-            </h4>
+          <div class="mb-5">
+            <div class="flex items-center justify-between mb-4">
+              <h4
+                class="text-sm font-bold text-foreground flex items-center gap-2"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                  />
+                </svg>
+                Team Members
+              </h4>
+              <span
+                class="px-3 py-1 bg-indigo-100 text-indigo-700 text-xs font-bold rounded-full"
+                >{{ team.coordinatedMembers?.length || 0 }}</span
+              >
+            </div>
             <div
               v-if="team.coordinatedMembers?.length"
-              class="space-y-2 max-h-64 overflow-y-auto"
+              class="space-y-2 max-h-72 overflow-y-auto pr-2 custom-scrollbar"
             >
               <div
                 v-for="memberId in team.coordinatedMembers"
                 :key="memberId"
-                class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition-colors"
+                class="flex items-center justify-between p-2 sm:p-3 rounded-lg hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 transition-all border border-transparent hover:border-indigo-100 group"
               >
-                <div class="flex items-center gap-2 flex-1 min-w-0">
+                <div class="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
                   <Image
                     v-if="membersMap[memberId]"
                     :src="membersMap[memberId]?.img"
                     :alt="membersMap[memberId]?.name || 'Member'"
-                    class="w-8 h-8 rounded-full object-cover border flex-shrink-0"
+                    class="w-8 h-8 sm:w-10 sm:h-10 rounded-full object-cover border-2 border-gray-200 group-hover:border-indigo-300 transition-colors flex-shrink-0"
                   />
-                  <span v-if="membersMap[memberId]" class="truncate text-sm">{{
-                    membersMap[memberId]?.name
-                  }}</span>
-                  <span v-else class="text-sm text-muted-foreground truncate">{{
-                    memberId
-                  }}</span>
+                  <span
+                    v-if="membersMap[memberId]"
+                    class="truncate text-sm sm:text-base font-medium text-foreground"
+                    >{{ membersMap[memberId]?.name }}</span
+                  >
+                  <span
+                    v-else
+                    class="text-sm text-muted-foreground italic truncate"
+                    >{{ memberId }}</span
+                  >
                 </div>
                 <Popover
                   v-model:open="removeConfirmOpen[team.id + '_' + memberId]"
@@ -152,14 +279,28 @@
                     <Button
                       size="sm"
                       variant="ghost"
-                      class="flex-shrink-0 text-red-600 hover:text-red-700 hover:bg-red-50"
+                      class="flex-shrink-0 text-red-600 hover:text-red-700 hover:bg-red-50 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity"
                       :disabled="removing[team.id + '_' + memberId]"
                     >
-                      {{
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-4 w-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>
+                      <span class="ml-1 hidden sm:inline">{{
                         removing[team.id + "_" + memberId]
                           ? "Removing..."
                           : "Remove"
-                      }}
+                      }}</span>
                     </Button>
                   </PopoverTrigger>
                   <PopoverContent class="w-80">
@@ -178,18 +319,53 @@
             </div>
             <div
               v-else
-              class="text-sm text-muted-foreground text-center py-4 border-2 border-dashed rounded-lg"
+              class="flex flex-col items-center justify-center py-8 px-4 border-2 border-dashed rounded-lg bg-blue-50/30"
             >
-              No members assigned yet
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-10 w-10 text-indigo-300 mb-2"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                />
+              </svg>
+              <p class="text-sm text-muted-foreground font-medium">
+                No members assigned yet
+              </p>
+              <p class="text-xs text-muted-foreground mt-1">
+                Add members below
+              </p>
             </div>
           </div>
 
           <!-- Add member -->
-          <div class="border-t pt-4">
-            <h4 class="text-sm font-semibold text-muted-foreground mb-2">
+          <div class="border-t-2 pt-4 sm:pt-5 mt-4 sm:mt-5">
+            <h4
+              class="text-sm font-bold text-foreground mb-3 flex items-center gap-2"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+                />
+              </svg>
               Add Member
             </h4>
-            <div class="flex gap-2">
+            <div class="flex flex-col sm:flex-row gap-3">
               <MemberSelect
                 v-model="selectedTeamToAdd[team.id]"
                 :event-id="selectedEventId"
@@ -197,10 +373,33 @@
                 class="flex-1"
               />
               <Button
+                class="px-6 w-full sm:w-auto"
                 :disabled="adding[team.id] || !selectedTeamToAdd[team.id]"
                 @click="addCoordinatedTeamFor(team)"
               >
-                {{ adding[team.id] ? "Adding..." : "Add" }}
+                <span v-if="adding[team.id]" class="flex items-center gap-2">
+                  <div
+                    class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"
+                  ></div>
+                  Adding...
+                </span>
+                <span v-else class="flex items-center gap-1.5">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-4 w-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+                    />
+                  </svg>
+                  Add
+                </span>
               </Button>
             </div>
           </div>
@@ -211,20 +410,33 @@
     <!-- Edit modal -->
     <div
       v-if="editing"
-      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+      class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-in fade-in duration-200"
       @click.self="closeEdit"
     >
-      <Card class="w-full max-w-md">
-        <CardHeader>
-          <CardTitle>Edit {{ editing.name }}'s Team</CardTitle>
+      <Card
+        class="w-full max-w-md shadow-2xl animate-in zoom-in-95 duration-200"
+      >
+        <CardHeader class="border-b bg-gradient-to-r from-blue-50 to-indigo-50">
+          <CardTitle class="text-2xl">Edit Team</CardTitle>
+          <p class="text-sm text-muted-foreground mt-1">
+            Update {{ editing.name }}'s team information
+          </p>
         </CardHeader>
-        <CardContent class="space-y-4">
+        <CardContent class="space-y-5 pt-6">
           <div>
-            <label class="text-sm font-medium mb-1.5 block">Team name</label>
-            <Input v-model="editingName" placeholder="Enter team name" />
+            <label class="text-sm font-semibold mb-2 block text-foreground"
+              >Team Name</label
+            >
+            <Input
+              v-model="editingName"
+              placeholder="Enter team name"
+              class="h-11"
+            />
           </div>
           <div>
-            <label class="text-sm font-medium mb-1.5 block">Coordinator</label>
+            <label class="text-sm font-semibold mb-2 block text-foreground"
+              >Coordinator</label
+            >
             <MemberSelect
               v-model="editingCoordinator"
               :event-id="selectedEventId"
@@ -232,10 +444,22 @@
               role-filter="COORDINATOR"
             />
           </div>
-          <div class="flex gap-2 justify-end pt-4">
-            <Button variant="outline" @click="closeEdit">Cancel</Button>
-            <Button :disabled="saving || savingEdit" @click="saveEdit">
-              {{ savingEdit ? "Saving..." : "Save Changes" }}
+          <div class="flex gap-3 justify-end pt-4 border-t">
+            <Button variant="outline" class="px-6" @click="closeEdit"
+              >Cancel</Button
+            >
+            <Button
+              class="px-6"
+              :disabled="saving || savingEdit"
+              @click="saveEdit"
+            >
+              <span v-if="savingEdit" class="flex items-center gap-2">
+                <div
+                  class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"
+                ></div>
+                Saving...
+              </span>
+              <span v-else>Save Changes</span>
             </Button>
           </div>
         </CardContent>
@@ -519,3 +743,56 @@ const deleteTeamConfirm = async (t: CoordinationTeam) => {
   }
 };
 </script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+.animate-in {
+  animation-duration: 200ms;
+  animation-fill-mode: both;
+}
+
+.fade-in {
+  animation-name: fadeIn;
+}
+
+.zoom-in-95 {
+  animation-name: zoomIn95;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes zoomIn95 {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>

From 8465aa5157c5ed0aacf4c72d4abd3516dfaa8ee8 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sat, 28 Feb 2026 14:07:49 +0000
Subject: [PATCH 4/6] feat: replace SVG icons with Lucide components

---
 .../CoordinationTeamsView.vue                 | 170 ++----------------
 1 file changed, 17 insertions(+), 153 deletions(-)

diff --git a/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue b/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
index d2806fc0..4d11e0b2 100644
--- a/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
+++ b/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
@@ -36,9 +36,7 @@
             @click="createTeam"
           >
             <span v-if="creating" class="flex items-center gap-2">
-              <div
-                class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"
-              ></div>
+              <Loader2 :size="16" class="animate-spin" />
               Creating...
             </span>
             <span v-else>Create Team</span>
@@ -52,9 +50,7 @@
       v-if="isLoading"
       class="flex flex-col items-center justify-center py-20"
     >
-      <div
-        class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-gray-200 border-t-primary"
-      ></div>
+      <Loader2 :size="48" class="animate-spin text-primary" />
       <p class="mt-4 text-muted-foreground font-medium">Loading teams...</p>
     </div>
 
@@ -66,20 +62,7 @@
       <div
         class="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-8 w-8 text-muted-foreground"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-          />
-        </svg>
+        <Users :size="32" class="text-muted-foreground" />
       </div>
       <p class="text-muted-foreground text-lg font-medium">
         No coordination teams yet
@@ -119,21 +102,9 @@
                 >
               </div>
               <div class="min-w-0 flex-1">
-                <CardTitle class="text-lg sm:text-xl font-bold truncate"
-                  >{{ team.name }}'s Team</CardTitle
-                >
-                <p
-                  v-if="team.coordinator && membersMap[team.coordinator.member]"
-                  class="text-xs sm:text-sm text-muted-foreground font-medium truncate mt-1"
-                >
-                  {{ membersMap[team.coordinator.member]?.name }}
-                </p>
-                <p
-                  v-else
-                  class="text-xs sm:text-sm text-muted-foreground italic mt-1"
-                >
-                  No coordinator
-                </p>
+                <CardTitle class="text-lg sm:text-xl font-bold truncate">{{
+                  team.name
+                }}</CardTitle>
               </div>
             </div>
             <div class="flex gap-1 flex-shrink-0">
@@ -143,20 +114,7 @@
                 class="hover:bg-white/80 hidden sm:flex"
                 @click="openEdit(team)"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                  />
-                </svg>
+                <PencilLine :size="16" />
                 <span class="ml-1.5">Edit</span>
               </Button>
               <Button
@@ -165,20 +123,7 @@
                 class="hover:bg-white/80 sm:hidden p-2"
                 @click="openEdit(team)"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                  />
-                </svg>
+                <PencilLine :size="16" />
               </Button>
               <Popover v-model:open="deleteConfirmOpen[team.id]">
                 <PopoverTrigger as-child>
@@ -187,20 +132,7 @@
                     variant="ghost"
                     class="text-red-600 hover:text-red-700 hover:bg-red-50 p-2"
                   >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                      />
-                    </svg>
+                    <Trash2 :size="16" />
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent class="w-80">
@@ -224,20 +156,7 @@
               <h4
                 class="text-sm font-bold text-foreground flex items-center gap-2"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-                  />
-                </svg>
+                <Users :size="16" />
                 Team Members
               </h4>
               <span
@@ -282,20 +201,7 @@
                       class="flex-shrink-0 text-red-600 hover:text-red-700 hover:bg-red-50 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity"
                       :disabled="removing[team.id + '_' + memberId]"
                     >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-4 w-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>
+                      <X :size="16" />
                       <span class="ml-1 hidden sm:inline">{{
                         removing[team.id + "_" + memberId]
                           ? "Removing..."
@@ -321,20 +227,7 @@
               v-else
               class="flex flex-col items-center justify-center py-8 px-4 border-2 border-dashed rounded-lg bg-blue-50/30"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-10 w-10 text-indigo-300 mb-2"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-                />
-              </svg>
+              <Users :size="40" class="text-indigo-300 mb-2" />
               <p class="text-sm text-muted-foreground font-medium">
                 No members assigned yet
               </p>
@@ -349,20 +242,7 @@
             <h4
               class="text-sm font-bold text-foreground mb-3 flex items-center gap-2"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-                />
-              </svg>
+              <Plus :size="16" />
               Add Member
             </h4>
             <div class="flex flex-col sm:flex-row gap-3">
@@ -378,26 +258,11 @@
                 @click="addCoordinatedTeamFor(team)"
               >
                 <span v-if="adding[team.id]" class="flex items-center gap-2">
-                  <div
-                    class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"
-                  ></div>
+                  <Loader2 :size="16" class="animate-spin" />
                   Adding...
                 </span>
                 <span v-else class="flex items-center gap-1.5">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-4 w-4"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-                    />
-                  </svg>
+                  <Plus :size="16" />
                   Add
                 </span>
               </Button>
@@ -454,9 +319,7 @@
               @click="saveEdit"
             >
               <span v-if="savingEdit" class="flex items-center gap-2">
-                <div
-                  class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"
-                ></div>
+                <Loader2 :size="16" class="animate-spin" />
                 Saving...
               </span>
               <span v-else>Save Changes</span>
@@ -483,6 +346,7 @@ import {
   removeCoordinatedTeam,
 } from "@/api/coordinationTeams";
 import { getAllMembers, getMemberRole } from "@/api/members";
+import { Users, PencilLine, Trash2, X, Plus, Loader2 } from "lucide-vue-next";
 
 import Card from "@/components/ui/card/Card.vue";
 import CardContent from "@/components/ui/card/CardContent.vue";

From ba3a851cedcfe96424e6d9280cb33250d7f6de57 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sat, 28 Feb 2026 14:21:33 +0000
Subject: [PATCH 5/6] feat: enhance CoordinationTeamsView with coordinator
 display and UI adjustments

---
 .../CoordinationTeamsView.vue                 | 72 +++----------------
 1 file changed, 11 insertions(+), 61 deletions(-)

diff --git a/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue b/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
index 4d11e0b2..df23b053 100644
--- a/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
+++ b/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
@@ -79,9 +79,7 @@
         :key="team.id"
         class="overflow-hidden hover:shadow-lg transition-shadow border-2"
       >
-        <CardHeader
-          class="bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 border-b-2 pb-4"
-        >
+        <CardHeader class="border-b-2 pb-4">
           <div class="flex items-start justify-between gap-2 sm:gap-4">
             <div class="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
               <div
@@ -105,6 +103,13 @@
                 <CardTitle class="text-lg sm:text-xl font-bold truncate">{{
                   team.name
                 }}</CardTitle>
+                <p
+                  v-if="team.coordinator && membersMap[team.coordinator.member]"
+                  class="text-sm text-muted-foreground"
+                >
+                  Coordinator:
+                  {{ membersMap[team.coordinator.member]?.name }}
+                </p>
               </div>
             </div>
             <div class="flex gap-1 flex-shrink-0">
@@ -166,7 +171,7 @@
             </div>
             <div
               v-if="team.coordinatedMembers?.length"
-              class="space-y-2 max-h-72 overflow-y-auto pr-2 custom-scrollbar"
+              class="space-y-2 max-h-72 overflow-y-auto pr-2"
             >
               <div
                 v-for="memberId in team.coordinatedMembers"
@@ -275,12 +280,10 @@
     <!-- Edit modal -->
     <div
       v-if="editing"
-      class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-in fade-in duration-200"
+      class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
       @click.self="closeEdit"
     >
-      <Card
-        class="w-full max-w-md shadow-2xl animate-in zoom-in-95 duration-200"
-      >
+      <Card class="w-full max-w-md shadow-2xl">
         <CardHeader class="border-b bg-gradient-to-r from-blue-50 to-indigo-50">
           <CardTitle class="text-2xl">Edit Team</CardTitle>
           <p class="text-sm text-muted-foreground mt-1">
@@ -607,56 +610,3 @@ const deleteTeamConfirm = async (t: CoordinationTeam) => {
   }
 };
 </script>
-
-<style scoped>
-.custom-scrollbar::-webkit-scrollbar {
-  width: 8px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 10px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
-  border-radius: 10px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
-}
-
-.animate-in {
-  animation-duration: 200ms;
-  animation-fill-mode: both;
-}
-
-.fade-in {
-  animation-name: fadeIn;
-}
-
-.zoom-in-95 {
-  animation-name: zoomIn95;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes zoomIn95 {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-</style>

From d87a51ddf7de6bf3badbbf2b1733cf9f5882e2eb Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sat, 28 Feb 2026 14:25:52 +0000
Subject: [PATCH 6/6] fix: remove unnecessary padding from CardContent in
 CoordinationTeamsView

---
 .../views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue b/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
index df23b053..aa8a32a9 100644
--- a/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
+++ b/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
@@ -154,7 +154,7 @@
           </div>
         </CardHeader>
 
-        <CardContent class="p-4 sm:p-6">
+        <CardContent>
           <!-- Members list -->
           <div class="mb-5">
             <div class="flex items-center justify-between mb-4">