From c75f47b43a1d7e59b33429aa0ec0c66d2436617a Mon Sep 17 00:00:00 2001
From: noufalrahim <noufalrahim6784@gmail.com>
Date: Thu, 24 Oct 2024 11:44:33 +0530
Subject: [PATCH 1/3] Added UserAvatar in userlist and users page

---
 .../Common/UserAutocompleteFormField.tsx      |  1 +
 .../Form/FormFields/Autocomplete.tsx          | 54 +++++++++++++------
 src/components/Users/ManageUsers.tsx          | 10 +++-
 src/components/Users/models.tsx               |  1 +
 4 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/src/components/Common/UserAutocompleteFormField.tsx b/src/components/Common/UserAutocompleteFormField.tsx
index 2bf5c49ffc8..fcaf47d44bd 100644
--- a/src/components/Common/UserAutocompleteFormField.tsx
+++ b/src/components/Common/UserAutocompleteFormField.tsx
@@ -80,6 +80,7 @@ export default function UserAutocomplete(props: UserSearchProps) {
         )}
         optionLabel={formatName}
         optionIcon={userOnlineDot}
+        optionImage={(option) => option.read_profile_picture_url || ""}
         optionDescription={(option) =>
           `${option.user_type} - ${option.username}`
         }
diff --git a/src/components/Form/FormFields/Autocomplete.tsx b/src/components/Form/FormFields/Autocomplete.tsx
index a93186ef080..1322f65ea6b 100644
--- a/src/components/Form/FormFields/Autocomplete.tsx
+++ b/src/components/Form/FormFields/Autocomplete.tsx
@@ -14,7 +14,7 @@ import FormField from "./FormField";
 import { classNames } from "../../../Utils/utils";
 import { dropdownOptionClassNames } from "../MultiSelectMenuV2";
 import { useTranslation } from "react-i18next";
