From 2eff08bf86c15835147b7b7de31ed79711a65743 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sat, 25 Jan 2025 04:23:28 +0000
Subject: [PATCH] Add approval by to step details panel and add text size prop
 to UserWithProfilePicture component

---
 .../ApprovalWorkflows/UserWithProfilePic.tsx  |  6 +++--
 src/pages/approval-workflows/[id].tsx         | 25 ++++++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
index 4254bfd9..34c78adb 100644
--- a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
+++ b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
@@ -4,12 +4,14 @@ interface Props {
     prefix: string;
     name: string;
     profileImage: string;
+    textSize?: string;
 }
 
-export default function UserWithProfilePic({ prefix, name, profileImage }: Props) {
+export default function UserWithProfilePic({ prefix, name, profileImage, textSize }: Props) {
+    const textClassName = `${textSize ? textSize : "text-xs"} font-medium`
     return (
         <div className="flex items-center space-x-2">
-            <p className="text-xs font-medium">{prefix} {name}</p>
+            <p className={textClassName}>{prefix} {name}</p>
             <Image
                 src={profileImage}
                 alt={name}
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 7b8fc7e7..38f18439 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -180,7 +180,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                     </div>
 
                                     {selectedStep.completed ? (
-                                        <div className={"text-base font-medium text-gray-500 my-7"}>
+                                        <div className={"text-base font-medium text-gray-500 flex flex-col gap-6"}>
                                             Approved on {new Date(selectedStep.completedDate!).toLocaleString("en-CA", {
                                                 year: "numeric",
                                                 month: "2-digit",
@@ -190,9 +190,27 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 second: "2-digit",
                                                 hour12: false,
                                             }).replace(", ", " at ")}
-                                            <p className="my-4 text-sm">No additional actions are required.</p>
+                                            <div className="flex flex-row gap-1 text-sm">
+                                                <p className="text-base">Approved by:</p>
+                                                {(() => {
+                                                    const assignee = workflowAssignees.find(
+                                                        (assignee) => assignee.id === selectedStep.completedBy
+                                                    );
+                                                    return assignee ? (
+                                                        <UserWithProfilePic
+                                                            textSize="text-base"
+                                                            prefix={getUserTypeLabelShort(assignee.type)}
+                                                            name={assignee.name}
+                                                            profileImage={assignee.profilePicture}
+                                                        />
+                                                    ) : (
+                                                        "Unknown"
+                                                    );
+                                                })()}
+                                            </div>
+                                            <p className="text-sm">No additional actions are required.</p>
                                         </div>
-                                
+
                                     ) : (
                                         <div className={"text-base font-medium text-gray-500"}>
                                             One assignee is required to sign off to complete this step:
@@ -200,6 +218,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 {workflowAssignees.map(user => (
                                                     <span key={user.id}>
                                                         <UserWithProfilePic
+                                                            textSize="text-sm"
                                                             prefix={getUserTypeLabelShort(user.type)}
                                                             name={user.name}
                                                             profileImage={user.profilePicture}