Feat/fe/workflow progress

frontend/src/components/project/workflow/WorkflowCard.vue

@@ -19,6 +19,28 @@
             </div>
         </div>
 
+        <div v-if="stageProgress && stageProgress.length > 0" class="stage-progress-section">
+            <h4 class="progress-title">Task Progress</h4>
+            <div class="stage-progress-list">
+                <div 
+                    v-for="stage in stageProgress" 
+                    :key="stage.workflowStageId"
+                    class="stage-progress-item"
+                >
+                    <div class="stage-info">
+                        <span class="stage-name">{{ stage.stageName }}</span>
+                        <span class="stage-count">{{ stage.completedTasks }}/{{ stage.totalTasks }}</span>
+                    </div>
+                    <div class="progress-bar">
+                        <div 
+                            class="progress-fill" 
+                            :style="{ width: getProgressPercentage(stage) + '%' }"
+                        ></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="workflow-actions">
             <!-- Role-based primary action button -->
             <router-link 
@@ -62,6 +84,7 @@ import { computed } from 'vue';
 import { type Workflow } from '@/services/project/workflow/workflow.types';
 import { type WorkflowStage } from '@/services/project/workflow/workflowStage.types';
 import { type ProjectRole } from '@/services/project/project.types';
+import { type WorkflowStageProgressDto } from '@/services/project/dashboard/dashboard.types';
 import { WorkflowNavigationHelper } from '@/core/workflow';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { faDiagramProject } from '@fortawesome/free-solid-svg-icons';
@@ -72,6 +95,7 @@ interface Props {
     stages?: WorkflowStage[];
     userRole?: ProjectRole;
     userEmail?: string;
+    stageProgress?: WorkflowStageProgressDto[];
 }
 
 const props = defineProps<Props>();
@@ -102,6 +126,11 @@ const formatDate = (dateString: string): string => {
         day: 'numeric'
     });
 };
+
+const getProgressPercentage = (stage: WorkflowStageProgressDto): number => {
+    if (stage.totalTasks === 0) return 0;
+    return Math.round((stage.completedTasks / stage.totalTasks) * 100);
+};
 </script>
 
 <style scoped>
@@ -222,6 +251,76 @@ const formatDate = (dateString: string): string => {
     }
 }
 
+.stage-progress-section {
+    margin: 1.5rem 0;
+
+    .progress-title {
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: var(--color-gray-700);
+        margin-bottom: 0.75rem;
+    }
+}
+
+.stage-progress-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.stage-progress-item {
+    .stage-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.25rem;
+
+        .stage-name {
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--color-gray-700);
+        }
+
+        .stage-count {
+            font-size: 0.8125rem;
+            font-weight: 600;
+            color: var(--color-gray-600);
+        }
+    }
+
+    .progress-bar {
+        height: 6px;
+        background-color: var(--color-gray-200);
+        border-radius: 3px;
+        overflow: hidden;
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
+            border-radius: 3px;
+            transition: width 0.3s ease;
+            position: relative;
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                width: 2px;
+                background: rgba(255, 255, 255, 0.3);
+                animation: shimmer 2s infinite;
+            }
+        }
+    }
+}
+
+@keyframes shimmer {
+    0% { opacity: 0; }
+    50% { opacity: 1; }
+    100% { opacity: 0; }
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .workflow-actions {
@@ -235,5 +334,23 @@ const formatDate = (dateString: string): string => {
             align-self: flex-start;
         }
     }
+
+    .stage-progress-section {
+        margin: 1rem 0;
+
+        .progress-title {
+            font-size: 0.85rem;
+        }
+    }
+
+    .stage-progress-item .stage-info {
+        .stage-name {
+            font-size: 0.8125rem;
+        }
+
+        .stage-count {
+            font-size: 0.75rem;
+        }
+    }
 }
 </style>

frontend/src/services/project/dashboard/dashboardService.ts

@@ -102,6 +102,7 @@ class DashboardService extends BaseProjectService {
         });
         return response;
     }
+
 }
 
 export const dashboardService = new DashboardService();

frontend/src/services/project/workflow/workflowStageService.ts

@@ -5,6 +5,7 @@ import type {
     CreateWorkflowStageRequest,
     UpdateWorkflowStageRequest,
 } from "./workflowStage.types";
+import type { WorkflowStageProgressDto } from '../dashboard/dashboard.types';
 import type { QueryParams } from '@/services/base/requests';
 import { workflowService } from './workflowService';
 import type { WorkflowWithStages } from './workflow.types';
@@ -205,6 +206,20 @@ class WorkflowStageService extends BaseProjectService {
         this.logger.info(`Successfully reordered ${response.length} stages in workflow ${workflowId}`);
         return response;
     }