-
+import { Avatar } from "@/components/Common/Avatar";
 type OptionCallback<T, R> = (option: T) => R;
 
 type AutocompleteFormFieldProps<T, V> = FormFieldBaseProps<V> & {
@@ -24,6 +24,7 @@ type AutocompleteFormFieldProps<T, V> = FormFieldBaseProps<V> & {
   optionValue?: OptionCallback<T, V>;
   optionDescription?: OptionCallback<T, string>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
+  optionImage?: OptionCallback<T, string>;
   optionDisabled?: OptionCallback<T, boolean>;
   minQueryLength?: number;
   onQuery?: (query: string) => void;
@@ -50,6 +51,7 @@ const AutocompleteFormField = <T, V>(
         placeholder={props.placeholder}
         optionLabel={props.optionLabel}
         optionIcon={props.optionIcon}
+        optionImage={props.optionImage}
         optionValue={props.optionValue}
         optionDescription={props.optionDescription}
         optionDisabled={props.optionDisabled}
@@ -74,6 +76,7 @@ type AutocompleteProps<T, V = T> = {
   placeholder?: string;
   optionLabel: OptionCallback<T, string>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
+  optionImage?: OptionCallback<T, string>;
   optionValue?: OptionCallback<T, V>;
   optionDescription?: OptionCallback<T, React.ReactNode>;
   optionDisabled?: OptionCallback<T, boolean>;
@@ -118,6 +121,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
       description,
       search: label.toLowerCase(),
       icon: props.optionIcon?.(option),
+      image: props.optionImage?.(option),
       value: props.optionValue ? props.optionValue(option) : option,
       disabled: props.optionDisabled?.(option),
     };
@@ -137,6 +141,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
         description: undefined,
         search: query.toLowerCase(),
         icon: <CareIcon icon="l-plus" />,
+        image: undefined,
         value: query,
         disabled: undefined,
       },
@@ -236,24 +241,39 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
                   >
                     {({ focus }) => (
                       <div className="flex flex-col">
-                        <div className="flex justify-between">
-                          <span>{option.label}</span>
-                          <span>{option.icon}</span>
-                        </div>
-                        {option.description && (
-                          <div
-                            className={classNames(
-                              "text-sm font-normal",
-                              option.disabled
-                                ? "text-secondary-700"
-                                : focus
-                                  ? "text-primary-200"
-                                  : "text-secondary-700",
+                        <div className="flex items-center">
+                          <div className="flex flex-col">
+                            <div className="relative">
+                              <Avatar
+                                className="mr-2 h-11 w-11 rounded-full"
+                                name={option.label}
+                                imageUrl={option.image}
+                              />
+                              <span className="absolute bottom-0 right-0 z-10">
+                                {option.icon}
+                              </span>
+                            </div>
+                          </div>
+                          <div className="w-full">
+                            <div className="flex justify-between">
+                              <span>{option.label}</span>
+                            </div>
+                            {option.description && (
+                              <div
+                                className={classNames(
+                                  "text-sm font-normal",
+                                  option.disabled
+                                    ? "text-secondary-700"
+                                    : focus
+                                      ? "text-primary-200"
+                                      : "text-secondary-700",
+                                )}
+                              >
+                                {option.description}
+                              </div>
                             )}
-                          >
-                            {option.description}
                           </div>
-                        )}
+                        </div>
                       </div>
                     )}
                   </ComboboxOption>
diff --git a/src/components/Users/ManageUsers.tsx b/src/components/Users/ManageUsers.tsx
index 7dc3eb8b5fe..6860a52f236 100644
--- a/src/components/Users/ManageUsers.tsx
+++ b/src/components/Users/ManageUsers.tsx
@@ -16,6 +16,7 @@ import request from "../../Utils/request/request";
 import useQuery from "../../Utils/request/useQuery";
 import {
   classNames,
+  formatDisplayName,
   formatName,
   isUserOnline,
   relativeTime,
@@ -36,7 +37,7 @@ import UnlinkFacilityDialog from "./UnlinkFacilityDialog";
 import UserDeleteDialog from "./UserDeleteDialog";
 import UserFilter from "./UserFilter";
 import { showUserDelete } from "../../Utils/permissions";
-
+import { Avatar } from "../Common/Avatar";
 import Loading from "@/components/Common/Loading";
 export default function ManageUsers() {
   const { t } = useTranslation();
@@ -196,6 +197,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
diff --git a/src/components/Users/models.tsx b/src/components/Users/models.tsx
index 0b30a5ed6df..db448dbfb38 100644
--- a/src/components/Users/models.tsx
+++ b/src/components/Users/models.tsx
@@ -21,6 +21,7 @@ export type UserBareMinimum = {
   email: string;
   user_type: UserRole;
   last_login: string | undefined;
+  read_profile_picture_url?: string;
 };
 
 export type GenderType = "Male" | "Female" | "Transgender";

From 0cc8b71521f1e499cf98480792556faa64824595 Mon Sep 17 00:00:00 2001
From: noufalrahim <noufalrahim6784@gmail.com>
Date: Thu, 24 Oct 2024 11:56:36 +0530
Subject: [PATCH 2/3] Removed emty string

---
 src/components/Common/UserAutocompleteFormField.tsx | 2 +-
 src/components/Form/FormFields/Autocomplete.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Common/UserAutocompleteFormField.tsx b/src/components/Common/UserAutocompleteFormField.tsx
index fcaf47d44bd..a82174ac25d 100644
--- a/src/components/Common/UserAutocompleteFormField.tsx
+++ b/src/components/Common/UserAutocompleteFormField.tsx
@@ -80,7 +80,7 @@ export default function UserAutocomplete(props: UserSearchProps) {
         )}
         optionLabel={formatName}
         optionIcon={userOnlineDot}
-        optionImage={(option) => option.read_profile_picture_url || ""}
+        optionImage={(option) => option.read_profile_picture_url}
         optionDescription={(option) =>
           `${option.user_type} - ${option.username}`
         }
diff --git a/src/components/Form/FormFields/Autocomplete.tsx b/src/components/Form/FormFields/Autocomplete.tsx
index 1322f65ea6b..c9598030da2 100644
--- a/src/components/Form/FormFields/Autocomplete.tsx
+++ b/src/components/Form/FormFields/Autocomplete.tsx
@@ -76,7 +76,7 @@ type AutocompleteProps<T, V = T> = {
   placeholder?: string;
   optionLabel: OptionCallback<T, string>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
-  optionImage?: OptionCallback<T, string>;
+  optionImage?: OptionCallback<T, string | undefined>;
   optionValue?: OptionCallback<T, V>;
   optionDescription?: OptionCallback<T, React.ReactNode>;
   optionDisabled?: OptionCallback<T, boolean>;

From a592d78966116981e3fe05c0bfd3ae3010250fa8 Mon Sep 17 00:00:00 2001
From: rithviknishad <mail@rithviknishad.dev>
Date: Thu, 24 Oct 2024 12:02:32 +0530
Subject: [PATCH 3/3] fix types

---
 src/components/Form/FormFields/Autocomplete.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Form/FormFields/Autocomplete.tsx b/src/components/Form/FormFields/Autocomplete.tsx
index c9598030da2..9c9537a7901 100644
--- a/src/components/Form/FormFields/Autocomplete.tsx
+++ b/src/components/Form/FormFields/Autocomplete.tsx
@@ -24,7 +24,7 @@ type AutocompleteFormFieldProps<T, V> = FormFieldBaseProps<V> & {
   optionValue?: OptionCallback<T, V>;
   optionDescription?: OptionCallback<T, string>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
-  optionImage?: OptionCallback<T, string>;
+  optionImage?: OptionCallback<T, string | undefined>;
   optionDisabled?: OptionCallback<T, boolean>;
   minQueryLength?: number;
   onQuery?: (query: string) => void;