feat: Added Avatars in users list and usersAutoComplete

src/Components/Common/UserAutocompleteFormField.tsx

@@ -15,6 +15,7 @@ import { useEffect, useState } from "react";
 import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import { UserBareMinimum } from "../Users/models";
+import { Avatar } from "./Avatar";
 
 type BaseProps = FormFieldBaseProps<UserBareMinimum> & {
   placeholder?: string;
@@ -148,11 +149,21 @@ export const LinkedFacilityUsers = (props: LinkedFacilitySearchProps) => {
   );
 };
 
-const userOnlineDot = (user: UserBareMinimum) => (
-  <div
-    className={classNames(
-      "mr-4 size-2.5 rounded-full",
-      isUserOnline(user) ? "bg-primary-500" : "bg-secondary-400",
-    )}
-  />
-);
+const userOnlineDot = (user: UserBareMinimum) => {
+  console.log(user);
+  return (
+    <div className="mr-2 flex items-center">
+      <div
+        className={classNames(
+          "mr-4 size-2.5 rounded-full",
+          isUserOnline(user) ? "bg-primary-500" : "bg-secondary-400",
+        )}
+      />
+      <Avatar
+        name={formatName(user)}
+        imageUrl={user.profile_picture}
+        className="h-8 w-8 rounded-full text-black"
+      />
+    </div>
+  );
+};

src/Components/Users/ManageUsers.tsx

@@ -19,6 +19,7 @@ import {
   formatName,
   isUserOnline,
   relativeTime,
+  formatDisplayName,
 } from "../../Utils/utils";
 import { FacilitySelect } from "../Common/FacilitySelect";
 import Pagination from "../Common/Pagination";
@@ -38,6 +39,7 @@ import UserFilter from "./UserFilter";
 import { showUserDelete } from "../../Utils/permissions";
 
 import Loading from "@/Components/Common/Loading";
+import { Avatar } from "../Common/Avatar";
 export default function ManageUsers() {
   const { t } = useTranslation();
   const { width } = useWindowDimensions();
@@ -196,6 +198,13 @@ export default function ManageUsers() {
           <div className="relative block h-full overflow-visible rounded-lg bg-white shadow hover:border-primary-500">
             <div className="flex h-full flex-col justify-between @container">
               <div className="px-6 py-4">
+                <div className="mb-2 flex-none text-lg">
+                  <Avatar
+                    name={formatDisplayName(user)}
+                    imageUrl={user.read_profile_picture_url}
+                    className="mb-2 h-12 w-12 rounded-full text-black lg:mb-0"
+                  />
+                </div>
                 <div className="flex flex-col flex-wrap justify-between gap-3 @sm:flex-row">
                   {user.username && (
                     <div

src/Components/Users/models.tsx

@@ -21,6 +21,7 @@ export type UserBareMinimum = {
   email: string;
   user_type: UserRole;
   last_login: string | undefined;
+  profile_picture?: string;
 };
 
 export type GenderType = "Male" | "Female" | "Transgender";