From 78e3fdeb8eeeebae4fb153d9bf48252ce4a143e0 Mon Sep 17 00:00:00 2001
From: Cemonix <gittlermilan@seznam.cz>
Date: Tue, 2 Sep 2025 21:59:03 +0200
Subject: [PATCH 01/10] feat: Implement task assignment and loading
 functionality in workspace store

---
 frontend/src/stores/workspaceStore.ts      |  20 +++
 frontend/src/views/AnnotationWorkspace.vue | 143 ++++++++-------------
 2 files changed, 75 insertions(+), 88 deletions(-)

diff --git a/frontend/src/stores/workspaceStore.ts b/frontend/src/stores/workspaceStore.ts
index 87d83ceb..b2a8f7a8 100644
--- a/frontend/src/stores/workspaceStore.ts
+++ b/frontend/src/stores/workspaceStore.ts
@@ -1135,6 +1135,26 @@ export const useWorkspaceStore = defineStore("workspace", {
             return result.navigation;
         },
 
+        /**
+         * Assign a task to the current user and set its status to IN_PROGRESS
+         * This is used when auto-transitioning to the next task after completion
+         */
+        async assignAndStartNextTask(projectId: number, taskId: number): Promise<void> {
+            try {
+                // First assign the task to current user
+                await taskService.assignTaskToCurrentUser(projectId, taskId);
+                
+                // Then change status to IN_PROGRESS if not already
+                await taskService.changeTaskStatus(projectId, taskId, {
+                    targetStatus: TaskStatus.IN_PROGRESS
+                });
+                
+                logger.info(`Successfully assigned and started task ${taskId} for project ${projectId}`);
+            } catch (error) {
+                logger.error(`Failed to assign and start task ${taskId}:`, error);
+                throw error;
+            }
+        },
 
     },
 });
diff --git a/frontend/src/views/AnnotationWorkspace.vue b/frontend/src/views/AnnotationWorkspace.vue
index d94169d7..9892452a 100644
--- a/frontend/src/views/AnnotationWorkspace.vue
+++ b/frontend/src/views/AnnotationWorkspace.vue
@@ -50,21 +50,19 @@
                             <small>This task is completed</small>
                         </div>
                         
-                        <!-- Veto button (available for both completed and active tasks in review/completion stages) -->
-                        <Button 
-                            v-if="canVetoTask"
-                            @click="handleVetoTask"
-                            :disabled="!currentTask"
-                            variant="danger"
-                            class="task-action-btn veto-btn"
-                            title="Return task for rework"
-                        >
-                            <font-awesome-icon :icon="faUndo" />
-                            Veto
-                        </Button>
-                        
                         <!-- Active task actions -->
                         <template v-if="!isTaskCompleted">
+                            <Button 
+                                v-if="canVetoTask"
+                                @click="handleVetoTask"
+                                :disabled="!currentTask"
+                                variant="danger"
+                                class="task-action-btn veto-btn"
+                                title="Return task for rework"
+                            >
+                                <font-awesome-icon :icon="faUndo" />
+                                Veto
+                            </Button>
                             <Button 
                                 @click="handleSuspendTask"
                                 :disabled="!currentTask"
@@ -142,6 +140,7 @@ import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 import {faPause, faForward, faUndo} from "@fortawesome/free-solid-svg-icons";
 import {usePermissions} from "@/composables/usePermissions";
 import {PERMISSIONS} from "@/services/auth/permissions.types";