+
+    /**
+     * Get task progress for all stages in a workflow
+     */
+    async getWorkflowStageProgress(projectId: number, workflowId: number): Promise<WorkflowStageProgressDto[]> {
+        this.logger.info(`Fetching task progress for stages in workflow ${workflowId}, project ${projectId}`);
+
+        const response = await this.get<WorkflowStageProgressDto[]>(
+            this.buildProjectUrl(projectId, `dashboard/analytics/workflow-stage-progress?workflowId=${workflowId}`)
+        );
+
+        this.logger.info(`Fetched task progress for ${response.length} stages in workflow ${workflowId}`);
+        return response;
+    }
 }
 
 export const workflowStageService = new WorkflowStageService();

frontend/src/views/project/WorkflowsView.vue

@@ -17,6 +17,7 @@
                     :stages="workflowStages.get(workflow.id) || []"
                     :user-role="userRole || undefined"
                     :user-email="userEmail || undefined"
+                    :stage-progress="workflowStageProgress.get(workflow.id) || []"
                 />
                 <p v-if="!workflows || workflows.length === 0" class="no-content-message">
                     No workflows have been created for this project yet.
@@ -51,6 +52,7 @@ import FloatingActionButton from '@/components/common/FloatingActionButton.vue';
 import {type CreateWorkflowWithStagesRequest, type Workflow} from '@/services/project/workflow/workflow.types';
 import {type WorkflowStage} from '@/services/project/workflow/workflowStage.types';
 import {type ProjectRole} from '@/services/project/project.types';
+import {type WorkflowStageProgressDto} from '@/services/project/dashboard/dashboard.types';
 import {workflowService} from '@/services/project/workflow/workflowService';
 import {workflowStageService} from '@/services/project/workflow/workflowStageService';
 import {projectMemberService} from '@/services/project';
@@ -68,6 +70,7 @@ const { handleError } = useErrorHandler();
 
 const workflows = ref<Workflow[]>([]);
 const workflowStages = ref<Map<number, WorkflowStage[]>>(new Map());
+const workflowStageProgress = ref<Map<number, WorkflowStageProgressDto[]>>(new Map());
 const userRole = ref<ProjectRole | null>(null);
 const userEmail = ref<string | null>(null);
 const isModalOpen = ref(false);
@@ -103,6 +106,17 @@ const loadWorkflowStages = async (projectId: number, workflowId: number) => {
     }
 };
 
+const loadWorkflowStageProgress = async (projectId: number, workflowId: number) => {
+    try {
+        const progress = await workflowStageService.getWorkflowStageProgress(projectId, workflowId);
+        workflowStageProgress.value.set(workflowId, progress);
+        logger.info(`Loaded stage progress for workflow ${workflowId}: ${progress.length} stages`);
+    } catch (error) {
+        logger.error(`Failed to load stage progress for workflow ${workflowId}`, error);
+        workflowStageProgress.value.set(workflowId, []); // Set empty array as fallback
+    }
+};
+
 const loadWorkflows = async () => {
     const projectId = Number(route.params.projectId);
     if (!projectId || isNaN(projectId)) {
@@ -122,11 +136,14 @@ const loadWorkflows = async () => {
         workflows.value = workflowResponse.data;
         logger.info(`Loaded ${workflowResponse.data.length} workflows for project ${projectId}`);
 
-        // Load stages for each workflow
+        // Load stages and progress for each workflow
         const stagePromises = workflowResponse.data.map(workflow => 
             loadWorkflowStages(projectId, workflow.id)
         );
-        await Promise.all(stagePromises);
+        const progressPromises = workflowResponse.data.map(workflow =>
+            loadWorkflowStageProgress(projectId, workflow.id)
+        );
+        await Promise.all([...stagePromises, ...progressPromises]);
 
     } catch (error) {
         handleError(error, 'Failed to load workflows');
@@ -159,8 +176,11 @@ const handleCreateWorkflow = async (formData: CreateWorkflowWithStagesRequest) =
         workflows.value.push(newWorkflow);
         logger.info(`Created workflow with stages: ${newWorkflow.name} (ID: ${newWorkflow.id})`);
 
-        // Load stages for the newly created workflow
-        await loadWorkflowStages(projectId, newWorkflow.id);
+        // Load stages and progress for the newly created workflow
+        await Promise.all([
+            loadWorkflowStages(projectId, newWorkflow.id),
+            loadWorkflowStageProgress(projectId, newWorkflow.id)
+        ]);
 
         closeModal();
         showCreateSuccess("Workflow", newWorkflow.name);

server/Server/Controllers/PermissionsController.cs

@@ -1,8 +1,6 @@
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Identity;
-using server.Models.Domain;
-using server.Models.Domain.Enums;
 using server.Models.DTOs.Authz;
 using server.Services.Interfaces;