profile picture in any task item

src/pages/taskmanager/components/Task.tsx

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Pages } from "../../../config/Pages";
 import type { Task as TaskType } from "../types";
+import UserAvatar from "./UserAvatar";
 
 type Props = {
   task: TaskType;
@@ -70,9 +71,20 @@ const Task: FC<Props> = ({ task, isDragging, onClick }) => {
         </div>
       </div>
 
-      <div className="mt-2 flex justify-end">
-        <div className="size-6 bg-gray-200 rounded-full"></div>
-      </div>
+      {task.users?.length ? (
+        <div className="mt-2 flex justify-end">
+          <div className="flex items-center -space-x-1.5 rtl:space-x-reverse">
+            {task.users.map((user) => (
+              <UserAvatar
+                key={user.id}
+                src={user.profilePic}
+                alt={`${user.firstName} ${user.lastName}`}
+                className="size-6 ring-2 ring-white"
+              />
+            ))}
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 };