Updated UI for facility cards and avatar component (#8782)

cypress/pageobject/Facility/FacilityHome.ts

@@ -72,7 +72,7 @@ class FacilityHome {
   }
 
   verifyOccupancyBadgeVisibility() {
-    cy.get("#occupany-badge").should("be.visible");
+    cy.get('[data-test-id="occupancy-badge"]').should("be.visible");
   }
 
   verifyAndCloseNotifyModal() {

src/CAREUI/display/Count.tsx

@@ -11,15 +11,13 @@ interface Props {
 
 export default function CountBlock(props: Props) {
   return (
-    <div
-      className={classNames("rounded-lg bg-white p-4 shadow", props.className)}
-    >
-      <dl>
-        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-xl">
+    <div className={classNames("rounded-lg", props.className)}>
+      <dl className="flex gap-3">
+        <div className="flex aspect-square h-16 items-center justify-center rounded-lg border border-black/10 bg-primary-100 text-2xl">
           <CareIcon icon={props.icon} className="text-primary-600" />
         </div>
         <div>
-          <dt className="my-2 truncate text-sm font-semibold text-secondary-700">
+          <dt className="mb-1 truncate text-sm font-semibold text-secondary-700">
             {props.text}
           </dt>
           {props.loading ? (

src/Components/Common/Avatar.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import { cn } from "@/lib/utils";
+import React, { useEffect, useRef, useState } from "react";
 
 const colors: string[] = [
   "#E6F3FF", // Light Blue
@@ -44,43 +45,54 @@ const initials = (name: string): string => {
 interface AvatarProps {
   colors?: [string, string];
   name: string;
+  imageUrl?: string;
   className?: string;
-  square?: boolean; // New prop to determine if the avatar should be square
 }
 
 const Avatar: React.FC<AvatarProps> = ({
   colors: propColors,
   name,
+  imageUrl,
   className,
-  square = false, // Default to false for backwards compatibility
 }) => {
-  const [bgColor, fgColor] = propColors || toColor(name);
+  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 (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      viewBox="0 0 100 100"
-      className={className}
+    <div
+      ref={avatarRef}
+      className={cn(
+        `flex aspect-square w-full items-center justify-center overflow-hidden border border-black/10 font-black text-black/10`,
+        className,
+      )}
+      style={{
+        background: bgColor,
+        borderRadius: width / 15 + "px",
+        fontSize: width / 2.5 + "px",
+      }}
     >
-      {square ? (
-        <rect width="100" height="100" fill={bgColor} />
+      {imageUrl ? (
+        <img
+          src={imageUrl}
+          alt={name}
+          className="aspect-square w-full object-cover"
+        />
       ) : (
-        <circle cx="50" cy="50" r="50" fill={bgColor} />
+        <div>{initials(name)}</div>
       )}
-      <text
-        fill={fgColor}
-        fontSize="42"
-        fontFamily="sans-serif"
-        x="50"
-        y="54"
-        textAnchor="middle"
-        dominantBaseline="middle"
-        alignmentBaseline="middle"
-      >
-        {initials(name)}
-      </text>
-    </svg>
+    </div>
   );
 };
 

src/Components/Common/Sidebar/SidebarUserCard.tsx

@@ -40,7 +40,7 @@ const SidebarUserCard: React.FC<SidebarUserCardProps> = ({ shrinked }) => {
               <div className="flex-none text-lg">
                 <Avatar
                   name={formatDisplayName(user)}
-                  className="w-8 text-sm font-medium"
+                  className="h-8 rounded-full text-black/50"
                 />
               </div>
               <div className="max-w-32">

src/Components/Facility/FacilityBlock.tsx

@@ -24,15 +24,11 @@ export default function FacilityBlock(props: {
 
   return (
     <Element className="flex items-center gap-4 text-left text-inherit">
-      <div className="flex aspect-square h-14 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-gray-400 bg-gray-200">
-        {facility.read_cover_image_url ? (
-          <img
-            className="h-full w-full object-cover"
-            src={facility.read_cover_image_url}
-          />
-        ) : (
-          <Avatar name={facility.name!} square={true} />
-        )}
+      <div className="flex aspect-square h-14 shrink-0 items-center justify-center overflow-hidden">
+        <Avatar
+          name={facility.name!}
+          imageUrl={facility.read_cover_image_url}
+        />
       </div>
       <div>
         <b className="font-semibold">{facility.name}</b>

src/Components/Facility/FacilityCard.tsx

@@ -9,7 +9,6 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
 import { formatPhoneNumber, parsePhoneNumber } from "../../Utils/utils";
 import DialogModal from "../Common/Dialog";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
-import { classNames } from "../../Utils/utils";
 import request from "../../Utils/request/request";
 import routes from "../../Redux/api";
 import careConfig from "@careConfig";
@@ -52,42 +51,31 @@ export const FacilityCard = (props: {
 
   return (
     <div key={`usr_${facility.id}`} className="w-full">
-      <div className="block h-full overflow-hidden rounded-lg bg-white shadow hover:border-primary-500">
+      <div className="block h-full overflow-hidden rounded-lg border border-secondary-300 bg-white transition-all hover:border-secondary-400">
         <div className="flex h-full">
           <div className="h-full w-full grow">
             <Link
               href={`/facility/${facility.id}`}
-              className="group relative z-0 flex w-full min-w-[15%] items-center justify-center self-stretch bg-secondary-300 min-[425px]:hidden"
+              className="group relative z-0 flex w-full min-w-[15%] items-center justify-center self-stretch min-[425px]:hidden"
             >
-              {(facility.read_cover_image_url && (
-                <img
-                  src={facility.read_cover_image_url}
-                  alt={facility.name}
-                  className="h-full max-h-32 w-full object-cover"
-                />
-              )) || <Avatar name={facility.name ?? "Unknown"} square={true} />}
+              <Avatar
+                name={facility.name || ""}
+                imageUrl={facility.read_cover_image_url}
+                className="m-4 mb-0 md:m-0"
+              />
             </Link>
 
             <div className="mx-auto flex h-fit w-full max-w-full flex-col flex-wrap justify-between md:h-full lg:max-w-3xl">
               <div className="w-full p-4">
                 <div className="flex flex-col gap-5 sm:flex-row">
                   <Link
                     href={`/facility/${facility.id}`}
-                    className="group relative z-0 hidden h-[150px] min-h-[150px] w-[150px] min-w-[150px] items-center justify-center rounded-md bg-secondary-300 sm:flex"
+                    className="hidden h-[150px] min-h-[150px] w-[150px] min-w-[150px] sm:block"
                   >
-                    {(facility.read_cover_image_url && (
-                      <img
-                        src={facility.read_cover_image_url}
-                        alt={facility.name}
-                        className="h-full w-full rounded-md object-cover"
-                      />
-                    )) || (
-                      <Avatar
-                        name={facility.name || ""}
-                        square={true}
-                        className="h-full w-full rounded-md object-cover"
-                      />
-                    )}
+                    <Avatar
+                      name={facility.name || ""}
+                      imageUrl={facility.read_cover_image_url}
+                    />
                   </Link>
                   <div className="flow-root grow">
                     {facility.kasp_empanelled && (
@@ -99,12 +87,27 @@ export const FacilityCard = (props: {
                       className="flex flex-wrap items-center justify-between"
                       id="facility-name-card"
                     >
-                      <Link
-                        href={`/facility/${facility.id}`}
-                        className="text-xl font-bold capitalize text-inherit hover:text-inherit"
-                      >
-                        {facility.name}
-                      </Link>
+                      <div>
+                        <Link
+                          href={`/facility/${facility.id}`}
+                          className="text-xl font-bold capitalize text-inherit hover:text-inherit"
+                        >
+                          {facility.name}
+                        </Link>
+                        <div
+                          data-test-id="occupancy-badge"
+                          className={`tooltip flex items-center gap-1 text-sm ${(facility.patient_count || 0) / (facility.bed_count || 0) > 0.85 ? "justify-center rounded-md border border-red-600 bg-red-500 p-1 font-bold text-white" : "text-secondary-700"}`}
+                        >
+                          <span className="tooltip-text tooltip-top">
+                            {t("live_patients_total_beds")}
+                          </span>{" "}
+                          <CareIcon icon="l-bed" />
+                          <dt>
+                            {t("occupancy")}: {facility.patient_count} /{" "}
+                            {facility.bed_count}{" "}
+                          </dt>
+                        </div>
+                      </div>
                       <ButtonV2
                         id="view-cns-button"
                         href={`/facility/${facility.id}/cns`}
@@ -116,9 +119,10 @@ export const FacilityCard = (props: {
                           icon="l-monitor-heart-rate"
                           className="text-lg"
                         />
-                        <span>View CNS</span>
+                        <span>{t("view_cns")}</span>
                       </ButtonV2>
                     </div>
+
                     <div className="mt-2 flex flex-wrap gap-1">
                       <Chip
                         text={facility.facility_type || ""}
@@ -170,47 +174,10 @@ export const FacilityCard = (props: {
                   </div>
                 </div>
               </div>
-              <div className="flex flex-wrap border-t bg-secondary-50 px-2 py-1 md:px-3">
+              <div className="flex flex-wrap border-t border-t-secondary-300 bg-secondary-50 px-2 py-1 md:px-3">
                 {/* <div className="flex justify-between py-2"> */}
                 <div className="flex w-full flex-wrap justify-between gap-2 py-2">
                   <div className="flex flex-wrap gap-2">
-                    <div
-                      id="occupany-badge"
-                      className={`tooltip button-size-default ml-auto flex w-fit items-center justify-center rounded-md px-2 ${
-                        (facility.patient_count || 0) /
-                          (facility.bed_count || 0) >
-                        0.85
-                          ? "button-danger-border bg-red-500"
-                          : "button-primary-border bg-primary-100"
-                      }`}
-                    >
-                      <span className="tooltip-text tooltip-top">
-                        Live Patients / Total beds
-                      </span>{" "}
-                      <CareIcon
-                        icon="l-bed"
-                        className={classNames(
-                          "mr-2",
-                          (facility.patient_count || 0) /
-                            (facility.bed_count || 0) >
-                            0.85
-                            ? "text-white"
-                            : "text-primary-600",
-                        )}
-                      />{" "}
-                      <dt
-                        className={`text-sm font-semibold ${
-                          (facility.patient_count || 0) /
-                            (facility.bed_count || 0) >
-                          0.85
-                            ? "text-white"
-                            : "text-secondary-700"
-                        }`}
-                      >
-                        Occupancy: {facility.patient_count} /{" "}
-                        {facility.bed_count}{" "}
-                      </dt>{" "}
-                    </div>
                     <DialogModal
                       show={notifyModalFor === facility.id}
                       title={

src/Components/Facility/FacilityHome.tsx

@@ -136,14 +136,6 @@ export const FacilityHome = ({ facilityId }: Props) => {
     </div>
   );
 
-  const CoverImage = () => (
-    <img
-      src={`${facilityData?.read_cover_image_url}`}
-      alt={facilityData?.name}
-      className="h-full w-full rounded-lg object-cover"
-    />
-  );
-
   return (
     <Page
       title={facilityData?.name || "Facility"}
@@ -171,28 +163,19 @@ export const FacilityHome = ({ facilityId }: Props) => {
         onDelete={() => facilityFetch()}
         facility={facilityData ?? ({} as FacilityModel)}
       />
-      {hasCoverImage ? (
-        <div
-          className={
-            "group relative h-48 w-full text-clip rounded-t bg-secondary-200 opacity-100 transition-all duration-200 ease-in-out md:h-0 md:opacity-0"
-          }
-        >
-          <CoverImage />
-          {editCoverImageTooltip}
-        </div>
-      ) : (
-        <div
-          className={`group relative z-0 flex w-full shrink-0 items-center justify-center self-stretch bg-secondary-300 md:hidden ${
-            hasPermissionToEditCoverImage && "cursor-pointer"
-          }`}
-          onClick={() =>
-            hasPermissionToEditCoverImage && setEditCoverImage(true)
-          }
-        >
-          <Avatar name={facilityData?.name ?? ""} square={true} />
-          {editCoverImageTooltip}
-        </div>
-      )}
+
+      <div
+        className={`group relative z-0 flex w-full shrink-0 items-center justify-center self-stretch md:hidden ${
+          hasPermissionToEditCoverImage && "cursor-pointer"
+        }`}
+        onClick={() => hasPermissionToEditCoverImage && setEditCoverImage(true)}
+      >
+        <Avatar
+          imageUrl={facilityData?.read_cover_image_url}
+          name={facilityData?.name ?? ""}
+        />
+        {editCoverImageTooltip}
+      </div>
       <div
         className={`bg-white ${
           hasCoverImage ? "rounded-b lg:rounded-t" : "rounded"
@@ -210,13 +193,13 @@ export const FacilityHome = ({ facilityId }: Props) => {
                     hasPermissionToEditCoverImage && setEditCoverImage(true)
                   }
                 >
-                  {hasCoverImage ? (
-                    <CoverImage />
-                  ) : (
-                    <div className="flex h-80 w-[88px] items-center justify-center rounded-lg bg-secondary-200 font-medium text-secondary-700 lg:h-80 lg:w-80">
-                      <Avatar name={facilityData?.name ?? ""} square={true} />
-                    </div>
-                  )}
+                  <div className="flex h-80 w-[88px] items-center justify-center rounded-lg font-medium text-secondary-700 lg:h-80 lg:w-80">
+                    <Avatar
+                      imageUrl={facilityData?.read_cover_image_url}
+                      name={facilityData?.name ?? ""}
+                    />
+                  </div>
+
                   {editCoverImageTooltip}
                 </div>
                 <div className="mb-6 grid gap-4 md:mb-0">