Merge pull request #3285 from bluewave-labs/hp-feb-9-add-approval-workflows-for-evidence

Add approval workflow for evidence uploads

Author: gorkem-bwl

Clients/src/application/events/fileEvents.ts

@@ -0,0 +1,29 @@
+/**
+ * Custom events for file-related actions.
+ * Used to communicate between components that don't have direct parent-child relationship.
+ */
+
+export const FILE_EVENTS = {
+  APPROVAL_STATUS_CHANGED: 'file:approvalStatusChanged',
+} as const;
+
+/**
+ * Dispatch a file approval status changed event.
+ * This can be listened to by components that need to refresh file data.
+ */
+export function dispatchFileApprovalChanged(detail?: { fileId?: number; status?: string }) {
+  window.dispatchEvent(new CustomEvent(FILE_EVENTS.APPROVAL_STATUS_CHANGED, { detail }));
+}
+
+/**
+ * Subscribe to file approval status changed events.
+ * Returns a cleanup function to remove the listener.
+ */
+export function onFileApprovalChanged(callback: (detail?: { fileId?: number; status?: string }) => void): () => void {
+  const handler = (event: Event) => {
+    const customEvent = event as CustomEvent<{ fileId?: number; status?: string }>;
+    callback(customEvent.detail);
+  };
+  window.addEventListener(FILE_EVENTS.APPROVAL_STATUS_CHANGED, handler);
+  return () => window.removeEventListener(FILE_EVENTS.APPROVAL_STATUS_CHANGED, handler);
+}

Clients/src/application/hooks/useFileColumnVisibility.ts

@@ -14,7 +14,6 @@ import { useState, useCallback, useEffect, useMemo } from "react";
  */
 export type FileColumn =
   | "file"
-  | "project_name"
   | "upload_date"
   | "uploader"
   | "source"
@@ -39,7 +38,6 @@ export interface ColumnConfig {
  */
 export const DEFAULT_COLUMNS: ColumnConfig[] = [
   { key: "file", label: "File", defaultVisible: true, alwaysVisible: true },
-  { key: "project_name", label: "Project name", defaultVisible: true },
   { key: "upload_date", label: "Upload date", defaultVisible: true },
   { key: "uploader", label: "Uploader", defaultVisible: true },
   { key: "source", label: "Source", defaultVisible: true },
@@ -48,7 +46,7 @@ export const DEFAULT_COLUMNS: ColumnConfig[] = [
   { key: "action", label: "Action", defaultVisible: true, alwaysVisible: true },
 ];
 
-const SCHEMA_VERSION = 2;
+const SCHEMA_VERSION = 3;
 const STORAGE_KEY = "verifywise:file-column-visibility";
 const VERSION_KEY = "verifywise:file-column-visibility-version";
 

Clients/src/application/hooks/useFolderFiles.ts

@@ -79,30 +79,24 @@ export function useFolderFiles(
     try {
       setLoading(true);
       setError(null);
-      // Clear files immediately to prevent flash of old content
-      setFiles([]);
 
       let filesData: IFileWithFolders[];
 
       if (folder === "all") {
-        // Fetch all files from file manager
         const rawFiles = await getUserFilesMetaData();
         const transformedFiles = transformFilesData(rawFiles);
         filesData = transformToFileWithFolders(transformedFiles);
         setAllFiles(filesData);
       } else if (folder === "uncategorized") {
-        // Fetch files not in any folder
         filesData = await getUncategorizedFiles();
       } else {
-        // Fetch files in specific folder
         filesData = await getFilesInFolder(folder);
       }
 
       setFiles(filesData);
     } catch (err) {
       console.error("Error fetching files:", err);
       setError("Failed to load files");
-      setFiles([]);
     } finally {
       setLoading(false);
     }
@@ -198,10 +192,7 @@ export function useFolderFiles(
   }, []);
 
   // Load files when selected folder changes
-  // Set loading immediately when folder changes to prevent flash
   useEffect(() => {
-    setLoading(true);
-    setFiles([]);
     refreshFiles(selectedFolder);
   }, [selectedFolder]); // Don't include refreshFiles to avoid double-calls
 

Clients/src/application/hooks/useIsAdmin.ts

@@ -0,0 +1,47 @@
+/**
+ * Hook to check if the current user has Admin role
+ *
+ * This is used for UI purposes only (disabling buttons, hiding elements).
+ * The actual authorization is enforced on the backend.
+ */
+
+import { useSelector } from "react-redux";
+import { extractUserToken } from "../tools/extractToken";
+
+/**
+ * Returns true if the current user has the Admin role
+ *
+ * Note: This is for UI display purposes only.
+ * Backend enforces actual authorization.
+ */
+export const useIsAdmin = (): boolean => {
+  const authToken = useSelector(
+    (state: { auth: { authToken: string } }) => state.auth.authToken
+  );
+
+  if (!authToken) {
+    return false;
+  }
+
+  const user = extractUserToken(authToken);
+  return user?.roleName === "Admin";
+};
+
+/**
+ * Returns the current user's role name
+ *
+ * Note: This is for UI display purposes only.
+ * Backend enforces actual authorization.
+ */
+export const useUserRole = (): string | null => {
+  const authToken = useSelector(
+    (state: { auth: { authToken: string } }) => state.auth.authToken
+  );
+
+  if (!authToken) {
+    return null;
+  }
+
+  const user = extractUserToken(authToken);
+  return user?.roleName || null;
+};

Clients/src/application/hooks/useNotifications.ts

@@ -488,6 +488,31 @@ export const useNotifications = (options: UseNotificationsOptions = {}): UseNoti
     };
   }, [connect, disconnect]);
 
