Basic Layout for the assignment completion page is now present.

src/Sass/_assignmentComplete.scss

@@ -0,0 +1,113 @@
+@import "./_esuiteVariables.scss";
+
+$assignmentComplete-border-color: darken($mode--light-bg, 50%);
+
+.assignmentComplete {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  overflow: hidden;
+
+  .topMenu {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 20px;
+    border-bottom: 1px solid $assignmentComplete-border-color;
+
+    h1 {
+      font-size: 2.5em;
+    }
+
+    h2 {
+      font-size: 1.25em;
+    }
+
+    h1,
+    h2 {
+      margin: 0;
+    }
+
+    .actions {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+
+  .mainContent {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .workarea {
+      flex: 1;
+      min-width: 0;
+      padding: 20px;
+      overflow-x: auto;
+      overflow-y: visible;
+
+      .workareaInner {
+        min-width: 420px;
+      }
+    }
+
+    .information {
+      flex: 0 0 360px;
+      max-width: 360px;
+      width: 360px;
+      padding: 20px;
+
+      .taskDetails {
+        border: 1px solid $assignmentComplete-border-color;
+        border-radius: 4px;
+        padding: 12px;
+        margin-bottom: 12px;
+
+        .taskDetailsHeader {
+          background-color: $assignmentComplete-border-color;
+          margin: -12px -12px 12px;
+          padding: 8px 12px;
+        }
+
+        .taskDetailsLabel {
+          font-weight: 600;
+        }
+      }
+
+      .assigneeDetailsLabel {
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+@media (max-width: 900px) {
+  .assignmentComplete {
+    .topMenu {
+      flex-wrap: wrap;
+
+      .actions {
+        width: 100%;
+        margin-left: 0;
+      }
+    }
+
+    .mainContent {
+      flex-direction: column;
+
+      .information {
+        width: 100%;
+        max-width: 100%;
+        border-left: 0;
+        border-top: 1px solid $assignmentComplete-border-color;
+      }
+    }
+  }
+}

src/modules/manager/task/assignments/AssignmentComplete.tsx

@@ -6,12 +6,18 @@ import { Namespaces } from "../../../../i18n/i18n";
 import assignmentCompleteService, {
   GetAssignmentForCompletion,
 } from "./services/assignmentCompleteService";
+import { DateView } from "../../../../components/common/DateView";
+import LoadingPanel from "../../../../components/common/LoadingPanel";
+import AssigneePanel from "../../tasks/components/AssigneePanel";
+import TaskTypeAndNameDisplayPanel from "../../workflowTemplates/components/TaskTypeAndNameDisplayPanel";
+import Button, { ButtonType } from "../../../../components/common/Button";
+import "../../../../Sass/_assignmentComplete.scss";
 
 const AssignmentComplete: React.FC = () => {
   const { assignmentId } = useParams<{ assignmentId: string }>();
   const { t } = useTranslation(Namespaces.Common);
-  const [assignment, setAssignment] =
+  const [assignmentDetails, setAssignmentDetails] =
-    useState<GetAssignmentForCompletion | null>(null);
+    useState<GetAssignmentForCompletion>();
 
   const loadAssignment = useCallback(async () => {
     if (assignmentId === undefined) {
@@ -24,7 +30,7 @@ const AssignmentComplete: React.FC = () => {
           BigInt(assignmentId),
         );
       if (assignmentDetails) {
-        setAssignment(assignmentDetails);
+        setAssignmentDetails(assignmentDetails);
       }
     } catch (ex: any) {
       toast.error(ex.message);
@@ -35,10 +41,68 @@ const AssignmentComplete: React.FC = () => {
     void loadAssignment();
   }, [loadAssignment]);
 
+  if (assignmentDetails === undefined) {
+    return <LoadingPanel />;
+  }
+
+  var taskDefinition = assignmentDetails.workflowTemplateVersion.tasks.find(
+    (t) => t.config.guid == assignmentDetails.task.taskGuid,
+  )!;
+
   return (
-    <>
+    <div className="assignmentComplete">
-      {assignment ? <>{assignment.taskName}</> : <>{t("CompleteAssignment")}</>}
+      <div className="topMenu">
-    </>
+        <div>
+          <h1>
+            <TaskTypeAndNameDisplayPanel
+              taskName={assignmentDetails.task.taskName}
+              taskType={assignmentDetails.task.taskType}
+              showValidationErrorIcon={false}
+            />
+          </h1>
+          <h2>{assignmentDetails.activity.name}</h2>
+        </div>
+        <div className="actions">
+          <Button buttonType={ButtonType.primary}>Complete</Button>
+        </div>
+      </div>
+      <div className="mainContent">
+        <div className="workarea">
+          <div className="workareaInner">
+            <div>{taskDefinition.config.description}</div>
+
+            <div>Comments</div>
+            <div>{assignmentDetails.assignment.comments}</div>
+          </div>
+        </div>
+
+        <div className="information">
+          <div className="taskDetails">
+            <div className="taskDetailsHeader">Current Task Info</div>
+            <div>
+              <div className="taskDetailsLabel">Name</div>
+              <div>{assignmentDetails.task.taskName}</div>
+              <div className="taskDetailsLabel">Started</div>
+              <div>
+                <DateView value={assignmentDetails.assignment.startDateTime} />
+              </div>
+            </div>
+          </div>
+
+          <div className="assigneeDetails">
+            <div className="assigneeDetailsLabel">Assigned to</div>
+            <div>Contacts</div>
+            <div>
+              <AssigneePanel user={assignmentDetails.assignment.userId} />
+            </div>
+            <div>Roles</div>
+            <div>
+              <AssigneePanel role={assignmentDetails.assignment.roleId} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

src/modules/manager/task/assignments/services/assignmentCompleteService.ts

@@ -3,19 +3,42 @@ import {
   GeneralIdRef,
   MakeGeneralIdRefParams,
 } from "../../../../../utils/GeneralIdRef";
+import { ReadWorkflowTemplateVersion } from "../../../workflowTemplates/services/WorkflowTemplateService";
 
 const apiEndpoint = "/Tasks";
 
-export interface GetAssignmentForCompletion {
+export interface GetAssignment {
+  id: bigint;
+  guid: string;
+  startDateTime: Date;
+  raci: string;
+  allowNoVerdict: boolean;
+  outcomes: string[];
+  roleId: GeneralIdRef;
+  userId: GeneralIdRef;
+  comments: string;
+}
+
+export interface GetTask {
   id: bigint;
   guid: string;
-  taskType: string;
   taskName: string;
-  activityId: GeneralIdRef;
+  taskType: string;
-  activityName: string;
+  taskGuid: string;
-  user?: GeneralIdRef;
+}
-  role?: GeneralIdRef;
+
-  startDateTime?: Date;
+export interface GetActivity {
+  id: bigint;
+  guid: string;
+  name: string;
+  workflowVersionId: bigint;
+}
+
+export interface GetAssignmentForCompletion {
+  assignment: GetAssignment;
+  task: GetTask;
+  activity: GetActivity;
+  workflowTemplateVersion: ReadWorkflowTemplateVersion;
 }
 
 export async function getAssignmentForCompletion(