Merge branch 'develop' of https://github.com/bluewave-labs/verifywise into develop

Harsh · Harsh · commit 7de457107e0a · 2025-12-03T16:20:05.000-05:00
diff --git a/Clients/src/presentation/components/IconButton/index.tsx b/Clients/src/presentation/components/IconButton/index.tsx
@@ -248,20 +248,20 @@ const IconButton: React.FC<IconButtonProps> = ({
    */
   const getMenuItemText = (item: string) => {
     if (item === "make visible") {
-      return isVisible ? "Make Hidden" : "Make Visible";
+      return isVisible ? "Make hidden" : "Make visible";
     }
     if (item === "archive" && type === "Incident") {
       return "Archive incident";
     }
     // Task-specific labels
     if ((type === "Task" || type === "task") && item === "archive") {
-      return "Archive";
+      return "Archive task";
     }
     if ((type === "Task" || type === "task") && item === "delete") {
-      return "Delete";
+      return "Delete permanently";
     }
     if ((type === "Task" || type === "task") && item === "restore") {
-      return "Restore";
+      return "Restore task";
     }
     return item.charAt(0).toUpperCase() + item.slice(1);
   };
@@ -356,11 +356,27 @@ const IconButton: React.FC<IconButtonProps> = ({
               }
             }}
             disabled={isDisabled}
-            sx={
-              item === "remove" || item === "archive" || item === "delete"
-                ? { color: "#d32f2f" }
-                : {}
-            }
+            sx={{
+              ...(() => {
+                // Archive (soft delete) uses warning color
+                if (item === "archive" && (type === "Task" || type === "task")) {
+                  return { color: "#F59E0B" }; // warning color
+                }
+                // Hard delete uses error color
+                if (item === "delete" && (type === "Task" || type === "task")) {
+                  return { color: "#d32f2f" }; // error color
+                }
+                // Other remove/archive uses error color
+                if (item === "remove" || item === "archive") {
+                  return { color: "#d32f2f" };
+                }
+                // Restore uses primary/success color
+                if (item === "restore") {
+                  return { color: "#13715B" }; // primary color
+                }
+                return {};
+              })(),
+            }}
           >
             {getMenuItemText(item)}
           </MenuItem>
diff --git a/Clients/src/presentation/components/Modals/Basic/index.tsx b/Clients/src/presentation/components/Modals/Basic/index.tsx
@@ -1,5 +1,5 @@
 /**
- * A modal component that displays a confirmation dialog for deleting a vendor.
+ * A modal component that displays a confirmation dialog for deleting/archiving items.
  *
  * @component
  * @param {BasicModalProps} props - The properties for the BasicModal component.
@@ -12,13 +12,14 @@
  * <BasicModal isOpen={isOpen} setIsOpen={setIsOpen} />
  */
 
-import { Button, Modal, Stack, Typography, useTheme } from "@mui/material";
+import { Button, Modal, Stack, Typography, useTheme, CircularProgress } from "@mui/material";
 import { BasicModalProps } from "../../../../domain/interfaces/iSelect";
 import {
   BasicModalCancelButtonStyle,
   BasicModalDeleteButtonStyle,
 } from "./style";
 import { useModalKeyHandling } from "../../../../application/hooks/useModalKeyHandling";
+import { useState } from "react";
 
 const BasicModal: React.FC<BasicModalProps> = ({
   isOpen,
@@ -30,17 +31,39 @@ const BasicModal: React.FC<BasicModalProps> = ({
   type,
 }) => {
   const theme = useTheme();
+  const [isLoading, setIsLoading] = useState(false);
 
   useModalKeyHandling({
     isOpen,
-    onClose: () => setIsOpen(false),
+    onClose: () => !isLoading && setIsOpen(false),
   });
 
+  const handleDelete = async (e: React.MouseEvent) => {
+    setIsLoading(true);
+    try {
+      await onDelete(e);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancel = (e: React.MouseEvent) => {
+    if (!isLoading) {
+      onCancel(e);
+    }
+  };
+
+  // Determine the action type and button styling
+  const isArchiveAction = type === "Incident" || type === "Task";
+  const isHardDelete = warningTitle?.toLowerCase().includes("permanently") || warningTitle?.toLowerCase().includes("delete");
+  const buttonColor = isArchiveAction && !isHardDelete ? "warning" : "error";
+  const buttonText = isArchiveAction ? `Archive ${type.toLowerCase()}` : (isHardDelete ? "Delete permanently" : `Delete ${type}`);
+
   return (
     <Modal
       open={isOpen}
       onClose={(_event, reason) => {
-        if (reason !== "backdropClick") {
+        if (reason !== "backdropClick" && !isLoading) {
           setIsOpen(false);
         }
       }}
@@ -57,13 +80,13 @@ const BasicModal: React.FC<BasicModalProps> = ({
           top: "50%",
           left: "50%",
           transform: "translate(-50%, -50%)",
-          width: 450,
+          width: 480,
+          maxWidth: "90vw",
           bgcolor: theme.palette.background.modal,
-          border: 1,
-          borderColor: theme.palette.border.dark,
+          border: `1px solid ${theme.palette.border.light}`,
           borderRadius: theme.shape.borderRadius,
           boxShadow: 24,
-          p: theme.spacing(15),
+          p: theme.spacing(3),
           "&:focus": {
             outline: "none",
           },
@@ -73,20 +96,23 @@ const BasicModal: React.FC<BasicModalProps> = ({
           id="modal-delete-vendor"
           fontSize={16}
           fontWeight={600}
+          color={theme.palette.text.primary}
         >
           {warningTitle}
         </Typography>
         <Typography
           id="delete-monitor-confirmation"
           fontSize={13}
           textAlign={"left"}
+          color={theme.palette.text.secondary}
+          sx={{ lineHeight: 1.5 }}
         >
           {warningMessage}
         </Typography>
         <Stack
           direction="row"
-          gap={theme.spacing(4)}
-          mt={theme.spacing(12)}
+          gap={theme.spacing(2)}
+          mt={theme.spacing(4)}
           justifyContent="flex-end"
         >
           <Button
@@ -95,8 +121,13 @@ const BasicModal: React.FC<BasicModalProps> = ({
             disableTouchRipple
             variant="text"
             color="inherit"
-            onClick={(e) => onCancel(e)}
-            sx={BasicModalCancelButtonStyle}
+            onClick={handleCancel}
+            disabled={isLoading}
+            sx={{
+              ...BasicModalCancelButtonStyle,
+              opacity: isLoading ? 0.5 : 1,
+              cursor: isLoading ? "not-allowed" : "pointer",
+            }}
           >
             Cancel
           </Button>
@@ -105,11 +136,20 @@ const BasicModal: React.FC<BasicModalProps> = ({
             disableFocusRipple
             disableTouchRipple
             variant="contained"
-            color="error"
-            sx={BasicModalDeleteButtonStyle}
-            onClick={(e) => onDelete(e)}
+            color={buttonColor}
+            sx={{
+              ...BasicModalDeleteButtonStyle,
+              opacity: isLoading ? 0.7 : 1,
+              cursor: isLoading ? "not-allowed" : "pointer",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+            }}
+            onClick={handleDelete}
+            disabled={isLoading}
           >
-            {type === "Incident" || type === "Task" ? `Archive ${type.toLowerCase()}` : `Delete ${type}`}
+            {isLoading && <CircularProgress size={16} color="inherit" />}
+            {buttonText}
           </Button>
         </Stack>
       </Stack>
diff --git a/Clients/src/presentation/components/Modals/Basic/style.ts b/Clients/src/presentation/components/Modals/Basic/style.ts
@@ -1,22 +1,27 @@
 export const BasicModalCancelButtonStyle = {
-  width: 100,
+  minWidth: 100,
   textTransform: "capitalize",
   fontSize: 13,
   borderRadius: "4px",
+  padding: "8px 16px",
   "&:hover": {
     boxShadow: "none",
-    backgroundColor: "transparent",
+    backgroundColor: "rgba(0, 0, 0, 0.04)",
   },
 };
 
 export const BasicModalDeleteButtonStyle = {
-  width: 160,
+  minWidth: 160,
   fontSize: 13,
   backgroundColor: "#DB504A",
   border: "1px solid #DB504A",
   boxShadow: "none",
   borderRadius: "4px",
+  padding: "8px 16px",
+  textTransform: "capitalize",
   "&:hover": {
     boxShadow: "none",
+    backgroundColor: "#c23c34",
+    borderColor: "#c23c34",
   },
 };
diff --git a/Clients/src/presentation/components/RiskLevel/riskValues.ts b/Clients/src/presentation/components/RiskLevel/riskValues.ts
@@ -12,7 +12,7 @@ export enum RiskLikelihood {
   Unlikely = "Unlikely",
   Possible = "Possible",
   Likely = "Likely",
-  AlmostCertain = "Almost certain",
+  AlmostCertain = "Almost Certain",
 }
 export enum RiskSeverity {
   Negligible = "Negligible",
diff --git a/Clients/src/presentation/components/Table/TasksTable/index.tsx b/Clients/src/presentation/components/Table/TasksTable/index.tsx
@@ -316,8 +316,10 @@ const TasksTable: React.FC<ITasksTableProps> = ({
                 sx={{
                   ...singleTheme.tableStyles.primary.body.row,
                   cursor: isArchived ? "default" : "pointer",
+                  backgroundColor: isArchived ? "rgba(0, 0, 0, 0.02)" : "transparent",
+                  opacity: isArchived ? 0.7 : 1,
                   "&:hover": {
-                    backgroundColor: "#f5f5f5",
+                    backgroundColor: isArchived ? "rgba(0, 0, 0, 0.04)" : "#f5f5f5",
                   },
                 }}
                 onClick={() => !isArchived && onRowClick?.(task)}
@@ -333,7 +335,11 @@ const TasksTable: React.FC<ITasksTableProps> = ({
                   <Box>
                     <Typography
                       variant="body2"
-                      sx={{ textTransform: "capitalize" }}
+                      sx={{
+                        textTransform: "capitalize",
+                        textDecoration: isArchived ? "line-through" : "none",
+                        color: isArchived ? "#9ca3af" : "inherit",
+                      }}
                     >
                       {task.title}
                     </Typography>
@@ -547,8 +553,8 @@ const TasksTable: React.FC<ITasksTableProps> = ({
                     onDelete={() => onArchive(task.id!)}
                     onEdit={() => onEdit(task)}
                     onMouseEvent={() => {}}
-                    warningTitle="Archive this task?"
-                    warningMessage="When you archive this task, it will be hidden from the active tasks list. You can restore it later using the 'include archived' toggle."
+                    warningTitle="Archive task?"
+                    warningMessage={`This task will be hidden from your active task list. You can restore "${task.title}" anytime from the archived view.`}
                     type="Task"
                     isArchived={task.status === TaskStatus.DELETED}
                     onRestore={onRestore ? () => onRestore(task.id!) : undefined}
diff --git a/Clients/src/presentation/pages/Tasks/index.tsx b/Clients/src/presentation/pages/Tasks/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export enum RiskLikelihood {`
`12`	`12`	`Unlikely = "Unlikely",`
`13`	`13`	`Possible = "Possible",`
`14`	`14`	`Likely = "Likely",`
`15`		`- AlmostCertain = "Almost certain",`
	`15`	`+ AlmostCertain = "Almost Certain",`
`16`	`16`	`}`
`17`	`17`	`export enum RiskSeverity {`
`18`	`18`	`Negligible = "Negligible",`