+  // Reconnect when tab becomes visible or network comes back online
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible' && !isConnected && !isManuallyDisconnectedRef.current) {
+        // Tab became visible and we're not connected - reconnect
+        connect();
+      }
+    };
+
+    const handleOnline = () => {
+      if (!isConnected && !isManuallyDisconnectedRef.current) {
+        // Network came back - reconnect
+        connect();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    window.addEventListener('online', handleOnline);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      window.removeEventListener('online', handleOnline);
+    };
+  }, [connect, isConnected]);
+
   // Fetch stored notifications on mount
   useEffect(() => {
     if (fetchOnMount && authToken) {

Clients/src/application/hooks/useUserFilesMetaData.ts

@@ -11,8 +11,21 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { FileModel } from "../../domain/models/Common/file/file.model";
-import { getUserFilesMetaData } from "../repository/file.repository";
+import { getUserFilesMetaData, getFilesWithMetadata } from "../repository/file.repository";
 import { transformFilesData } from "../utils/fileTransform.utils";
+import CustomException from "../../infrastructure/exceptions/customeException";
+
+/**
+ * Check if an error is a rate limit (429) or other critical API error
+ * that should be shown to the user
+ */
+const isCriticalApiError = (error: unknown): boolean => {
+  if (error instanceof CustomException) {
+    // Rate limit (429), server errors (5xx), or forbidden (403)
+    return error.status === 429 || error.status === 403 || (error.status && error.status >= 500);
+  }
+  return false;
+};
 
 export const useUserFilesMetaData = () => {
   const [filesData, setFilesData] = useState<FileModel[]>([]);
@@ -28,25 +41,66 @@ export const useUserFilesMetaData = () => {
       try {
         setLoading(true);
         setError(null);
-        const filesResponse = await getUserFilesMetaData({
-          signal: abortController.signal,
-        });
 
-        if (filesResponse && Array.isArray(filesResponse)) {
-          setFilesData(transformFilesData(filesResponse));
+        // Track errors from each endpoint
+        let metadataError: unknown = null;
+        let legacyError: unknown = null;
+
+        // First try to get files with full metadata (includes version, status, etc.)
+        // Then also get legacy files from the old endpoint
+        const [metadataResponse, legacyResponse] = await Promise.all([
+          getFilesWithMetadata({ signal: abortController.signal }).catch((err) => {
+            metadataError = err;
+            return { files: [] };
+          }),
+          getUserFilesMetaData({ signal: abortController.signal }).catch((err) => {
+            legacyError = err;
+            return [];
+          }),
+        ]);
+
+        // If both endpoints failed with critical errors, show the error to the user
+        // Prioritize showing rate limit errors
+        if (metadataError && legacyError) {
+          const criticalError = isCriticalApiError(metadataError) ? metadataError :
+                               isCriticalApiError(legacyError) ? legacyError : null;
+          if (criticalError) {
+            throw criticalError;
+          }
+        }
+
+        // If one endpoint returned a rate limit error but the other succeeded, still show error
+        if (isCriticalApiError(metadataError) || isCriticalApiError(legacyError)) {
+          const criticalError = isCriticalApiError(metadataError) ? metadataError : legacyError;
+          throw criticalError;
+        }
+
+        // Combine files, preferring metadata-enriched files
+        const metadataFilesMap = new Map(
+          metadataResponse.files.map((f) => [String(f.id), f])
+        );
+
+        // Add any legacy files not already in metadata response
+        const legacyFilesNotInMetadata = legacyResponse.filter(
+          (f) => !metadataFilesMap.has(String(f.id))
+        );
+
+        const allFiles = [...metadataResponse.files, ...legacyFilesNotInMetadata];
+
+        if (allFiles.length > 0) {
+          setFilesData(transformFilesData(allFiles));
         } else {
           setFilesData([]);
         }
       } catch (error: unknown) {
         // Check if the error is due to aborting the request
         if (error instanceof Error && error.name === "AbortError") {
-          // Ignore abort errors
           return;
         }
         setError(
           error instanceof Error ? error : new Error("Unknown error occurred")
         );
-        setFilesData([]);
+        // Don't clear filesData on error - keep showing existing data
       } finally {
         setLoading(false);
       }

Clients/src/application/repository/approvalWorkflow.repository.ts

@@ -52,3 +52,27 @@ export async function deleteApprovalWorkflow({
   const response = await apiServices.delete(`/approval-workflows/${id}`);
   return response;
 }
+
+/**
+ * Get approval workflows filtered by entity type
+ *
+ * @param entityType - Entity type to filter by ('use_case', 'file')
+ * @param signal - Optional abort signal for cancellation
+ * @returns Promise<any> - List of workflows for the specified entity type
+ */
+export async function getApprovalWorkflowsByEntityType({
+  entityType,
+  signal,
+}: {
+  entityType: 'use_case' | 'file';
+  signal?: AbortSignal;
+}): Promise<any[]> {
+  const response = await apiServices.get(`/approval-workflows?entity_type=${entityType}`, {
+    signal,
+  });
+  // Filter by entity type if the backend doesn't support query param
+  const workflows = response.data?.data || response.data || [];
+  return Array.isArray(workflows)
+    ? workflows.filter((w: any) => w.entity_type === entityType)
+    : [];
+}