Added listing of Hub Facilities in Facility Home (#8729)

src/Components/Facility/FacilityBlock.tsx

@@ -1,16 +1,29 @@
 import { Link } from "raviger";
 import { FacilityModel } from "./models";
+import { ReactNode } from "react";
 import { Avatar } from "@/Components/Common/Avatar";
 
-export default function FacilityBlock(props: { facility: FacilityModel }) {
-  const { facility } = props;
+export default function FacilityBlock(props: {
+  facility: FacilityModel;
+  redirect?: boolean;
+}) {
+  const { facility, redirect = true } = props;
+
+  const Element = (props: { children: ReactNode; className?: string }) =>
+    redirect ? (
+      <Link
+        target="_blank"
+        href={`/facility/${facility.id}`}
+        className={props.className}
+      >
+        {props.children}
+      </Link>
+    ) : (
+      <button className={props.className}>{props.children}</button>
+    );
 
   return (
-    <Link
-      className="flex items-center gap-4 text-inherit"
-      target="_blank"
-      href={`/facility/${facility.id}`}
-    >
+    <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
@@ -27,6 +40,6 @@ export default function FacilityBlock(props: { facility: FacilityModel }) {
           {facility.address} {facility.local_body_object?.name}
         </p>
       </div>
-    </Link>
+    </Element>
   );
 }

src/Components/Facility/FacilityCard.tsx

@@ -13,13 +13,17 @@ import { classNames } from "../../Utils/utils";
 import request from "../../Utils/request/request";
 import routes from "../../Redux/api";
 import careConfig from "@careConfig";
+import { FacilityModel } from "./models";
 import { Avatar } from "../Common/Avatar";
 
-export const FacilityCard = (props: { facility: any; userType: any }) => {
+export const FacilityCard = (props: {
+  facility: FacilityModel;
+  userType: string;
+}) => {
   const { facility, userType } = props;
 
   const { t } = useTranslation();
-  const [notifyModalFor, setNotifyModalFor] = useState(undefined);
+  const [notifyModalFor, setNotifyModalFor] = useState<string>();
   const [notifyMessage, setNotifyMessage] = useState("");
   const [notifyError, setNotifyError] = useState("");
 
@@ -61,7 +65,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                   alt={facility.name}
                   className="h-full max-h-32 w-full object-cover"
                 />
-              )) || <Avatar name={facility.name} square={true} />}
+              )) || <Avatar name={facility.name ?? "Unknown"} square={true} />}
             </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">
@@ -79,7 +83,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                       />
                     )) || (
                       <Avatar
-                        name={facility.name}
+                        name={facility.name || ""}
                         square={true}
                         className="h-full w-full rounded-md object-cover"
                       />
@@ -117,7 +121,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                     </div>
                     <div className="mt-2 flex flex-wrap gap-1">
                       <Chip
-                        text={facility.facility_type}
+                        text={facility.facility_type || ""}
                         variant="custom"
                         className="bg-blue-100 text-blue-900"
                         hideBorder
@@ -173,7 +177,9 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                     <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 / facility.bed_count > 0.85
+                        (facility.patient_count || 0) /
+                          (facility.bed_count || 0) >
+                        0.85
                           ? "button-danger-border bg-red-500"
                           : "button-primary-border bg-primary-100"
                       }`}
@@ -185,14 +191,18 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                         icon="l-bed"
                         className={classNames(
                           "mr-2",
-                          facility.patient_count / facility.bed_count > 0.85
+                          (facility.patient_count || 0) /
+                            (facility.bed_count || 0) >
+                            0.85
                             ? "text-white"
                             : "text-primary-600",
                         )}
                       />{" "}
                       <dt
                         className={`text-sm font-semibold ${
-                          facility.patient_count / facility.bed_count > 0.85
+                          (facility.patient_count || 0) /
+                            (facility.bed_count || 0) >
+                          0.85
                             ? "text-white"
                             : "text-secondary-700"
                         }`}

src/Components/Facility/FacilityHome.tsx

@@ -75,6 +75,20 @@ export const FacilityHome = ({ facilityId }: Props) => {
     },
   });
 
+  const spokesQuery = useQuery(routes.getFacilitySpokes, {
+    pathParams: {
+      id: facilityId,
+    },
+    silent: true,
+  });
+
+  const hubsQuery = useQuery(routes.getFacilityHubs, {
+    pathParams: {
+      id: facilityId,
+    },
+    silent: true,
+  });
+
   const handleDeleteClose = () => {
     setOpenDeleteDialog(false);
   };
@@ -93,13 +107,6 @@ export const FacilityHome = ({ facilityId }: Props) => {
     });
   };
 
-  const spokesQuery = useQuery(routes.getFacilitySpokes, {
-    pathParams: {
-      id: facilityId,
-    },
-    silent: true,
-  });
-
   if (isLoading) {
     return <Loading />;
   }
@@ -274,7 +281,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
                           />
                         </div>
                       </div>
-                      {!!spokesQuery.data?.results.length && (
+                      {!!spokesQuery.data?.results?.length && (
                         <div className="mt-4 flex items-center gap-3">
                           <div id="spokes-view">
                             <h1 className="text-base font-semibold text-[#B9B9B9]">
@@ -291,6 +298,24 @@ export const FacilityHome = ({ facilityId }: Props) => {
                           </div>
                         </div>
                       )}
+
+                      {!!hubsQuery.data?.results?.length && (
+                        <div className="mt-4 flex items-center gap-3">
+                          <div id="hubs-view">
+                            <h1 className="text-base font-semibold text-[#B9B9B9]">
+                              {t("hubs")}
+                            </h1>
+                            <div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-2">
+                              {hubsQuery.data.results.map((hub) => (
+                                <FacilityBlock
+                                  facility={hub.hub_object}
+                                  redirect={false}
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+                      )}
                     </div>
                   </div>
                 </div>

src/Components/Facility/models.tsx

@@ -87,8 +87,8 @@ export interface FacilityModel {
   latitude?: string;
   longitude?: string;
   kasp_empanelled?: boolean;
-  patient_count?: string;
-  bed_count?: string;
+  patient_count?: number;
+  bed_count?: number;
 }
 
 export enum SpokeRelationship {

src/Redux/api.tsx

@@ -387,6 +387,12 @@ const routes = {
     TBody: Type<Partial<FacilityModel>>(),
   },
 
+  getFacilityHubs: {
+    path: "/api/v1/facility/{id}/hubs",
+    method: "GET",
+    TRes: Type<PaginatedResponse<FacilitySpokeModel>>(),
+  },
+
   getFacilitySpokes: {
     path: "/api/v1/facility/{id}/spokes/",
     method: "GET",