Allow users to set profile pictures

cypress/pageobject/Facility/FacilityManage.ts

@@ -1,6 +1,6 @@
 class FacilityManage {
   clickCoverImage() {
-    cy.get("#facility-coverimage").click({ force: true });
+    cy.get("#facility-coverimage").click();
   }
 
   verifyUploadButtonVisible() {
@@ -13,6 +13,11 @@ class FacilityManage {
       .wait(100); // Adjust the wait time as needed
   }
 
+  clickSaveCoverImage() {
+    cy.get("#save-cover-image").scrollIntoView();
+    cy.get("#save-cover-image").click();
+  }
+
   verifyTotalDoctorCapacity(expectedCapacity: string) {
     cy.get("#facility-doctor-totalcapacity").contains(expectedCapacity);
   }
@@ -37,11 +42,6 @@ class FacilityManage {
     cy.get("#delete-facility-bedcapacity").click();
   }
 
-  clickSaveCoverImage() {
-    cy.get("#save-cover-image").scrollIntoView();
-    cy.get("#save-cover-image").click();
-  }
-
   clickFacilityConfigureButton() {
     cy.get("#configure-facility").should("be.visible");
     cy.get("#configure-facility").click();

src/Common/hooks/useAuthUser.ts

@@ -9,6 +9,7 @@ type AuthContextType = {
   user: UserModel | undefined;
   signIn: (creds: LoginCredentials) => Promise<SignInReturnType>;
   signOut: () => Promise<void>;
+  refetchUser: () => Promise<RequestResult<UserModel>>;
 };
 
 export const AuthUserContext = createContext<AuthContextType | null>(null);

src/Components/Common/Avatar.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils";
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
 
 const colors: string[] = [
   "#E6F3FF", // Light Blue
@@ -43,57 +43,63 @@ const initials = (name: string): string => {
 };
 
 interface AvatarProps {
+  id?: string;
   colors?: [string, string];
   name: string;
   imageUrl?: string;
   className?: string;
 }
 
 const Avatar: React.FC<AvatarProps> = ({
+  id,
   colors: propColors,
   name,
   imageUrl,
   className,
 }) => {
   const [bgColor] = propColors || toColor(name);
-  const [width, setWidth] = useState(0);
-  const avatarRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const updateWidth = () => {
-      const avatarRect = avatarRef.current?.getBoundingClientRect();
-      const width = avatarRect?.width || 0;
-      setWidth(width);
-    };
-    updateWidth();
-    document.addEventListener("resize", updateWidth);
-    return () => document.removeEventListener("resize", updateWidth);
-  }, []);
-
   return (
     <div
-      ref={avatarRef}
+      id={id}
       className={cn(
-        `flex aspect-square w-full items-center justify-center overflow-hidden border border-black/10 font-black text-black/10`,
+        `flex aspect-square w-full items-center justify-center overflow-hidden border border-black/10`,
         className,
       )}
       style={{
         background: bgColor,
-        borderRadius: width / 15 + "px",
-        fontSize: width / 2.5 + "px",
+        borderRadius: "calc(100% / 15)",
       }}
     >
       {imageUrl ? (
         <img
           src={imageUrl}
           alt={name}
-          className="aspect-square w-full object-cover"
+          className="aspect-square h-full w-full object-cover"
         />
       ) : (
-        <div>{initials(name)}</div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          viewBox="0 0 100 100"
+        >
+          <text
+            fill="black"
+            fillOpacity="0.1"
+            fontSize="40"
+            fontWeight="900"
+            x="50"
+            y="54"
+            textAnchor="middle"
+            dominantBaseline="middle"
+            alignmentBaseline="middle"
+          >
+            {initials(name)}
+          </text>
+        </svg>
       )}
     </div>
   );
 };
 
 export { Avatar };
+export type { AvatarProps };