implement edit active workflow and do not allow editing on already completed steps

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -12,6 +12,7 @@ import WorkflowStepSelects from "./WorkflowStepSelects";
 interface Props extends Pick<EditableWorkflowStep, 'stepNumber' | 'assignees' | 'finalStep' | 'onDelete'> {
     entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
     onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
+    isCompleted: boolean,
 }
 
 export default function WorkflowEditableStepComponent({
@@ -21,6 +22,7 @@ export default function WorkflowEditableStepComponent({
     onDelete,
     onSelectChange,
     entityApprovers,
+    isCompleted,
 }: Props) {
 
     const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
@@ -95,7 +97,7 @@ export default function WorkflowEditableStepComponent({
                 )}
             </div>
 
-            {stepNumber !== 1 && !finalStep
+            {stepNumber !== 1 && !finalStep && !isCompleted
                 ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing min-w-[25px] min-h-[25px]" />
                 : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
             }
@@ -106,6 +108,7 @@ export default function WorkflowEditableStepComponent({
                     selects={selects}
                     placeholder={stepNumber === 1 ? "Form Intake By:" : "Approval By:"}
                     onSelectChange={handleSelectChangeAt}
+                    isCompleted={isCompleted}
                 />
             </div>