+import {useToast} from "@/composables/useToast";
 
 const props = defineProps({
     projectId: {
@@ -158,6 +157,7 @@ const workspaceStore = useWorkspaceStore();
 const route = useRoute();
 const router = useRouter();
 const { hasPermissionInProject } = usePermissions();
+const { showToast } = useToast();
 
 const isLoading = computed(() => workspaceStore.getLoadingState);
 const error = computed(() => workspaceStore.getError);
@@ -190,6 +190,42 @@ const retryLoading = async () => {
     await workspaceStore.loadAsset(props.projectId, props.assetId, taskId);
 };
 
+/**
+ * Auto-assign a task to current user and load it in the workspace
+ */
+const assignAndLoadTask = async (taskInfo: { projectId: string; assetId: string; taskId: string }, context: string = 'navigation') => {
+    const taskId = parseInt(taskInfo.taskId, 10);
+    const projectIdNum = parseInt(taskInfo.projectId, 10);
+    
+    try {
+        await workspaceStore.assignAndStartNextTask(projectIdNum, taskId);
+    } catch (error) {
+        console.error(`Failed to assign task during ${context}:`, error);
+        
+        showToast(
+            'Task Assignment Failed', 
+            `Failed to auto-assign the next task. You may not have permission to work on this task. Please go back to Tasks view and manually select a task.`,
+            'error',
+            { duration: 10000 } // Show for 10 seconds since this is critical
+        );
+    }
+    
+    // Load the task in workspace
+    await workspaceStore.loadAsset(taskInfo.projectId, taskInfo.assetId, taskInfo.taskId);
+    
+    // Update URL without triggering route change
+    await router.replace({
+        name: 'AnnotationWorkspace',
+        params: {
+            projectId: taskInfo.projectId,
+            assetId: taskInfo.assetId
+        },
+        query: {
+            taskId: taskInfo.taskId
+        }
+    });
+};
+
 const handlePreviousTask = async () => {
     // Save current working time before navigating to another task
     await workspaceStore.saveWorkingTimeBeforeUnload();
@@ -197,20 +233,7 @@ const handlePreviousTask = async () => {
     const navigationInfo = await workspaceStore.navigateToPreviousTask();
     
     if (navigationInfo) {
-        // Directly load the new asset instead of using router.push to avoid same-route issues
-        await workspaceStore.loadAsset(navigationInfo.projectId, navigationInfo.assetId, navigationInfo.taskId);
-        
-        // Update the URL without triggering a route change
-        await router.replace({
-            name: 'AnnotationWorkspace',
-            params: {
-                projectId: navigationInfo.projectId,
-                assetId: navigationInfo.assetId
-            },
-            query: {
-                taskId: navigationInfo.taskId
-            }
-        });
+        await assignAndLoadTask(navigationInfo, 'previous navigation');
     }
 };
 
@@ -222,20 +245,7 @@ const handleNextTask = async () => {
     
     const navigationInfo = await workspaceStore.navigateToNextTask();
     if (navigationInfo) {
-        // Directly load the new asset instead of using router.push to avoid same-route issues
-        await workspaceStore.loadAsset(navigationInfo.projectId, navigationInfo.assetId, navigationInfo.taskId);
-        
-        // Update the URL without triggering a route change
-        await router.replace({
-            name: 'AnnotationWorkspace',
-            params: {
-                projectId: navigationInfo.projectId,
-                assetId: navigationInfo.assetId
-            },
-            query: {
-                taskId: navigationInfo.taskId
-            }
-        });
+        await assignAndLoadTask(navigationInfo, 'next navigation');
     } else {
         // At last task - show completion modal
         showCompletionModal.value = true;
@@ -300,20 +310,7 @@ const handleCompleteTaskAndNext = async () => {
         // Try to get next available task automatically
         const nextTaskInfo = await workspaceStore.getNextAvailableTask();
         if (nextTaskInfo) {
-            // Load the next task seamlessly without leaving the workspace
-            await workspaceStore.loadAsset(nextTaskInfo.projectId, nextTaskInfo.assetId, nextTaskInfo.taskId);
-            
-            // Update URL without triggering route change
-            await router.replace({
-                name: 'AnnotationWorkspace',
-                params: {
-                    projectId: nextTaskInfo.projectId,
-                    assetId: nextTaskInfo.assetId
-                },
-                query: {
-                    taskId: nextTaskInfo.taskId
-                }
-            });
+            await assignAndLoadTask(nextTaskInfo, 'task completion');
         } else {
             // No more tasks available - show completion modal or go back to tasks view
             showCompletionModal.value = true;
@@ -332,17 +329,7 @@ const handleSuspendTask = async () => {
             // Move to next task after suspending
             const nextTaskInfo = await workspaceStore.getNextAvailableTask();
             if (nextTaskInfo) {
-                await workspaceStore.loadAsset(nextTaskInfo.projectId, nextTaskInfo.assetId, nextTaskInfo.taskId);
-                await router.replace({
-                    name: 'AnnotationWorkspace',
-                    params: {
-                        projectId: nextTaskInfo.projectId,
-                        assetId: nextTaskInfo.assetId
-                    },
-                    query: {
-                        taskId: nextTaskInfo.taskId
-                    }
-                });
+                await assignAndLoadTask(nextTaskInfo, 'suspend');
             } else {
                 showCompletionModal.value = true;
             }
@@ -361,17 +348,7 @@ const handleDeferTask = async () => {
             // Move to next task after deferring
             const nextTaskInfo = await workspaceStore.getNextAvailableTask();
             if (nextTaskInfo) {
-                await workspaceStore.loadAsset(nextTaskInfo.projectId, nextTaskInfo.assetId, nextTaskInfo.taskId);
-                await router.replace({
-                    name: 'AnnotationWorkspace',
-                    params: {
-                        projectId: nextTaskInfo.projectId,
-                        assetId: nextTaskInfo.assetId
-                    },
-                    query: {
-                        taskId: nextTaskInfo.taskId
-                    }
-                });
+                await assignAndLoadTask(nextTaskInfo, 'defer');
             } else {
                 showCompletionModal.value = true;
             }
@@ -393,17 +370,7 @@ const handleVetoTask = async () => {
             // Move to next task after veto
             const nextTaskInfo = await workspaceStore.getNextAvailableTask();
             if (nextTaskInfo) {
-                await workspaceStore.loadAsset(nextTaskInfo.projectId, nextTaskInfo.assetId, nextTaskInfo.taskId);
-                await router.replace({
-                    name: 'AnnotationWorkspace',
-                    params: {
-                        projectId: nextTaskInfo.projectId,
-                        assetId: nextTaskInfo.assetId
-                    },
-                    query: {
-                        taskId: nextTaskInfo.taskId
-                    }
-                });
+                await assignAndLoadTask(nextTaskInfo, 'veto');
             } else {
                 showCompletionModal.value = true;
             }

From 8f0b4a2cace502d2ad8dfbd353a0c99a2a6c7b3b Mon Sep 17 00:00:00 2001
From: Cemonix <gittlermilan@seznam.cz>
Date: Tue, 2 Sep 2025 21:59:11 +0200
Subject: [PATCH 02/10] feat: Add watch and unmounted lifecycle hooks to manage
 preview popup visibility on route changes

---
 frontend/src/views/project/TasksView.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/project/TasksView.vue b/frontend/src/views/project/TasksView.vue
index 73bb7e30..572a101b 100644
--- a/frontend/src/views/project/TasksView.vue
+++ b/frontend/src/views/project/TasksView.vue
@@ -183,7 +183,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, onMounted, ref} from 'vue';
+import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
 import {useRoute, useRouter} from 'vue-router';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 import {
@@ -1036,6 +1036,22 @@ const loadStageInfo = async () => {
     }
 };
 
+watch(
+    () => route.fullPath,
+    () => {
+        // Hide preview popup when navigating away
+        if (showPreviewPopup.value) {
+            hidePreview();
+        }
+    }
+);
+
+onUnmounted(() => {
+    if (showPreviewPopup.value) {
+        hidePreview();
+    }
+});
+
 onMounted(async () => {
     // Load project data first (includes team members for permissions)
     try {

From 7b999a8c9cfdf0d254047442533bce008d56a45e Mon Sep 17 00:00:00 2001
From: Cemonix <gittlermilan@seznam.cz>
Date: Tue, 2 Sep 2025 21:59:16 +0200
Subject: [PATCH 03/10] feat: Replace showCreateSuccess with showToast for
 consistent success messaging in label scheme operations

---
 frontend/src/views/project/LabelSchemesView.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/project/LabelSchemesView.vue b/frontend/src/views/project/LabelSchemesView.vue
index a197dce7..1ef7249c 100644
--- a/frontend/src/views/project/LabelSchemesView.vue
+++ b/frontend/src/views/project/LabelSchemesView.vue
@@ -97,7 +97,7 @@ const logger = AppLogger.createComponentLogger('LabelSchemesView');
 
 const route = useRoute();
 const { showAlert } = useAlert();
-const { showCreateSuccess, showWarning, showError } = useToast();
+const { showToast, showWarning, showError } = useToast();
 
 const labelSchemes = ref<LabelScheme[]>([]);
 const isModalOpen = ref(false);
@@ -185,7 +185,7 @@ const handleCreateScheme = async (formData: FormPayloadLabelScheme) => {
         await fetchLabelSchemes();
         
         closeModal();
-        showCreateSuccess('Label Scheme');
+        showToast('Label Scheme Created', `Label Scheme "${formData.name}" has been created successfully.`);
     } catch (error) {
         showError('Error', 'Failed to create label scheme. Please try again.');
         logger.error('Failed to create label scheme:', error);
@@ -214,7 +214,7 @@ const handleUpdateScheme = async (formData: FormPayloadLabelScheme) => {
         
         await fetchLabelSchemes();
         closeModal();
-        showCreateSuccess('Label Scheme Updated');
+        showToast('Label Scheme Updated', `Label Scheme "${formData.name}" has been updated successfully.`);
     } catch (error) {
         showError('Error', 'Failed to update label scheme. Please try again.');
         logger.error('Failed to update label scheme:', error);
@@ -251,7 +251,7 @@ const confirmDelete = async () => {
         await labelSchemeService.softDeleteLabelScheme(projectId, schemeToDelete.value.labelSchemeId);
         await fetchLabelSchemes();
         closeDeleteModal();
-        showCreateSuccess('Label Scheme Deleted');
+        showToast('Label Scheme Deleted', `Label Scheme "${schemeToDelete.value.name}" has been deleted successfully.`);
     } catch (error) {
         showError('Error', 'Failed to delete label scheme. Please try again.');
         logger.error('Failed to delete label scheme:', error);
@@ -267,7 +267,7 @@ const handleReactivateScheme = async (scheme: LabelScheme) => {
         isLoading.value = true;
         await labelSchemeService.reactivateLabelScheme(projectId, scheme.labelSchemeId);
         await fetchLabelSchemes();
-        showCreateSuccess('Label Scheme Reactivated');
+        showToast('Label Scheme Reactivated', `Label Scheme "${scheme.name}" has been reactivated successfully.`);
     } catch (error) {
         showError('Error', 'Failed to reactivate label scheme. Please try again.');
         logger.error('Failed to reactivate label scheme:', error);

From 9882cafe15563d459f46e22587e3708423d79fd0 Mon Sep 17 00:00:00 2001
From: Cemonix <gittlermilan@seznam.cz>
Date: Tue, 2 Sep 2025 21:59:21 +0200
Subject: [PATCH 04/10] feat: Remove export button and related styles from
 DataSourceCard component

---
 .../project/dataSource/DataSourceCard.vue     | 22 ++++---------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/project/dataSource/DataSourceCard.vue b/frontend/src/components/project/dataSource/DataSourceCard.vue
index 5e490185..bc910fbc 100644
--- a/frontend/src/components/project/dataSource/DataSourceCard.vue
+++ b/frontend/src/components/project/dataSource/DataSourceCard.vue
@@ -35,11 +35,6 @@
                     <font-awesome-icon :icon="faUpload" class="button-icon" />
                     Upload
                 </Button>
-                <!-- TODO: Implement data export functionality (CSV, JSON, annotations) -->
-                <Button variant="secondary" class="action-button export-button" disabled>
-                    <font-awesome-icon :icon="faDownload" class="button-icon" />
-                    Export
-                </Button>
             </div>
         </template>
 
@@ -54,7 +49,7 @@
 <script setup lang="ts">
 import {computed, ref} from "vue";
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
-import {faEye, faUpload, faDownload, faDatabase} from '@fortawesome/free-solid-svg-icons';
+import {faEye, faUpload, faDatabase} from '@fortawesome/free-solid-svg-icons';
 import type {DataSource} from "@/services/project/dataSource/dataSource.types";
 import Card from "@/components/common/Card.vue";
 import Button from "@/components/common/Button.vue";
@@ -197,13 +192,15 @@ const handleUploadComplete = (count: number) => {
 
 .card-actions {
     display: flex;
+    flex-direction: row;
     gap: 0.75rem;
-    flex-wrap: wrap;
 }
 
 .action-button {
     display: flex;
     align-items: center;
+    max-width: 100px;
+    max-height: 45px;
     gap: 0.5rem;
     padding: 0.5rem 1rem;
     font-size: 0.875rem;
@@ -216,17 +213,6 @@ const handleUploadComplete = (count: number) => {
     font-size: 0.875rem;
 }
 
-.export-button {
-    background-color: var(--color-purple-100);
-    color: var(--color-purple-700);
-    border-color: var(--color-purple-200);
-}
-
-.export-button:hover {
-    background-color: var(--color-purple-200);
-    transform: translateY(-1px);
-}
-
 @media (max-width: 768px) {
     .header-content {
         flex-direction: column;

From 144fd9312e0434f9d3b7e5a22f37e60fa65872d9 Mon Sep 17 00:00:00 2001
From: Cemonix <gittlermilan@seznam.cz>
Date: Tue, 2 Sep 2025 21:59:27 +0200
Subject: [PATCH 05/10] fix: Update TODO comment for clarity on annotation data
 determination in AssetThumbnail component

---
 frontend/src/components/project/AssetThumbnail.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/project/AssetThumbnail.vue b/frontend/src/components/project/AssetThumbnail.vue
index cb662f87..b0a2cdd7 100644
--- a/frontend/src/components/project/AssetThumbnail.vue
+++ b/frontend/src/components/project/AssetThumbnail.vue
@@ -84,7 +84,7 @@ const workspaceUrl = computed(() => {
 const showPreview = ref(false);
 
 const hasAnnotations = computed(() => {
-    // This would be determined by actual annotation data
+    // TODO: This would be determined by actual annotation data
     // For now, we'll consider assets with 'annotated' or 'review' statuses to have annotations
     const annotatedStatuses = ['annotated', 'pending_review', 'review_in_progress', 'review_accepted'];
     return props.asset && annotatedStatuses.includes(props.asset.status.toLowerCase());

From 8c780d12b929814a0ae75b6a469743fd160bd204 Mon Sep 17 00:00:00 2001
From: Cemonix <gittlermilan@seznam.cz>
Date: Tue, 2 Sep 2025 21:59:32 +0200
Subject: [PATCH 06/10] feat: Add ProjectInfoSection component for managing
 project details and settings

---
 .../project/settings/ProjectInfoSection.vue   | 459 ++++++++++++++++++
 1 file changed, 459 insertions(+)
 create mode 100644 frontend/src/components/project/settings/ProjectInfoSection.vue

diff --git a/frontend/src/components/project/settings/ProjectInfoSection.vue b/frontend/src/components/project/settings/ProjectInfoSection.vue
new file mode 100644
index 00000000..615a52aa
--- /dev/null
+++ b/frontend/src/components/project/settings/ProjectInfoSection.vue
@@ -0,0 +1,459 @@
+<template>
+    <div class="project-info-section">
+        <div class="section-header">
+            <h2>Project Information</h2>
+            <p>Update your project's basic information and settings.</p>
+        </div>
+
+        <div v-if="isLoading" class="loading-state">
+            <div class="loading-spinner"></div>
+            <p>Loading project information...</p>
+        </div>
+
+        <form v-else @submit.prevent="handleUpdateProject" class="project-form">
+            <!-- Project Name -->
+            <div class="form-group">
+                <label for="project-name">Project Name</label>
+                <input
+                    id="project-name"
+                    v-model="form.name"
+                    type="text"
+                    placeholder="Enter project name"
+                    :disabled="isSaving || !canUpdate"
+                    required
+                />
+                <div v-if="errors.name" class="field-error">{{ errors.name }}</div>
+            </div>
+
+            <!-- Project Description -->
+            <div class="form-group">
+                <label for="project-description">Description</label>
+                <textarea
+                    id="project-description"
+                    v-model="form.description"
+                    placeholder="Enter project description (optional)"
+                    rows="4"
+                    :disabled="isSaving || !canUpdate"
+                ></textarea>
+                <div v-if="errors.description" class="field-error">{{ errors.description }}</div>
+            </div>
+
+
+            <!-- Project Metadata -->
+            <div class="project-metadata">
+                <div class="metadata-grid">
+                    <div class="metadata-item">
+                        <span class="metadata-label">Created</span>
+                        <span class="metadata-value">{{ formatDate(project?.createdAt) }}</span>
+                    </div>
+                    <div class="metadata-item">
+                        <span class="metadata-label">Last Updated</span>
+                        <span class="metadata-value">{{ formatDate(project?.updatedAt) }}</span>
+                    </div>
+                    <div class="metadata-item">
+                        <span class="metadata-label">Owner</span>
+                        <span class="metadata-value">{{ project?.ownerEmail || 'Unknown' }}</span>
+                    </div>
+                    <div class="metadata-item">
+                        <span class="metadata-label">Project Type</span>
+                        <span class="metadata-value">{{ formatProjectType(project?.projectType) }}</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Form Actions -->
+            <div v-if="canUpdate" class="form-actions">
+                <Button
+                    type="button"
+                    variant="secondary"
+                    @click="resetForm"
+                    :disabled="isSaving || !hasChanges"
+                >
+                    Reset Changes
+                </Button>
+                <Button
+                    type="submit"
+                    variant="primary"
+                    :disabled="isSaving || !hasChanges || !isFormValid"
+                    :loading="isSaving"
+                >
+                    {{ isSaving ? 'Saving...' : 'Save Changes' }}
+                </Button>
+            </div>
+
+            <div v-else class="read-only-notice">
+                <font-awesome-icon :icon="faLock" />
+                <p>You don't have permission to modify project settings.</p>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {computed, onMounted, reactive, ref, watch} from 'vue';
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+import {faLock} from '@fortawesome/free-solid-svg-icons';
+import Button from '@/components/common/Button.vue';
+import {projectService} from '@/services/project';
+import {useToast} from '@/composables/useToast';
+import {useErrorHandler} from '@/composables/useErrorHandler';
+import {usePermissions} from '@/composables/usePermissions';
+import {PERMISSIONS} from '@/services/auth/permissions.types';
+import {AppLogger} from '@/core/logger/logger';
+import {ProjectType, ProjectStatus} from '@/services/project/project.types';
+import type {Project, UpdateProjectRequest} from '@/services/project/project.types';
+
+const logger = AppLogger.createComponentLogger('ProjectInfoSection');
+
+interface Props {
+    projectId: number;
+}
+
+const props = defineProps<Props>();
+
+const { showToast } = useToast();
+const { handleError } = useErrorHandler();
+const { hasProjectPermission } = usePermissions();
+
+// State
+const project = ref<Project | null>(null);
+const isLoading = ref(true);
+const isSaving = ref(false);
+const originalForm = ref<any>(null);
+
+// Form state
+const form = reactive({
+    name: '',
+    description: ''
+});
+
+const errors = reactive({
+    name: '',
+    description: ''
+});
+
+// Computed
+const canUpdate = computed(() => 
+    hasProjectPermission(PERMISSIONS.PROJECT.UPDATE)
+);
+
+const hasChanges = computed(() => {
+    if (!originalForm.value) return false;
+    return (
+        form.name !== originalForm.value.name ||
+        form.description !== originalForm.value.description
+    );
+});
+
+const isFormValid = computed(() => {
+    return form.name.trim().length > 0 && 
+           !errors.name && 
+           !errors.description;
+});
+
+// Methods
+const loadProject = async () => {
+    isLoading.value = true;
+    try {
+        project.value = await projectService.getProject(props.projectId);
+        
+        // Populate form
+        if (project.value) {
+            form.name = project.value.name || '';
+            form.description = project.value.description || '';
+        }
+        
+        // Store original values
+        originalForm.value = {
+            name: form.name,
+            description: form.description
+        };
+        
+        logger.info('Project information loaded successfully');
+    } catch (error) {
+        logger.error('Failed to load project information', error);
+        handleError(error, 'Failed to load project information');
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const validateForm = (): boolean => {
+    errors.name = '';
+    errors.description = '';
+    
+    if (!form.name.trim()) {
+        errors.name = 'Project name is required';
+        return false;
+    }
+    
+    if (form.name.trim().length > 100) {
+        errors.name = 'Project name must be 100 characters or less';
+        return false;
+    }
+    
+    if (form.description && form.description.length > 500) {
+        errors.description = 'Description must be 500 characters or less';
+        return false;
+    }
+    
+    return true;
+};
+
+const handleUpdateProject = async () => {
+    if (!validateForm() || !canUpdate.value) {
+        return;
+    }
+    
+    isSaving.value = true;
+    try {
+        const updateData: UpdateProjectRequest = {
+            name: form.name.trim(),
+            description: form.description.trim() || undefined,
+            status: project.value?.status || ProjectStatus.ACTIVE
+        };
+        
+        const updatedProject = await projectService.updateProject(props.projectId, updateData);
+        project.value = updatedProject;
+        
+        // Update original form values
+        originalForm.value = {
+            name: form.name,
+            description: form.description
+        };
+        
+        logger.info('Project updated successfully');
+        showToast('Success', 'Project information updated successfully', 'success');
+    } catch (error) {
+        logger.error('Failed to update project', error);
+        handleError(error, 'Failed to update project information');
+    } finally {
+        isSaving.value = false;
+    }
+};
+
+const resetForm = () => {
+    if (originalForm.value) {
+        form.name = originalForm.value.name;
+        form.description = originalForm.value.description;
+    }
+    
+    // Clear errors
+    errors.name = '';
+    errors.description = '';
+};
+
+const formatDate = (dateString?: string): string => {
+    if (!dateString) return 'Unknown';
+    
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+};
+
+const formatProjectType = (projectType?: ProjectType): string => {
+    if (!projectType) return 'Unknown';
+    
+    const typeLabels = {
+        [ProjectType.OTHER]: 'Other',
+        [ProjectType.IMAGE_CLASSIFICATION]: 'Image Classification',
+        [ProjectType.OBJECT_DETECTION]: 'Object Detection',
+        [ProjectType.IMAGE_SEGMENTATION]: 'Image Segmentation',
+        [ProjectType.VIDEO_ANNOTATION]: 'Video Annotation',
+        [ProjectType.TEXT_ANNOTATION]: 'Text Annotation'
+    };
+    
+    return typeLabels[projectType] || projectType;
+};
+
+// Lifecycle
+onMounted(() => {
+    loadProject();
+});
+
+// Watch for form changes to clear errors
+watch(() => form.name, () => {
+    if (errors.name) errors.name = '';
+});
+
+watch(() => form.description, () => {
+    if (errors.description) errors.description = '';
+});
+</script>
+
+<style lang="scss" scoped>
+.project-info-section {
+    padding: 2rem;
+}
+
+.section-header {
+    margin-bottom: 2rem;
+    
+    h2 {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: var(--color-gray-900);
+        margin-bottom: 0.5rem;
+    }
+    
+    p {
+        color: var(--color-gray-600);
+        line-height: 1.5;
+    }
+}
+
+.loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+    color: var(--color-gray-600);
+    
+    .loading-spinner {
+        width: 2rem;
+        height: 2rem;
+        border: 3px solid var(--color-gray-300);
+        border-top: 3px solid var(--color-primary);
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-bottom: 1rem;
+    }
+    
+    p {
+        font-style: italic;
+    }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.project-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 600px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    
+    label {
+        font-weight: 500;
+        color: var(--color-gray-700);
+        font-size: 0.875rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    
+    input, textarea, select {
+        padding: 0.75rem;
+        border: 1px solid var(--color-gray-300);
+        border-radius: 4px;
+        font-size: 1rem;
+        transition: border-color 0.2s ease;
+        
+        &:focus {
+            outline: none;
+            border-color: var(--color-primary);
+            box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
+        }
+        
+        &:disabled {
+            background-color: var(--color-gray-50);
+            color: var(--color-gray-500);
+            cursor: not-allowed;
+        }
+    }
+    
+    textarea {
+        resize: vertical;
+        min-height: 100px;
+        font-family: inherit;
+    }
+}
+
+.field-error {
+    color: var(--color-error);
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.field-help {
+    color: var(--color-gray-600);
+    font-size: 0.875rem;
+    line-height: 1.4;
+}
+
+.project-metadata {
+    background-color: var(--color-gray-50);
+    border-radius: 6px;
+    padding: 1.5rem;
+    margin-top: 1rem;
+    
+    .metadata-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 1rem;
+    }
+    
+    .metadata-item {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        
+        .metadata-label {
+            font-size: 0.75rem;
+            font-weight: 500;
+            color: var(--color-gray-600);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+        
+        .metadata-value {
+            font-weight: 500;
+            color: var(--color-gray-900);
+        }
+    }
+}
+
+.form-actions {
+    display: flex;
+    gap: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--color-gray-200);
+    
+    @media (max-width: 768px) {
+        flex-direction: column-reverse;
+    }
+}
+
+.read-only-notice {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    background-color: var(--color-yellow-50);
+    border: 1px solid var(--color-yellow-200);
+    border-radius: 4px;
+    color: var(--color-yellow-800);
+    
+    svg {
+        color: var(--color-yellow-600);
+    }
+    
+    p {
+        margin: 0;
+        font-size: 0.875rem;
+    }
+}
+</style>
\ No newline at end of file

From 90b39cf9c9d4fc3f7092254c43bd53c8eed9bec6 Mon Sep 17 00:00:00 2001
From: Cemonix <gittlermilan@seznam.cz>
Date: Tue, 2 Sep 2025 21:59:36 +0200
Subject: [PATCH 07/10] feat: Implement InvitationsSection component for
 managing team member invitations

---
 .../project/settings/InvitationsSection.vue   | 734 ++++++++++++++++++
 1 file changed, 734 insertions(+)
 create mode 100644 frontend/src/components/project/settings/InvitationsSection.vue

diff --git a/frontend/src/components/project/settings/InvitationsSection.vue b/frontend/src/components/project/settings/InvitationsSection.vue
new file mode 100644
index 00000000..2923a7c8
--- /dev/null
+++ b/frontend/src/components/project/settings/InvitationsSection.vue
@@ -0,0 +1,734 @@
+<template>
+    <div class="invitations-section">
+        <div class="section-header">
+            <h2>Invitations</h2>
+            <p>Send invitations to new team members and manage pending invitations.</p>
+        </div>
+
+        <!-- Invite New Member Form -->
+        <div v-if="canInviteMembers" class="invite-form-card">
+            <h3>
+                <font-awesome-icon :icon="faEnvelope" />
+                Invite New Member
+            </h3>
+            
+            <form @submit.prevent="handleSendInvite" class="invite-form">
+                <div class="form-grid">
+                    <!-- Row 1: Labels -->
+                    <label for="invite-email">Email Address</label>
+                    <label for="invite-role">Role</label>
+                    <span></span>
+                    
+                    <!-- Row 2: Controls -->
+                    <input
+                        id="invite-email"
+                        v-model="inviteForm.email"
+                        type="email"
+                        placeholder="colleague@company.com"
+                        required
+                        :disabled="isSending"
+                    />
+                    <select
+                        id="invite-role"
+                        v-model="inviteForm.role"
+                        required
+                        :disabled="isSending"
+                    >
+                        <option value="">Select a role</option>
+                        <option 
+                            v-for="role in availableRoles" 
+                            :key="role.value" 
+                            :value="role.value"
+                        >
+                            {{ role.label }}
+                        </option>
+                    </select>
+                    <Button
+                        type="submit"
+                        variant="primary"
+                        :disabled="isSending || !isInviteFormValid"
+                        :loading="isSending"
+                    >
+                        {{ isSending ? 'Sending...' : 'Send Invitation' }}
+                    </Button>
+                </div>
+                
+                <!-- Error messages -->
+                <div class="form-errors">
+                    <div v-if="inviteErrors.email" class="field-error">{{ inviteErrors.email }}</div>
+                    <div v-if="inviteErrors.role" class="field-error">{{ inviteErrors.role }}</div>
+                </div>
+
+                <!-- Role Description -->
+                <div v-if="inviteForm.role" class="role-description">
+                    <font-awesome-icon :icon="faInfoCircle" />
+                    <span>{{ getRoleDescription(inviteForm.role) }}</span>
+                </div>
+            </form>
+        </div>
+
+        <!-- No Permission Message -->
+        <div v-else class="no-permission">
+            <font-awesome-icon :icon="faLock" />
+            <p>You don't have permission to invite new members to this project.</p>
+        </div>
+
+        <!-- Pending Invitations List -->
+        <div class="invitations-list-card">
+            <div class="list-header">
+                <h3>
+                    <font-awesome-icon :icon="faClock" />
+                    Pending Invitations
+                    <span class="count-badge">{{ pendingInvitations.length }}</span>
+                </h3>
+                
+                <Button
+                    v-if="pendingInvitations.length > 0"
+                    variant="secondary"
+                    size="small"
+                    @click="loadInvitations"
+                    :disabled="isLoading"
+                >
+                    <font-awesome-icon :icon="faRefresh" />
+                    Refresh
+                </Button>
+            </div>
+
+            <div v-if="isLoading" class="loading-state">
+                <div class="loading-spinner"></div>
+                <p>Loading invitations...</p>
+            </div>
+
+            <div v-else-if="pendingInvitations.length === 0" class="empty-state">
+                <font-awesome-icon :icon="faEnvelope" class="empty-icon" />
+                <h4>No Pending Invitations</h4>
+                <p>All sent invitations have been accepted or there are no invitations yet.</p>
+            </div>
+
+            <div v-else class="invitations-list">
+                <div 
+                    v-for="invitation in pendingInvitations" 
+                    :key="invitation.id"
+                    class="invitation-card"
+                >
+                    <div class="invitation-info">
+                        <div class="invitation-main">
+                            <span class="invitation-email">{{ invitation.email }}</span>
+                            <span class="invitation-role" :class="`role-${invitation.role.toLowerCase()}`">
+                                {{ getRoleLabel(invitation.role) }}
+                            </span>
+                        </div>
+                        <div class="invitation-meta">
+                            <span class="invitation-date">
+                                <font-awesome-icon :icon="faCalendar" />
+                                Invited {{ formatDate(invitation.invitedAt) }}
+                            </span>
+                        </div>
+                    </div>
+                    
+                    <div class="invitation-actions">
+                        <Button
+                            v-if="canRevokeInvitations"
+                            variant="danger"
+                            size="small"
+                            @click="handleRevokeInvitation(invitation)"
+                            :disabled="isRevoking"
+                        >
+                            <font-awesome-icon :icon="faTimes" />
+                            Revoke
+                        </Button>
+                        <Button
+                            variant="secondary"
+                            size="small"
+                            @click="resendInvitation(invitation)"
+                            :disabled="isResending"
+                        >
+                            <font-awesome-icon :icon="faRedo" />
+                            Resend
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {computed, onMounted, reactive, ref} from 'vue';
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+import {
+    faEnvelope,
+    faLock,
+    faInfoCircle,
+    faClock,
+    faRefresh,
+    faCalendar,
+    faTimes,
+    faRedo
+} from '@fortawesome/free-solid-svg-icons';
+import Button from '@/components/common/Button.vue';
+import {projectMemberService} from '@/services/project';
+import {useToast} from '@/composables/useToast';
+import {useConfirm} from '@/composables/useConfirm';
+import {useErrorHandler} from '@/composables/useErrorHandler';
+import {usePermissions} from '@/composables/usePermissions';
+import {PERMISSIONS} from '@/services/auth/permissions.types';
+import {AppLogger} from '@/core/logger/logger';
+import type {InviteMemberRequest, ProjectMember} from '@/services/project/projectMember.types';
+import {ProjectRole} from '@/services/project/project.types';
+
+const logger = AppLogger.createComponentLogger('InvitationsSection');
+
+interface Props {
+    projectId: number;
+}
+
+const props = defineProps<Props>();
+
+const { showToast } = useToast();
+const { showConfirm } = useConfirm();
+const { handleError } = useErrorHandler();
+const { hasProjectPermission } = usePermissions();
+
+// State
+const pendingInvitations = ref<ProjectMember[]>([]);
+const isLoading = ref(true);
+const isSending = ref(false);
+const isRevoking = ref(false);
+const isResending = ref(false);
+
+// Form state
+const inviteForm = reactive({
+    email: '',
+    role: '' as ProjectRole | ''
+});
+
+const inviteErrors = reactive({
+    email: '',
+    role: ''
+});
+
+// Available roles for selection
+const availableRoles = [
+    { value: ProjectRole.MANAGER, label: 'Manager' },
+    { value: ProjectRole.REVIEWER, label: 'Reviewer' },
+    { value: ProjectRole.ANNOTATOR, label: 'Annotator' },
+    { value: ProjectRole.VIEWER, label: 'Viewer' }
+];
+
+// Computed
+const canInviteMembers = computed(() => 
+    hasProjectPermission(PERMISSIONS.PROJECT_MEMBER.INVITE)
+);
+
+const canRevokeInvitations = computed(() => 
+    hasProjectPermission(PERMISSIONS.PROJECT_MEMBER.REMOVE)
+);
+
+const isInviteFormValid = computed(() => {
+    return inviteForm.email.trim() && 
+        inviteForm.role && 
+        !inviteErrors.email && 
+        !inviteErrors.role;
+});
+
+// Methods
+const loadInvitations = async () => {
+    isLoading.value = true;
+    try {
+        const members = await projectMemberService.getProjectMembers(props.projectId);
+        
+        // Filter only pending invitations (no joinedAt date)
+        pendingInvitations.value = members.filter(m => !m.joinedAt);
+        
+        logger.info(`Loaded ${pendingInvitations.value.length} pending invitations`);
+    } catch (error) {
+        logger.error('Failed to load invitations', error);
+        handleError(error, 'Failed to load pending invitations');
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const validateInviteForm = (): boolean => {
+    inviteErrors.email = '';
+    inviteErrors.role = '';
+    
+    if (!inviteForm.email.trim()) {
+        inviteErrors.email = 'Email address is required';
+        return false;
+    }
+    
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(inviteForm.email.trim())) {
+        inviteErrors.email = 'Please enter a valid email address';
+        return false;
+    }
+    
+    if (!inviteForm.role) {
+        inviteErrors.role = 'Please select a role';
+        return false;
+    }
+    
+    // Check if user is already invited
+    const email = inviteForm.email.trim().toLowerCase();
+    const isAlreadyInvited = pendingInvitations.value.some(m => 
+        m.email?.toLowerCase() === email
+    );
+    
+    if (isAlreadyInvited) {
+        inviteErrors.email = 'This user has already been invited';
+        return false;
+    }
+    
+    return true;
+};
+
+const handleSendInvite = async () => {
+    if (!validateInviteForm() || !canInviteMembers.value) {
+        return;
+    }
+    
+    isSending.value = true;
+    try {
+        const inviteData: InviteMemberRequest = {
+            email: inviteForm.email.trim(),
+            role: inviteForm.role as ProjectRole
+        };
+        
+        await projectMemberService.inviteMember(props.projectId, inviteData);
+        
+        // Reset form
+        inviteForm.email = '';
+        inviteForm.role = '';
+        
+        // Reload invitations to show the new one
+        await loadInvitations();
+        
+        logger.info(`Sent invitation to ${inviteData.email} with role ${inviteData.role}`);
+        showToast('Success', `Invitation sent to ${inviteData.email}`, 'success');
+    } catch (error) {
+        logger.error('Failed to send invitation', error);
+        handleError(error, 'Failed to send invitation');
+    } finally {
+        isSending.value = false;
+    }
+};
+
+const handleRevokeInvitation = async (invitation: ProjectMember) => {
+    const confirmed = await showConfirm(
+        'Revoke Invitation', 
+        `Are you sure you want to revoke the invitation for ${invitation.email}? This action cannot be undone.`
+    );
+    
+    if (!confirmed) return;
+    
+    isRevoking.value = true;
+    try {
+        await projectMemberService.removeMember(props.projectId, invitation.email);
+        pendingInvitations.value = pendingInvitations.value.filter(i => i.id !== invitation.id);
+        
+        logger.info(`Revoked invitation for ${invitation.email}`);
+        showToast('Success', `Invitation revoked for ${invitation.email}`, 'success');
+    } catch (error) {
+        logger.error('Failed to revoke invitation', error);
+        handleError(error, 'Failed to revoke invitation');
+    } finally {
+        isRevoking.value = false;
+    }
+};
+
+const resendInvitation = async (invitation: ProjectMember) => {
+    const confirmed = await showConfirm(
+        'Resend Invitation', 
+        `Do you want to resend the invitation to ${invitation.email}?`
+    );
+    
+    if (!confirmed) return;
+    
+    isResending.value = true;
+    try {
+        const inviteData: InviteMemberRequest = {
+            email: invitation.email,
+            role: invitation.role
+        };
+        
+        await projectMemberService.inviteMember(props.projectId, inviteData);
+        
+        logger.info(`Resent invitation to ${invitation.email}`);
+        showToast('Success', `Invitation resent to ${invitation.email}`, 'success');
+    } catch (error) {
+        logger.error('Failed to resend invitation', error);
+        handleError(error, 'Failed to resend invitation');
+    } finally {
+        isResending.value = false;
+    }
+};
+
+const getRoleLabel = (role: ProjectRole): string => {
+    const roleObj = availableRoles.find(r => r.value === role);
+    return roleObj ? roleObj.label : role;
+};
+
+const getRoleDescription = (role: ProjectRole | ''): string => {
+    if (!role) return '';
+    
+    const descriptions = {
+        [ProjectRole.MANAGER]: 'Full access to project settings, data, and member management',
+        [ProjectRole.REVIEWER]: 'Can review and approve annotations, view all project data',
+        [ProjectRole.ANNOTATOR]: 'Can create and edit annotations on assigned tasks',
+        [ProjectRole.VIEWER]: 'Read-only access to project data and annotations'
+    };
+    
+    return descriptions[role] || '';
+};
+
+const formatDate = (dateString: string): string => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffInDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24));
+    
+    if (diffInDays === 0) return 'today';
+    if (diffInDays === 1) return 'yesterday';
+    if (diffInDays < 7) return `${diffInDays} days ago`;
+    
+    return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+    });
+};
+
+// Lifecycle
+onMounted(() => {
+    loadInvitations();
+});
+</script>
+
+<style lang="scss" scoped>
+.invitations-section {
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.section-header {
+    h2 {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: var(--color-gray-900);
+        margin-bottom: 0.5rem;
+    }
+    
+    p {
+        color: var(--color-gray-600);
+        line-height: 1.5;
+    }
+}
+
+.invite-form-card, .invitations-list-card {
+    background-color: var(--color-gray-50);
+    border-radius: 8px;
+    padding: 1.5rem;
+    border: 1px solid var(--color-gray-200);
+    
+    h3 {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--color-gray-800);
+        margin-bottom: 1rem;
+        
+        svg {
+            color: var(--color-primary);
+        }
+    }
+}
+
+.invite-form {
+    .form-grid {
+        display: grid;
+        grid-template-columns: 5fr 2fr 1fr;
+        grid-template-rows: auto 1fr;
+        gap: 0.5rem 1rem;
+        align-items: end;
+        margin-bottom: 1rem;
+        
+        @media (max-width: 768px) {
+            grid-template-columns: 1fr;
+            grid-template-rows: repeat(6, auto);
+        }
+        
+        label {
+            font-weight: 500;
+            color: var(--color-gray-700);
+            font-size: 0.875rem;
+            margin-bottom: 0.25rem;
+            align-self: end;
+        }
+        
+        input, select {
+            padding: 0.75rem;
+            border: 1px solid var(--color-gray-300);
+            border-radius: 4px;
+            font-size: 1rem;
+            background-color: var(--color-white);
+            box-sizing: border-box;
+            
+            &:focus {
+                outline: none;
+                border-color: var(--color-primary);
+                box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
+            }
+            
+            &:disabled {
+                background-color: var(--color-gray-100);
+                cursor: not-allowed;
+            }
+        }
+        
+        button {
+            font-size: 0.875rem;
+            padding: 0.75rem 1.25rem;
+            border-radius: 6px;
+            transition: all 0.2s ease;
+            white-space: nowrap;
+            height: 100%;
+            width: 100%;
+            
+            &:hover:not(:disabled) {
+                transform: translateY(-1px);
+                box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
+            }
+            
+            &:disabled {
+                border: 1px solid var(--color-gray-300);
+                background-color: var(--color-gray-100);
+                color: var(--color-gray-500);
+                cursor: not-allowed;
+            }
+        }
+    }
+    
+    .form-errors {
+        display: grid;
+        grid-template-columns: 5fr 2fr 1fr;
+        gap: 0 1rem;
+        
+        @media (max-width: 768px) {
+            grid-template-columns: 1fr;
+        }
+    }
+}
+
+.role-description {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    background-color: var(--color-blue-50);
+    border-left: 4px solid var(--color-blue-400);
+    border-radius: 4px;
+    color: var(--color-blue-800);
+    font-size: 0.875rem;
+    line-height: 1.4;
+    
+    svg {
+        color: var(--color-blue-500);
+        flex-shrink: 0;
+    }
+}
+
+.no-permission {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1.5rem;
+    background-color: var(--color-yellow-50);
+    border: 1px solid var(--color-yellow-200);
+    border-radius: 8px;
+    color: var(--color-yellow-800);
+    
+    svg {
+        color: var(--color-yellow-600);
+        font-size: 1.25rem;
+    }
+    
+    p {
+        margin: 0;
+        font-weight: 500;
+    }
+}
+
+.list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    
+    h3 {
+        margin-bottom: 0;
+        
+        .count-badge {
+            background-color: var(--color-primary);
+            color: white;
+            padding: 0.25rem 0.5rem;
+            border-radius: 12px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            margin-left: 0.5rem;
+        }
+    }
+}
+
+.loading-state, .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+    color: var(--color-gray-600);
+    text-align: center;
+    
+    .loading-spinner {
+        width: 2rem;
+        height: 2rem;
+        border: 3px solid var(--color-gray-300);
+        border-top: 3px solid var(--color-primary);
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-bottom: 1rem;
+    }
+    
+    .empty-icon {
+        font-size: 3rem;
+        color: var(--color-gray-400);
+        margin-bottom: 1rem;
+    }
+    
+    h4 {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        color: var(--color-gray-700);
+    }
+    
+    p {
+        margin: 0;
+        line-height: 1.5;
+    }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.invitations-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.invitation-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem;
+    background-color: var(--color-white);
+    border: 1px solid var(--color-gray-300);
+    border-radius: 6px;
+    transition: all 0.2s ease;
+    
+    &:hover {
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        border-color: var(--color-gray-400);
+    }
+    
+    @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+    }
+}
+
+.invitation-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    flex-grow: 1;
+}
+
+.invitation-main {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    
+    .invitation-email {
+        font-weight: 500;
+        color: var(--color-gray-900);
+        font-size: 1rem;
+    }
+    
+    .invitation-role {
+        padding: 0.25rem 0.75rem;
+        border-radius: 12px;
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        
+        &.role-manager {
+            background-color: var(--color-red-100);
+            color: var(--color-red-800);
+        }
+        
+        &.role-reviewer {
+            background-color: var(--color-yellow-100);
+            color: var(--color-yellow-800);
+        }
+        
+        &.role-annotator {
+            background-color: var(--color-blue-100);
+            color: var(--color-blue-800);
+        }
+        
+        &.role-viewer {
+            background-color: var(--color-gray-100);
+            color: var(--color-gray-800);
+        }
+    }
+}
+
+.invitation-meta {
+    .invitation-date {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        font-size: 0.875rem;
+        color: var(--color-gray-600);
+        
+        svg {
+            font-size: 0.75rem;
+        }
+    }
+}
+
+.invitation-actions {
+    display: flex;
+    gap: 0.5rem;
+    
+    @media (max-width: 768px) {
+        justify-content: flex-end;
+    }
+}
+
+.field-error {
+    color: var(--color-error);
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+</style>
\ No newline at end of file

From f9c9a5801a37ea76ad034413298a88a6301e111c Mon Sep 17 00:00:00 2001
From: Cemonix <gittlermilan@seznam.cz>
Date: Tue, 2 Sep 2025 21:59:40 +0200
Subject: [PATCH 08/10] feat: Add DangerZoneSection component for managing
 project archival, restoration, ownership transfer, and deletion

---
 .../project/settings/DangerZoneSection.vue    | 661 ++++++++++++++++++
 1 file changed, 661 insertions(+)
 create mode 100644 frontend/src/components/project/settings/DangerZoneSection.vue

diff --git a/frontend/src/components/project/settings/DangerZoneSection.vue b/frontend/src/components/project/settings/DangerZoneSection.vue
new file mode 100644
index 00000000..f995c7fb
--- /dev/null
+++ b/frontend/src/components/project/settings/DangerZoneSection.vue
@@ -0,0 +1,661 @@
+<template>
+    <div class="danger-zone-section">
+        <div class="section-header">
+            <font-awesome-icon :icon="faExclamationTriangle" class="warning-icon" />
+            <div>
+                <h2>Danger Zone</h2>
+                <p>These actions are destructive and cannot be undone. Please be careful.</p>
+            </div>
+        </div>
+
+        <div class="danger-actions">
+            <!-- Archive Project -->
+            <div class="danger-item">
+                <div class="danger-info">
+                    <h3>Archive Project</h3>
+                    <p>Archive this project to hide it from project lists. The project and all its data will be preserved but marked as archived. You can restore it later.</p>
+                    <div class="danger-effects">
+                        <span class="effect-item">• Project will be hidden from main project list</span>
+                        <span class="effect-item">• All data and annotations will be preserved</span>
+                        <span class="effect-item">• Can be restored later</span>
+                    </div>
+                </div>
+                <div class="danger-action">
+                    <Button
+                        variant="secondary"
+                        @click="handleArchiveProject"
+                        :disabled="isArchiving || project?.status === ProjectStatus.ARCHIVED"
+                        :loading="isArchiving"
+                    >
+                        {{ project?.status === ProjectStatus.ARCHIVED ? 'Already Archived' : 'Archive Project' }}
+                    </Button>
+                </div>
+            </div>
+
+            <!-- Restore Project -->
+            <div v-if="project?.status === ProjectStatus.ARCHIVED" class="danger-item restore-item">
+                <div class="danger-info">
+                    <h3>Restore Project</h3>
+                    <p>Restore this archived project to make it visible and accessible again.</p>
+                    <div class="danger-effects">
+                        <span class="effect-item">• Project will appear in project lists</span>
+                        <span class="effect-item">• All team members can access it again</span>
+                        <span class="effect-item">• Work can continue normally</span>
+                    </div>
+                </div>
+                <div class="danger-action">
+                    <Button
+                        variant="primary"
+                        @click="handleRestoreProject"
+                        :disabled="isRestoring"
+                        :loading="isRestoring"
+                    >
+                        Restore Project
+                    </Button>
+                </div>
+            </div>
+
+            <!-- Transfer Ownership -->
+            <div class="danger-item">
+                <div class="danger-info">
+                    <h3>Transfer Project Ownership</h3>
+                    <p>Transfer ownership of this project to another team member. The new owner will have full control over the project.</p>
+                    <div class="danger-effects">
+                        <span class="effect-item">• New owner gets full project control</span>
+                        <span class="effect-item">• Your access level may change</span>
+                        <span class="effect-item">• Cannot be undone automatically</span>
+                    </div>
+                </div>
+                <div class="danger-action">
+                    <div class="transfer-form">
+                        <select 
+                            v-model="transferToEmail" 
+                            class="transfer-select"
+                            :disabled="isTransferring"
+                        >
+                            <option value="">Select new owner...</option>
+                            <option 
+                                v-for="member in projectManagers" 
+                                :key="member.email"
+                                :value="member.email"
+                            >
+                                {{ member.userName || member.email }}
+                            </option>
+                        </select>
+                        <Button
+                            variant="secondary"
+                            @click="handleTransferOwnership"
+                            :disabled="isTransferring || !transferToEmail"
+                            :loading="isTransferring"
+                        >
+                            Transfer Ownership
+                        </Button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Delete Project -->
+            <div class="danger-item delete-item">
+                <div class="danger-info">
+                    <h3>Delete Project Permanently</h3>
+                    <p><strong>This action cannot be undone!</strong> This will permanently delete the project and all associated data including annotations, images, and member access.</p>
+                    <div class="danger-effects critical">
+                        <span class="effect-item">• All project data will be permanently deleted</span>
+                        <span class="effect-item">• All annotations and labels will be lost</span>
+                        <span class="effect-item">• All team member access will be removed</span>
+                        <span class="effect-item">• This action is irreversible</span>
+                    </div>
+                </div>
+                <div class="danger-action">
+                    <Button
+                        variant="secondary"
+                        @click="showDeleteConfirmation = true"
+                        :disabled="isDeleting"
+                        class="delete-btn"
+                    >
+                        Delete Project Forever
+                    </Button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Delete Confirmation Modal -->
+        <div v-if="showDeleteConfirmation" class="modal-overlay" @click.self="showDeleteConfirmation = false">
+            <div class="delete-confirmation-modal">
+                <div class="modal-header">
+                    <font-awesome-icon :icon="faExclamationTriangle" class="modal-warning-icon" />
+                    <h3>Confirm Project Deletion</h3>
+                </div>
+                
+                <div class="modal-content">
+                    <p>You are about to <strong>permanently delete</strong> the project:</p>
+                    <div class="project-name">{{ project?.name }}</div>
+                    
+                    <div class="confirmation-requirements">
+                        <p>To confirm deletion, please type the project name exactly:</p>
+                        <input
+                            v-model="deleteConfirmationName"
+                            type="text"
+                            :placeholder="project?.name"
+                            class="confirmation-input"
+                            @keyup.enter="handleDeleteProject"
+                        />
+                        <div v-if="deleteConfirmationError" class="confirmation-error">
+                            {{ deleteConfirmationError }}
+                        </div>
+                    </div>
+
+                    <div class="final-warning">
+                        <font-awesome-icon :icon="faExclamationTriangle" />
+                        <span>This action is irreversible and will delete all project data permanently.</span>
+                    </div>
+                </div>
+
+                <div class="modal-actions">
+                    <Button
+                        variant="secondary"
+                        @click="cancelDelete"
+                        :disabled="isDeleting"
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="secondary"
+                        @click="handleDeleteProject"
+                        :disabled="isDeleting || !isDeleteConfirmed"
+                        :loading="isDeleting"
+                        class="confirm-delete-btn"
+                    >
+                        Yes, Delete Forever
+                    </Button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import Button from '@/components/common/Button.vue';
+import { projectService } from '@/services/project';
+import { projectMemberService } from '@/services/project';
+import { useToast } from '@/composables/useToast';
+import { useConfirm } from '@/composables/useConfirm';
+import { useErrorHandler } from '@/composables/useErrorHandler';
+import { useAuthStore } from '@/stores/authStore';
+import { AppLogger } from '@/core/logger/logger';
+import { ProjectStatus, ProjectRole } from '@/services/project/project.types';
+import type { Project } from '@/services/project/project.types';
+import type { ProjectMember } from '@/services/project/projectMember.types';
+
+const logger = AppLogger.createComponentLogger('DangerZoneSection');
+
+interface Props {
+    projectId: number;
+}
+
+const props = defineProps<Props>();
+
+const router = useRouter();
+const { showToast } = useToast();
+const { showConfirm } = useConfirm();
+const { handleError } = useErrorHandler();
+const authStore = useAuthStore();
+
+// State
+const project = ref<Project | null>(null);
+const projectMembers = ref<ProjectMember[]>([]);
+const isArchiving = ref(false);
+const isRestoring = ref(false);
+const isTransferring = ref(false);
+const isDeleting = ref(false);
+const transferToEmail = ref('');
+const showDeleteConfirmation = ref(false);
+const deleteConfirmationName = ref('');
+const deleteConfirmationError = ref('');
+
+// Computed
+const projectManagers = computed(() => 
+    projectMembers.value.filter(member => 
+        member.role === ProjectRole.MANAGER && 
+        member.email !== authStore.user?.email &&
+        member.joinedAt // Only show active members
+    )
+);
+
+const isDeleteConfirmed = computed(() => 
+    deleteConfirmationName.value.trim() === project.value?.name?.trim()
+);
+
+// Methods
+const loadProjectData = async () => {
+    try {
+        const [projectData, membersData] = await Promise.all([
+            projectService.getProject(props.projectId),
+            projectMemberService.getProjectMembers(props.projectId)
+        ]);
+        
+        project.value = projectData;
+        projectMembers.value = membersData;
+        
+        logger.info('Project data loaded for danger zone');
+    } catch (error) {
+        handleError(error, 'Failed to load project data');
+    }
+};
+
+const handleArchiveProject = async () => {
+    const confirmed = await showConfirm(
+        'Archive Project',
+        `Are you sure you want to archive "${project.value?.name}"? The project will be hidden from lists but can be restored later.`
+    );
+    
+    if (!confirmed) return;
+    
+    isArchiving.value = true;
+    try {
+        const archivedProject = await projectService.archiveProject(props.projectId);
+        project.value = archivedProject;
+        
+        logger.info(`Project ${props.projectId} archived successfully`);
+        showToast('Success', 'Project archived successfully', 'success');
+    } catch (error) {
+        handleError(error, 'Failed to archive project');
+    } finally {
+        isArchiving.value = false;
+    }
+};
+
+const handleRestoreProject = async () => {
+    const confirmed = await showConfirm(
+        'Restore Project',
+        `Are you sure you want to restore "${project.value?.name}"? The project will become visible and accessible again.`
+    );
+    
+    if (!confirmed) return;
+    
+    isRestoring.value = true;
+    try {
+        const restoredProject = await projectService.restoreProject(props.projectId);
+        project.value = restoredProject;
+        
+        logger.info(`Project ${props.projectId} restored successfully`);
+        showToast('Success', 'Project restored successfully', 'success');
+    } catch (error) {
+        handleError(error, 'Failed to restore project');
+    } finally {
+        isRestoring.value = false;
+    }
+};
+
+const handleTransferOwnership = async () => {
+    if (!transferToEmail.value) return;
+    
+    const targetMember = projectMembers.value.find(m => m.email === transferToEmail.value);
+    const confirmed = await showConfirm(
+        'Transfer Ownership',
+        `Are you sure you want to transfer ownership of "${project.value?.name}" to ${targetMember?.userName || transferToEmail.value}? This action cannot be undone automatically.`
+    );
+    
+    if (!confirmed) return;
+    
+    isTransferring.value = true;
+    try {
+        // Note: This would need a backend endpoint for ownership transfer
+        // For now, we'll show a placeholder implementation
+        await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate API call
+        
+        logger.info(`Ownership transfer initiated for project ${props.projectId} to ${transferToEmail.value}`);
+        showToast('Success', 'Ownership transfer completed', 'success');
+        transferToEmail.value = '';
+        
+        // Reload project data to reflect changes
+        await loadProjectData();
+    } catch (error) {
+        handleError(error, 'Failed to transfer project ownership');
+    } finally {
+        isTransferring.value = false;
+    }
+};
+
+const handleDeleteProject = async () => {
+    if (!isDeleteConfirmed.value) {
+        deleteConfirmationError.value = 'Please type the project name exactly to confirm deletion';
+        return;
+    }
+    
+    deleteConfirmationError.value = '';
+    isDeleting.value = true;
+    
+    try {
+        await projectService.deleteProject(props.projectId);
+        
+        logger.info(`Project ${props.projectId} deleted successfully`);
+        showToast('Success', 'Project deleted permanently', 'success');
+        
+        // Navigate back to projects list after successful deletion
+        router.push('/projects');
+    } catch (error) {
+        handleError(error, 'Failed to delete project');
+        showDeleteConfirmation.value = false;
+    } finally {
+        isDeleting.value = false;
+    }
+};
+
+const cancelDelete = () => {
+    showDeleteConfirmation.value = false;
+    deleteConfirmationName.value = '';
+    deleteConfirmationError.value = '';
+};
+
+// Lifecycle
+onMounted(() => {
+    loadProjectData();
+});
+</script>
+
+<style lang="scss" scoped>
+.danger-zone-section {
+    padding: 2rem;
+    background-color: var(--color-white);
+}
+
+.section-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 2px solid var(--color-error-light);
+    
+    .warning-icon {
+        color: var(--color-error);
+        font-size: 1.5rem;
+        margin-top: 0.25rem;
+    }
+    
+    h2 {
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: var(--color-error);
+        margin-bottom: 0.5rem;
+    }
+    
+    p {
+        color: var(--color-gray-700);
+        font-size: 1rem;
+        line-height: 1.5;
+        margin: 0;
+    }
+}
+
+.danger-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.danger-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 1.5rem;
+    background-color: var(--color-white);
+    border: 1px solid var(--color-gray-300);
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    
+    &.restore-item {
+        border-color: var(--color-success);
+        background-color: var(--color-success-light);
+        
+        h3 {
+            color: var(--color-success);
+        }
+    }
+    
+    &.delete-item {
+        border-color: var(--color-error);
+        background-color: var(--color-error-light);
+        
+        h3 {
+            color: var(--color-error);
+        }
+    }
+    
+    @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+    }
+}
+
+.danger-info {
+    flex: 1;
+    margin-right: 2rem;
+    
+    @media (max-width: 768px) {
+        margin-right: 0;
+    }
+    
+    h3 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        color: var(--color-gray-800);
+    }
+    
+    p {
+        color: var(--color-gray-700);
+        line-height: 1.5;
+        margin-bottom: 1rem;
+    }
+}
+
+.danger-effects {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    
+    &.critical {
+        .effect-item {
+            color: var(--color-error);
+            font-weight: 500;
+        }
+    }
+    
+    .effect-item {
+        font-size: 0.875rem;
+        color: var(--color-gray-600);
+        line-height: 1.4;
+    }
+}
+
+.danger-action {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.transfer-form {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    
+    @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}
+
+.transfer-select {
+    min-width: 200px;
+    padding: 0.5rem;
+    border: 1px solid var(--color-gray-400);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    
+    @media (max-width: 768px) {
+        min-width: 100%;
+    }
+}
+
+.delete-btn {
+    background-color: var(--color-error) !important;
+    border-color: var(--color-error) !important;
+    color: var(--color-white) !important;
+    
+    &:hover:not(:disabled) {
+        background-color: var(--color-error-dark) !important;
+        border-color: var(--color-error-dark) !important;
+    }
+}
+
+// Delete Confirmation Modal
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 1rem;
+}
+
+.delete-confirmation-modal {
+    background-color: var(--color-white);
+    border-radius: 8px;
+    max-width: 500px;
+    width: 100%;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+    animation: modalSlideIn 0.3s ease-out;
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--color-gray-200);
+    
+    .modal-warning-icon {
+        color: var(--color-error);
+        font-size: 1.5rem;
+    }
+    
+    h3 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--color-error);
+        margin: 0;
+    }
+}
+
+.modal-content {
+    padding: 1.5rem;
+    
+    p {
+        margin-bottom: 1rem;
+        color: var(--color-gray-700);
+        line-height: 1.5;
+    }
+    
+    .project-name {
+        background-color: var(--color-gray-100);
+        padding: 0.75rem;
+        border-radius: 4px;
+        font-family: monospace;
+        font-weight: 600;
+        color: var(--color-error);
+        margin-bottom: 1.5rem;
+        word-break: break-all;
+    }
+}
+
+.confirmation-requirements {
+    margin-bottom: 1.5rem;
+    
+    p {
+        font-weight: 500;
+        margin-bottom: 0.5rem;
+        color: var(--color-gray-800);
+    }
+}
+
+.confirmation-input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 2px solid var(--color-gray-300);
+    border-radius: 4px;
+    font-size: 1rem;
+    font-family: monospace;
+    
+    &:focus {
+        outline: none;
+        border-color: var(--color-error);
+    }
+}
+
+.confirmation-error {
+    color: var(--color-error);
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin-top: 0.5rem;
+}
+
+.final-warning {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    background-color: var(--color-error-light);
+    border: 1px solid var(--color-error);
+    border-radius: 4px;
+    color: var(--color-error);
+    font-weight: 500;
+    font-size: 0.875rem;
+}
+
+.modal-actions {
+    display: flex;
+    gap: 1rem;
+    padding: 1.5rem;
+    border-top: 1px solid var(--color-gray-200);
+    justify-content: flex-end;
+}
+
+.confirm-delete-btn {
+    background-color: var(--color-error) !important;
+    border-color: var(--color-error) !important;
+    color: var(--color-white) !important;
+    
+    &:hover:not(:disabled) {
+        background-color: var(--color-error-dark) !important;
+        border-color: var(--color-error-dark) !important;
+    }
+    
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+}
+</style>
\ No newline at end of file

From f10f41c4a09d773e00bcbcea0e8ff44d3e3f2f5c Mon Sep 17 00:00:00 2001
From: Cemonix <gittlermilan@seznam.cz>
Date: Tue, 2 Sep 2025 21:59:43 +0200
Subject: [PATCH 09/10] feat: Revamp MembersSection for improved member
 management and bulk actions

---
 .../project/settings/MembersSection.vue       | 792 ++++++++++++------
 1 file changed, 516 insertions(+), 276 deletions(-)

diff --git a/frontend/src/components/project/settings/MembersSection.vue b/frontend/src/components/project/settings/MembersSection.vue
index bafa0b20..cfbf1212 100644
--- a/frontend/src/components/project/settings/MembersSection.vue
+++ b/frontend/src/components/project/settings/MembersSection.vue
@@ -1,35 +1,64 @@
 <template>
-    <Card class="members-section">
-        <template #header>
-            <h2>Manage Members & Invitations</h2>
-        </template>
-
-        <!-- Invitation Form - Only available to users who can invite members -->
-        <div v-permission="{ permission: PERMISSIONS.PROJECT_MEMBER.INVITE }" class="invite-form-section">
-            <h3>Invite New Member</h3>
-            <Form @submit="handleSendInvite" class="invite-form">
-                <div class="form-group">
-                    <label for="invite-email">Email Address</label>
-                    <input
-                        id="invite-email"
-                        v-model="inviteForm.email"
-                        type="email"
-                        placeholder="Enter email address"
-                        required
-                        :disabled="isInviting"
-                    />
-                    <div v-if="inviteErrors.email" class="field-error">{{ inviteErrors.email }}</div>
-                </div>
+    <div class="members-section">
+        <div class="section-header">
+            <h2>Project Members</h2>
+            <p>View and manage current project team members and their roles.</p>
+        </div>
 
-                <div class="form-group">
-                    <label for="invite-role">Role</label>
-                    <select
-                        id="invite-role"
-                        v-model="inviteForm.role"
-                        required
-                        :disabled="isInviting"
-                    >
-                        <option value="">Select a role</option>
+        <!-- Current Members Section -->
+        <div class="members-list-section">
+            <div class="list-header">
+                <div class="list-title">
+                    <h3>Team Members</h3>
+                    <span class="member-count">{{ filteredMembers.length }} members</span>
+                </div>
+                <div class="member-controls">
+                    <div class="search-filter">
+                        <input
+                            v-model="memberSearch"
+                            type="text"
+                            placeholder="Search members..."
+                            class="search-input"
+                        />
+                        <select v-model="roleFilter" class="role-filter">
+                            <option value="">All Roles</option>
+                            <option 
+                                v-for="role in availableRoles" 
+                                :key="role.value" 
+                                :value="role.value"
+                            >
+                                {{ role.label }}
+                            </option>
+                        </select>
+                    </div>
+                    <div v-if="filteredMembers.length > 1" class="bulk-actions">
+                        <Button
+                            variant="secondary"
+                            size="small"
+                            @click="toggleBulkMode"
+                        >
+                            {{ isBulkMode ? 'Cancel Bulk' : 'Bulk Actions' }}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Bulk Actions Bar -->
+            <div v-if="isBulkMode" class="bulk-action-bar">
+                <div class="bulk-selection">
+                    <label class="select-all">
+                        <input
+                            type="checkbox"
+                            :checked="isAllSelected"
+                            :indeterminate="isSomeSelected"
+                            @change="handleSelectAll"
+                        />
+                        <span>Select All ({{ selectedMembers.size }} selected)</span>
+                    </label>
+                </div>
+                <div v-if="selectedMembers.size > 0" class="bulk-operations">
+                    <select v-model="bulkRole" class="bulk-role-select">
+                        <option value="">Change Role To...</option>
                         <option 
                             v-for="role in availableRoles" 
                             :key="role.value" 
@@ -38,37 +67,50 @@
                             {{ role.label }}
                         </option>
                     </select>
-                    <div class="field-help">{{ getRoleDescription(inviteForm.role) }}</div>
-                    <div v-if="inviteErrors.role" class="field-error">{{ inviteErrors.role }}</div>
-                </div>
-
-                <div class="form-actions">
                     <Button
-                        type="submit"
                         variant="primary"
-                        :disabled="isInviting || !isInviteFormValid"
+                        size="small"
+                        @click="handleBulkRoleUpdate"
+                        :disabled="!bulkRole || isUpdatingRole"
+                    >
+                        Apply Role
+                    </Button>
+                    <Button
+                        variant="secondary"
+                        size="small"
+                        @click="handleBulkRemove"
+                        :disabled="isRemoving"
+                        class="bulk-remove-btn"
                     >
-                        {{ isInviting ? 'Sending...' : 'Send Invitation' }}
+                        Remove Selected
                     </Button>
                 </div>
-            </Form>
-        </div>
-
-        <!-- Current Members Section -->
-        <div class="members-list-section">
-            <h3>Current Members ({{ currentMembers.length }})</h3>
+            </div>
+            
             <div v-if="isLoadingMembers" class="loading-state">
                 Loading members...
             </div>
             <div v-else-if="currentMembers.length === 0" class="empty-state">
                 No members found.
             </div>
+            <div v-else-if="filteredMembers.length === 0" class="empty-state">
+                No members match your search criteria.
+            </div>
             <div v-else class="members-list">
                 <div 
-                    v-for="member in currentMembers" 
+                    v-for="member in filteredMembers" 
                     :key="member.id"
                     class="member-item"
+                    :class="{ 'bulk-mode': isBulkMode }"
                 >
+                    <div v-if="isBulkMode" class="member-checkbox">
+                        <input
+                            type="checkbox"
+                            :checked="selectedMembers.has(member.id)"
+                            @change="handleMemberSelect(member.id, ($event.target as HTMLInputElement).checked)"
+                            :disabled="member.email === currentUserEmail"
+                        />
+                    </div>
                     <div class="member-info">
                         <div class="member-details">
                             <span class="member-name">{{ member.userName || member.email }}</span>
@@ -81,6 +123,12 @@
                             <span class="member-joined">
                                 Joined {{ formatDate(member.joinedAt || member.createdAt) }}
                             </span>
+                            <span v-if="(member as any).lastActivityAt" class="member-activity">
+                                Active {{ formatRelativeTime((member as any).lastActivityAt) }}
+                            </span>
+                            <span v-else class="member-activity inactive">
+                                No recent activity
+                            </span>
                         </div>
                     </div>
                     <div class="member-actions">
@@ -113,67 +161,21 @@
                 </div>
             </div>
         </div>
-
-        <!-- Pending Invitations Section -->
-        <div class="invitations-list-section">
-            <h3>Pending Invitations ({{ pendingInvitations.length }})</h3>
-            <div v-if="isLoadingInvitations" class="loading-state">
-                Loading invitations...
-            </div>
-            <div v-else-if="pendingInvitations.length === 0" class="empty-state">
-                No pending invitations.
-            </div>
-            <div v-else class="invitations-list">
-                <div 
-                    v-for="invitation in pendingInvitations" 
-                    :key="invitation.id"
-                    class="invitation-item"
-                >
-                    <div class="invitation-info">
-                        <div class="invitation-details">
-                            <span class="invitation-email">{{ invitation.email }}</span>
-                            <span class="invitation-role" :class="`role-${invitation.role.toLowerCase()}`">
-                                {{ getRoleLabel(invitation.role) }}
-                            </span>
-                        </div>
-                        <div class="invitation-meta">
-                            <span class="invitation-sent">
-                                Invited {{ formatDate(invitation.invitedAt) }}
-                            </span>
-                        </div>
-                    </div>
-                    <div class="invitation-actions">
-                        <Button
-                            v-permission="{ permission: PERMISSIONS.PROJECT_MEMBER.REMOVE }"
-                            variant="secondary"
-                            size="small"
-                            @click="handleRevokeInvitation(invitation)"
-                            :disabled="isRevoking"
-                            class="revoke-btn"
-                        >
-                            Revoke
-                        </Button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </Card>
+    </div>
 </template>
 
 <script setup lang="ts">
 // TODO: REFACTOR THIS FILE
 
-import {computed, onMounted, reactive, ref} from 'vue';
-import Card from '@/components/common/Card.vue';
+import {computed, onMounted, ref} from 'vue';
 import Button from '@/components/common/Button.vue';
-import Form from '@/components/common/Form.vue';
 import {projectMemberService} from '@/services/project';
 import {useToast} from '@/composables/useToast';
 import {useConfirm} from '@/composables/useConfirm';
 import {useErrorHandler} from '@/composables/useErrorHandler';
 import {useAuthStore} from '@/stores/authStore';
 import {AppLogger} from '@/core/logger/logger';
-import type {InviteMemberRequest, ProjectMember} from '@/services/project/projectMember.types';
+import type {ProjectMember} from '@/services/project/projectMember.types';
 import {ProjectRole} from '@/services/project/project.types';
 import {PERMISSIONS} from '@/services/auth/permissions.types';
 
@@ -185,31 +187,25 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const { showCreateSuccess, showDeleteSuccess } = useToast();
+const { showToast } = useToast();
 const { showConfirm } = useConfirm();
 const { handleError } = useErrorHandler();
 const authStore = useAuthStore();
 
 // State
 const currentMembers = ref<ProjectMember[]>([]);
-const pendingInvitations = ref<ProjectMember[]>([]);
 const isLoadingMembers = ref(false);
-const isLoadingInvitations = ref(false);
-const isInviting = ref(false);
 const isRemoving = ref(false);
-const isRevoking = ref(false);
 const isUpdatingRole = ref(false);
 
-// Form state
-const inviteForm = reactive({
-    email: '',
-    role: '' as ProjectRole | ''
-});
+// Search and filtering state
+const memberSearch = ref('');
+const roleFilter = ref<ProjectRole | ''>('');
 
-const inviteErrors = reactive({
-    email: '',
-    role: ''
-});
+// Bulk operations state
+const isBulkMode = ref(false);
+const selectedMembers = ref(new Set<number>());
+const bulkRole = ref<ProjectRole | ''>('');
 
 // Available roles for selection
 const availableRoles = [
@@ -222,11 +218,34 @@ const availableRoles = [
 // Computed
 const currentUserEmail = computed(() => authStore.user?.email);
 
-const isInviteFormValid = computed(() => {
-    return inviteForm.email.trim() && 
-        inviteForm.role && 
-        !inviteErrors.email && 
-        !inviteErrors.role;
+const filteredMembers = computed(() => {
+    let filtered = currentMembers.value;
+    
+    // Filter by search term
+    if (memberSearch.value.trim()) {
+        const searchLower = memberSearch.value.toLowerCase();
+        filtered = filtered.filter(member => 
+            (member.userName?.toLowerCase().includes(searchLower)) ||
+            (member.email?.toLowerCase().includes(searchLower))
+        );
+    }
+    
+    // Filter by role
+    if (roleFilter.value) {
+        filtered = filtered.filter(member => member.role === roleFilter.value);
+    }
+    
+    return filtered;
+});
+
+const isAllSelected = computed(() => {
+    const selectableMembers = filteredMembers.value.filter(m => m.email !== currentUserEmail.value);
+    return selectableMembers.length > 0 && selectableMembers.every(m => selectedMembers.value.has(m.id));
+});
+
+const isSomeSelected = computed(() => {
+    const selectableMembers = filteredMembers.value.filter(m => m.email !== currentUserEmail.value);
+    return selectableMembers.some(m => selectedMembers.value.has(m.id)) && !isAllSelected.value;
 });
 
 // Methods
@@ -235,90 +254,17 @@ const loadMembers = async () => {
     try {
         const members = await projectMemberService.getProjectMembers(props.projectId);
         
-        // Separate current members from pending invitations
+        // Only show current members (those who have joined)
         currentMembers.value = members.filter(m => m.joinedAt);
-        pendingInvitations.value = members.filter(m => !m.joinedAt);
         
-        logger.info(`Loaded ${currentMembers.value.length} members and ${pendingInvitations.value.length} pending invitations`);
+        logger.info(`Loaded ${currentMembers.value.length} members`);
     } catch (error) {
         handleError(error, 'Failed to load project members');
     } finally {
         isLoadingMembers.value = false;
-        isLoadingInvitations.value = false;
     }
 };
 
-const validateInviteForm = (): boolean => {
-    inviteErrors.email = '';
-    inviteErrors.role = '';
-    
-    if (!inviteForm.email.trim()) {
-        inviteErrors.email = 'Email address is required';
-        return false;
-    }
-    
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(inviteForm.email.trim())) {
-        inviteErrors.email = 'Please enter a valid email address';
-        return false;
-    }
-    
-    if (!inviteForm.role) {
-        inviteErrors.role = 'Please select a role';
-        return false;
-    }
-    
-    // Check if user is already invited or a member
-    const email = inviteForm.email.trim().toLowerCase();
-    const isAlreadyMember = currentMembers.value.some(m => 
-        m.email?.toLowerCase() === email
-    );
-    const isAlreadyInvited = pendingInvitations.value.some(m => 
-        m.email?.toLowerCase() === email
-    );
-    
-    if (isAlreadyMember) {
-        inviteErrors.email = 'This user is already a member of the project';
-        return false;
-    }
-    
-    if (isAlreadyInvited) {
-        inviteErrors.email = 'This user has already been invited';
-        return false;
-    }
-    
-    return true;
-};
-
-const handleSendInvite = async () => {
-    if (!validateInviteForm()) {
-        return;
-    }
-    
-    isInviting.value = true;
-    try {
-        const inviteData: InviteMemberRequest = {
-            email: inviteForm.email.trim(),
-            role: inviteForm.role as ProjectRole
-        };
-        
-        await projectMemberService.inviteMember(props.projectId, inviteData);
-        // TODO: Update the pendingInvitations state with the new invitation (Backend is not returning the full member object)
-        // For example:
-        // pendingInvitations.value.push(newInvitation);
-        
-        // Reset form
-        inviteForm.email = '';
-        inviteForm.role = '';
-        
-        logger.info(`Sent invitation to ${inviteData.email} with role ${inviteData.role}`);
-        showCreateSuccess('Invitation', `Invitation sent to ${inviteData.email}`);
-    } catch (error) {
-        handleError(error, 'Members Section');
-    } finally {
-        isInviting.value = false;
-    }
-};
 
 const handleUpdateRole = async (member: ProjectMember) => {
     const confirmed = await showConfirm(
@@ -336,7 +282,7 @@ const handleUpdateRole = async (member: ProjectMember) => {
     try {
         await projectMemberService.updateMemberRole(props.projectId, member.email, member.role);
         logger.info(`Updated role for ${member.email} to ${member.role}`);
-        showCreateSuccess('Role Updated', `${member.userName || member.email}'s role has been updated`);
+        showToast('Success', `${member.userName || member.email}'s role has been updated`, 'success');
     } catch (error) {
         handleError(error, 'Failed to update member role');
         // Reload to revert changes
@@ -360,7 +306,7 @@ const handleRemoveMember = async (member: ProjectMember) => {
         currentMembers.value = currentMembers.value.filter(m => m.id !== member.id);
         
         logger.info(`Removed member ${member.email} from project ${props.projectId}`);
-        showDeleteSuccess('Member', member.userName || member.email || 'User');
+        showToast('Success', `${member.userName || member.email || 'User'} removed from project`, 'success');
     } catch (error) {
         handleError(error, 'Failed to remove member');
     } finally {
@@ -368,45 +314,12 @@ const handleRemoveMember = async (member: ProjectMember) => {
     }
 };
 
-const handleRevokeInvitation = async (invitation: ProjectMember) => {
-    const confirmed = await showConfirm(
-        'Revoke Invitation', 
-        `Are you sure you want to revoke the invitation for ${invitation.email}?`
-    );
-    
-    if (!confirmed) return;
-    
-    isRevoking.value = true;
-    try {
-        await projectMemberService.removeMember(props.projectId, invitation.email);
-        pendingInvitations.value = pendingInvitations.value.filter(i => i.id !== invitation.id);
-        
-        logger.info(`Revoked invitation for ${invitation.email}`);
-        showDeleteSuccess('Invitation', invitation.email || 'Invitation');
-    } catch (error) {
-        handleError(error, 'Failed to revoke invitation');
-    } finally {
-        isRevoking.value = false;
-    }
-};
 
 const getRoleLabel = (role: ProjectRole): string => {
     const roleObj = availableRoles.find(r => r.value === role);
     return roleObj ? roleObj.label : role;
 };
 
-const getRoleDescription = (role: ProjectRole | ''): string => {
-    if (!role) return '';
-    
-    const descriptions = {
-        [ProjectRole.MANAGER]: 'Full access to project settings and data',
-        [ProjectRole.ANNOTATOR]: 'Can create and edit annotations',
-        [ProjectRole.REVIEWER]: 'Can review and approve annotations',
-        [ProjectRole.VIEWER]: 'Read-only access to project data'
-    };
-    
-    return descriptions[role] || '';
-};
 
 const formatDate = (dateString: string): string => {
     const date = new Date(dateString);
@@ -417,6 +330,137 @@ const formatDate = (dateString: string): string => {
     });
 };
 
+const formatRelativeTime = (dateString: string): string => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+    
+    if (diffInSeconds < 60) return 'just now';
+    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
+    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
+    if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 86400)}d ago`;
+    
+    return formatDate(dateString);
+};
+
+const toggleBulkMode = () => {
+    isBulkMode.value = !isBulkMode.value;
+    if (!isBulkMode.value) {
+        selectedMembers.value.clear();
+        bulkRole.value = '';
+    }
+};
+
+const handleMemberSelect = (memberId: number, checked: boolean) => {
+    if (checked) {
+        selectedMembers.value.add(memberId);
+    } else {
+        selectedMembers.value.delete(memberId);
+    }
+};
+
+const handleSelectAll = () => {
+    const selectableMembers = filteredMembers.value.filter(m => m.email !== currentUserEmail.value);
+    
+    if (isAllSelected.value) {
+        // Deselect all
+        selectableMembers.forEach(member => selectedMembers.value.delete(member.id));
+    } else {
+        // Select all
+        selectableMembers.forEach(member => selectedMembers.value.add(member.id));
+    }
+};
+
+const handleBulkRoleUpdate = async () => {
+    if (!bulkRole.value || selectedMembers.value.size === 0) return;
+    
+    const memberCount = selectedMembers.value.size;
+    const confirmed = await showConfirm(
+        'Update Roles', 
+        `Are you sure you want to change the role of ${memberCount} member${memberCount > 1 ? 's' : ''} to ${getRoleLabel(bulkRole.value)}?`
+    );
+    
+    if (!confirmed) return;
+    
+    isUpdatingRole.value = true;
+    let successCount = 0;
+    let failureCount = 0;
+    
+    try {
+        for (const memberId of selectedMembers.value) {
+            const member = currentMembers.value.find(m => m.id === memberId);
+            if (member) {
+                try {
+                    await projectMemberService.updateMemberRole(props.projectId, member.email, bulkRole.value as ProjectRole);
+                    member.role = bulkRole.value as ProjectRole;
+                    successCount++;
+                } catch (error) {
+                    logger.error(`Failed to update role for ${member.email}:`, error);
+                    failureCount++;
+                }
+            }
+        }
+        
+        if (successCount > 0) {
+            showToast('Success', `Successfully updated ${successCount} member role${successCount > 1 ? 's' : ''}`, 'success');
+        }
+        
+        if (failureCount > 0) {
+            handleError(new Error(`Failed to update ${failureCount} member${failureCount > 1 ? 's' : ''}`), 'Bulk Role Update');
+        }
+    } finally {
+        isUpdatingRole.value = false;
+        selectedMembers.value.clear();
+        bulkRole.value = '';
+    }
+};
+
+const handleBulkRemove = async () => {
+    if (selectedMembers.value.size === 0) return;
+    
+    const memberCount = selectedMembers.value.size;
+    const confirmed = await showConfirm(
+        'Remove Members', 
+        `Are you sure you want to remove ${memberCount} member${memberCount > 1 ? 's' : ''} from this project? This action cannot be undone.`
+    );
+    
+    if (!confirmed) return;
+    
+    isRemoving.value = true;
+    let successCount = 0;
+    let failureCount = 0;
+    
+    try {
+        for (const memberId of selectedMembers.value) {
+            const member = currentMembers.value.find(m => m.id === memberId);
+            if (member) {
+                try {
+                    await projectMemberService.removeMember(props.projectId, member.email);
+                    successCount++;
+                } catch (error) {
+                    logger.error(`Failed to remove ${member.email}:`, error);
+                    failureCount++;
+                }
+            }
+        }
+        
+        // Reload members to reflect changes
+        await loadMembers();
+        
+        if (successCount > 0) {
+            showToast('Success', `Successfully removed ${successCount} member${successCount > 1 ? 's' : ''}`, 'success');
+        }
+        
+        if (failureCount > 0) {
+            handleError(new Error(`Failed to remove ${failureCount} member${failureCount > 1 ? 's' : ''}`), 'Bulk Remove');
+        }
+    } finally {
+        isRemoving.value = false;
+        selectedMembers.value.clear();
+        toggleBulkMode();
+    }
+};
+
 // Lifecycle
 onMounted(() => {
     loadMembers();
@@ -425,22 +469,218 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .members-section {
-    max-width: 900px;
+    padding: 2rem;
+    max-width: 1000px;
+    margin: 0 auto;
 }
 
-.invite-form-section,
-.members-list-section,
-.invitations-list-section {
+.section-header {
     margin-bottom: 2rem;
     
-    &:last-child {
-        margin-bottom: 0;
+    h2 {
+        font-size: 1.75rem;
+        font-weight: 600;
+        color: var(--color-gray-900);
+        margin-bottom: 0.5rem;
+    }
+    
+    p {
+        color: var(--color-gray-600);
+        line-height: 1.5;
+        font-size: 1.1rem;
+    }
+}
+
+.members-list-section {
+    background-color: var(--color-white);
+    border-radius: 8px;
+    border: 1px solid var(--color-gray-200);
+    overflow: hidden;
+}
+
+.list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem;
+    background-color: var(--color-gray-50);
+    border-bottom: 1px solid var(--color-gray-200);
+    
+    @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
     }
+}
+
+.list-title {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
     
     h3 {
         font-size: 1.25rem;
-        margin-bottom: 1rem;
+        font-weight: 600;
         color: var(--color-gray-800);
+        margin: 0;
+    }
+    
+    .member-count {
+        background-color: var(--color-primary);
+        color: white;
+        padding: 0.25rem 0.75rem;
+        border-radius: 12px;
+        font-size: 0.875rem;
+        font-weight: 500;
+    }
+}
+
+.member-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    
+    @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+    }
+    
+    .search-filter {
+        display: flex;
+        gap: 0.75rem;
+        align-items: center;
+        
+        @media (max-width: 768px) {
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+    }
+}
+
+.search-input,
+.role-filter {
+    padding: 0.5rem;
+    border: 1px solid var(--color-gray-400);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    background-color: var(--color-white);
+    
+    &:focus {
+        outline: none;
+        border-color: var(--color-primary);
+    }
+}
+
+.search-input {
+    min-width: 200px;
+    
+    @media (max-width: 768px) {
+        min-width: 100%;
+    }
+}
+
+.role-filter {
+    min-width: 120px;
+    
+    @media (max-width: 768px) {
+        min-width: 100%;
+    }
+}
+
+.bulk-actions {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    
+    button {
+        font-size: 0.875rem;
+        padding: 0.5rem 1rem;
+        border-radius: 6px;
+        transition: all 0.2s ease;
+        
+        &:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+    }
+    
+    @media (max-width: 768px) {
+        margin-left: 0;
+        justify-content: flex-end;
+    }
+}
+
+.bulk-action-bar {
+    background-color: var(--color-primary-light);
+    border: 1px solid var(--color-primary);
+    border-radius: 4px;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    
+    @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}
+
+.bulk-selection {
+    .select-all {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        cursor: pointer;
+        font-weight: 500;
+        
+        input[type="checkbox"] {
+            margin: 0;
+        }
+    }
+}
+
+.bulk-operations {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    
+    @media (max-width: 768px) {
+        justify-content: flex-end;
+    }
+}
+
+.bulk-role-select {
+    min-width: 150px;
+    padding: 0.5rem;
+    border: 1px solid var(--color-gray-400);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    background-color: var(--color-white);
+}
+
+.bulk-remove-btn {
+    background-color: var(--color-error);
+    border-color: var(--color-error);
+    color: var(--color-white);
+    
+    &:hover:not(:disabled) {
+        background-color: var(--color-error-dark);
+        border-color: var(--color-error-dark);
+    }
+}
+
+.member-item.bulk-mode {
+    .member-checkbox {
+        display: flex;
+        align-items: center;
+        margin-right: 1rem;
+        
+        input[type="checkbox"] {
+            margin: 0;
+        }
     }
 }
 
@@ -474,56 +714,51 @@ onMounted(() => {
 
 .loading-state,
 .empty-state {
-    padding: 1.5rem;
+    padding: 3rem 1.5rem;
     text-align: center;
     color: var(--color-gray-600);
     font-style: italic;
-    background-color: var(--color-gray-50);
-    border-radius: 4px;
 }
 
-.members-list,
-.invitations-list {
+.members-list {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
 }
 
-.member-item,
-.invitation-item {
+.member-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem;
     background-color: var(--color-white);
-    border: 1px solid var(--color-gray-400);
-    border-radius: 4px;
-    transition: box-shadow 0.2s ease-in-out;
+    border-bottom: 1px solid var(--color-gray-200);
+    transition: background-color 0.2s ease;
     
     &:hover {
-        box-shadow: 0 1px 3px rgba(var(--color-black), 0.05);
+        background-color: var(--color-gray-25);
+    }
+    
+    &:last-child {
+        border-bottom: none;
     }
 }
 
-.member-info,
-.invitation-info {
+.member-info {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }
 
-.member-details,
-.invitation-details {
+.member-details {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
 }
 
-.member-name,
-.invitation-email {
+.member-name {
     font-weight: 500;
-    color: var(--color-gray-800);
+    color: var(--color-gray-900);
     font-size: 1rem;
 }
 
@@ -532,53 +767,61 @@ onMounted(() => {
     color: var(--color-gray-600);
 }
 
-.member-meta,
-.invitation-meta {
+.member-meta {
     display: flex;
     gap: 1rem;
     align-items: center;
+    flex-wrap: wrap;
 }
 
-.member-role,
-.invitation-role {
-    padding: 0.25rem 0.5rem;
-    border-radius: 2px;
-    font-size: 0.875rem;
-    font-weight: 500;
+.member-role {
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     
     &.role-manager {
-        background-color: var(--color-error);
-        color: var(--color-error);
+        background-color: var(--color-red-100);
+        color: var(--color-red-800);
     }
     
     &.role-annotator {
-        background-color: var(--color-primary);
-        color: var(--color-primary);
+        background-color: var(--color-blue-100);
+        color: var(--color-blue-800);
     }
     
     &.role-reviewer {
-        background-color: var(--color-warning);
-        color: var(--color-warning);
+        background-color: var(--color-yellow-100);
+        color: var(--color-yellow-800);
     }
     
     &.role-viewer {
-        background-color: var(--color-secondary);
-        color: var(--color-secondary);
+        background-color: var(--color-gray-100);
+        color: var(--color-gray-800);
     }
 }
 
-.member-joined,
-.invitation-sent {
+.member-joined {
     font-size: 0.875rem;
     color: var(--color-gray-600);
 }
 
-.member-actions,
-.invitation-actions {
+.member-activity {
+    font-size: 0.875rem;
+    color: var(--color-success);
+    font-weight: 500;
+    
+    &.inactive {
+        color: var(--color-gray-500);
+        font-weight: normal;
+    }
+}
+
+.member-actions {
     display: flex;
-    gap: 0.5rem;
+    gap: 0.75rem;
     align-items: center;
 }
 
@@ -603,8 +846,7 @@ onMounted(() => {
     }
 }
 
-.remove-btn,
-.revoke-btn {
+.remove-btn {
     background-color: var(--color-error);
     border-color: var(--color-error);
     color: var(--color-white);
@@ -622,15 +864,13 @@ onMounted(() => {
 
 // Responsive adjustments
 @media (max-width: 768px) {
-    .member-item,
-    .invitation-item {
+    .member-item {
         flex-direction: column;
         align-items: stretch;
         gap: 1rem;
     }
     
-    .member-actions,
-    .invitation-actions {
+    .member-actions {
         justify-content: flex-end;
     }
 }

From 011c1e760b296c267425d21a33862b2ebad36cf4 Mon Sep 17 00:00:00 2001
From: Cemonix <gittlermilan@seznam.cz>
Date: Tue, 2 Sep 2025 21:59:48 +0200
Subject: [PATCH 10/10] feat: Enhance ProjectSettingsView with access control
 and improved navigation for settings sections

---
 .../src/views/project/ProjectSettingsView.vue | 178 ++++++++++++++++--
 1 file changed, 165 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/project/ProjectSettingsView.vue b/frontend/src/views/project/ProjectSettingsView.vue
index a6c069b6..a1d06f97 100644
--- a/frontend/src/views/project/ProjectSettingsView.vue
+++ b/frontend/src/views/project/ProjectSettingsView.vue
@@ -2,75 +2,227 @@
     <div class="project-settings-page">
         <!-- Permission check for project settings (Manager only) -->
         <div v-if="!canAccessProjectSettings" class="access-denied">
+            <font-awesome-icon :icon="faLock" class="access-denied-icon" />
             <h2>Access Denied</h2>
             <p>You don't have permission to access project settings. This section is only available to project managers.</p>
         </div>
         
-        <div v-else>
+        <div v-else class="settings-container">
             <div class="page-header">
                 <h1>Project Settings</h1>
                 <p>Manage project configuration, members, and permissions.</p>
             </div>
             
-            <div class="settings-sections">
-                <MembersSection :project-id="Number(route.params.projectId)" />
+            <!-- Settings Navigation -->
+            <div class="settings-nav">
+                <button 
+                    v-for="section in settingSections" 
+                    :key="section.id"
+                    @click="activeSection = section.id"
+                    :class="['nav-btn', { 'active': activeSection === section.id }]"
+                >
+                    <font-awesome-icon :icon="section.icon" />
+                    {{ section.name }}
+                </button>
+            </div>
+            
+            <!-- Settings Content -->
+            <div class="settings-content">
+                <!-- Project Information Section -->
+                <ProjectInfoSection 
+                    v-if="activeSection === 'info'"
+                    :project-id="projectId"
+                />
+                
+                <!-- Invitations Section -->
+                <InvitationsSection 
+                    v-if="activeSection === 'invitations'"
+                    :project-id="projectId"
+                />
+                
+                <!-- Members Section -->
+                <MembersSection 
+                    v-if="activeSection === 'members'"
+                    :project-id="projectId"
+                />
+                
+                <!-- Danger Zone Section -->
+                <DangerZoneSection 
+                    v-if="activeSection === 'danger'"
+                    :project-id="projectId"
+                />
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue';
+import {computed, ref} from 'vue';
 import {useRoute} from 'vue-router';
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+import {
+    faLock,
+    faInfoCircle,
+    faEnvelope,
+    faUsers,
+    faExclamationTriangle
+} from '@fortawesome/free-solid-svg-icons';
+import ProjectInfoSection from '@/components/project/settings/ProjectInfoSection.vue';
+import InvitationsSection from '@/components/project/settings/InvitationsSection.vue';
 import MembersSection from '@/components/project/settings/MembersSection.vue';
+import DangerZoneSection from '@/components/project/settings/DangerZoneSection.vue';
 import {usePermissions} from '@/composables/usePermissions';
 import {PERMISSIONS} from '@/services/auth/permissions.types';
 
 const route = useRoute();
 const { hasProjectPermission } = usePermissions();
 
+// State
+const activeSection = ref('info');
+const projectId = computed(() => Number(route.params.projectId));
+
 // Permission checks
 const canAccessProjectSettings = computed(() => 
     hasProjectPermission(PERMISSIONS.PROJECT_SETTINGS.READ)
 );
+
+// Settings sections
+const settingSections = [
+    {
+        id: 'info',
+        name: 'Project Info',
+        icon: faInfoCircle
+    },
+    {
+        id: 'invitations', 
+        name: 'Invitations',
+        icon: faEnvelope
+    },
+    {
+        id: 'members',
+        name: 'Members',
+        icon: faUsers
+    },
+    {
+        id: 'danger',
+        name: 'Danger Zone',
+        icon: faExclamationTriangle
+    }
+];
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.project-settings-page {
+    min-height: 100vh;
+    padding: 2rem;
+    background-color: var(--color-gray-50);
+}
+
+.settings-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
 .page-header {
     margin-bottom: 2rem;
     
     h1 {
-        font-size: 1.5rem;
-        margin-bottom: 0.25rem;
+        font-size: 2rem;
+        font-weight: 700;
+        color: var(--color-gray-900);
+        margin-bottom: 0.5rem;
     }
     
     p {
         color: var(--color-gray-600);
-        margin-bottom: 1rem;
+        font-size: 1.1rem;
+        line-height: 1.6;
         max-width: 80ch;
     }
 }
 
-.settings-sections {
+.settings-nav {
     display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    background-color: var(--color-white);
+    padding: 1rem;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    
+    @media (max-width: 768px) {
+        flex-wrap: wrap;
+    }
+}
+
+.nav-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background: none;
+    border: none;
+    border-radius: 6px;
+    color: var(--color-gray-600);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+        background-color: var(--color-gray-100);
+        color: var(--color-gray-800);
+    }
+    
+    &.active {
+        background-color: var(--color-primary);
+        color: white;
+        
+        &:hover {
+            background-color: var(--color-primary-dark);
+        }
+    }
+    
+    @media (max-width: 768px) {
+        flex: 1;
+        justify-content: center;
+        min-width: 120px;
+    }
+}
+
+.settings-content {
+    background-color: var(--color-white);
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
 }
 
 .access-denied {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 60vh;
     text-align: center;
-    padding: 3rem 2rem;
     color: var(--color-gray-600);
     
+    .access-denied-icon {
+        font-size: 4rem;
+        color: var(--color-gray-400);
+        margin-bottom: 2rem;
+    }
+    
     h2 {
         color: var(--color-error);
+        font-size: 1.5rem;
         margin-bottom: 1rem;
+        font-weight: 600;
     }
     
     p {
         max-width: 60ch;
         margin: 0 auto;
-        line-height: 1.5;
+        line-height: 1.6;
+        font-size: 1.1rem;
     }
 }
 </style>