Feat: Display total no. of entities with heading in Organization

public/locale/en.json

@@ -987,6 +987,8 @@
   "entered-in-error": "Entered in error",
   "entered_in_error": "Entered in Error",
   "entered_in_error_warning": "This action cannot be undone. The appointment will be marked as entered in error and removed from the system.",
+  "entity_count_one": "{{count}} {{entity}}",
+  "entity_count_other": "{{count}} {{entity}}s",
   "error_404": "Error 404",
   "error_deleting_shifting": "Error while deleting Shifting record",
   "error_fetching_facility_data": "Error while fetching facility data",
@@ -1020,6 +1022,8 @@
   "facility": "Facility",
   "facility_added_successfully": "Facility created successfully",
   "facility_consent_requests_page_title": "Patient Consent List",
+  "facility_count_one": "{{count}} Facility",
+  "facility_count_other": "{{count}} Facilities ",
   "facility_district_name": "Facility/District Name",
   "facility_district_pincode": "Facility/District/Pincode",
   "facility_for_care_support": "Facility for Care Support",
@@ -2184,8 +2188,6 @@
   "use_phone_number_for_emergency": "Use this phone number for emergency contact",
   "user_add_error": "Error while adding User",
   "user_added_successfully": "User added successfully",
-  "user_count_one": "{{count}} user",
-  "user_count_other": "{{count}} users",
   "user_delete_error": "Error while deleting User",
   "user_deleted_successfully": "User Deleted Successfully",
   "user_deleted_successfuly": "User Deleted Successfully",

src/components/Facility/FacilityUsers.tsx

@@ -71,10 +71,15 @@ export default function FacilityUsers(props: { facilityId: string }) {
       title={t("users_management")}
       componentRight={
         <Badge
-          className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3"
+          className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3 w-max"
           variant="outline"
         >
-          {t("user_count", { count: userListData?.count ?? 0 })}
+          {userListLoading
+            ? "Loading..."
+            : t("entity_count", {
+                count: userListData?.count ?? 0,
+                entity: "User",
+              })}
         </Badge>
       }
     >

src/pages/Organization/OrganizationFacilities.tsx

@@ -19,6 +19,7 @@ import { BaseFacility } from "@/types/facility/facility";
 
 import AddFacilitySheet from "./components/AddFacilitySheet";
 import EditFacilitySheet from "./components/EditFacilitySheet";
+import EntityBadge from "./components/EntityBadge";
 import OrganizationLayout from "./components/OrganizationLayout";
 
 interface Props {
@@ -58,7 +59,14 @@ export default function OrganizationFacilities({
     <OrganizationLayout id={id} navOrganizationId={navOrganizationId}>
       <div className="space-y-6">
         <div className="flex justify-between items-center">
-          <h2 className="text-lg font-semibold">{t("facilities")}</h2>
+          <div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">
+            <EntityBadge
+              title={t("facilities")}
+              count={facilities?.count}
+              isLoading={isLoading}
+              customTranslation="facility_count"
+            />
+          </div>
           <AddFacilitySheet organizationId={id} />
         </div>
 

src/pages/Organization/OrganizationPatients.tsx

@@ -20,6 +20,7 @@ import { Patient } from "@/types/emr/newPatient";
 import { Organization } from "@/types/organization/organization";
 import organizationApi from "@/types/organization/organizationApi";
 
+import EntityBadge from "./components/EntityBadge";
 import OrganizationLayout from "./components/OrganizationLayout";
 
 interface Props {
@@ -97,7 +98,14 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
     >
       <div className="space-y-6">
         <div className="flex justify-between items-center">
-          <h2 className="text-lg font-semibold">{t("patients")}</h2>
+          <div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">
+            <EntityBadge
+              title={t("patients")}
+              count={patients?.count}
+              isLoading={isLoading}
+              translationParams={{ entity: "Patient" }}
+            />
+          </div>
         </div>
 
         <SearchByMultipleFields

src/pages/Organization/OrganizationUsers.tsx

@@ -18,6 +18,7 @@ import organizationApi from "@/types/organization/organizationApi";
 
 import AddUserSheet from "./components/AddUserSheet";
 import EditUserRoleSheet from "./components/EditUserRoleSheet";
+import EntityBadge from "./components/EntityBadge";
 import LinkUserSheet from "./components/LinkUserSheet";
 import OrganizationLayout from "./components/OrganizationLayout";
 
@@ -57,7 +58,14 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
     <OrganizationLayout id={id} navOrganizationId={navOrganizationId}>
       <div className="space-y-6">
         <div className="flex justify-between items-center">
-          <h2 className="text-lg font-semibold">{t("users")}</h2>
+          <div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">
+            <EntityBadge
+              title={t("users")}
+              count={users?.count}
+              isLoading={isLoadingUsers}
+              translationParams={{ entity: "User" }}
+            />
+          </div>
           <div className="flex gap-2">
             <AddUserSheet
               open={openAddUserSheet}

src/pages/Organization/OrganizationView.tsx

@@ -17,6 +17,7 @@ import query from "@/Utils/request/query";
 import { Organization, getOrgLabel } from "@/types/organization/organization";
 import organizationApi from "@/types/organization/organizationApi";
 
+import EntityBadge from "./components/EntityBadge";
 import OrganizationLayout from "./components/OrganizationLayout";
 
 interface Props {
@@ -52,7 +53,14 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
     <OrganizationLayout id={id} navOrganizationId={navOrganizationId}>
       <div className="space-y-6">
         <div className="flex flex-col justify-between items-start gap-4">
-          <h2 className="text-lg font-semibold">{t("organizations")}</h2>
+          <div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">
+            <EntityBadge
+              title={t("organizations")}
+              count={children?.count}
+              isLoading={isLoading}
+              translationParams={{ entity: "Organization" }}
+            />
+          </div>
           <div className="w-72">
             <Input
               placeholder="Search by name..."

src/pages/Organization/components/EntityBadge.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import { Badge } from "@/components/ui/badge";
+
+interface EntityBadgeProps {
+  title: string;
+  count?: number | null | undefined;
+  isLoading: boolean;
+  translationParams?: Record<string, string>;
+  customTranslation?: string;
+}
+
+const EntityBadge: React.FC<EntityBadgeProps> = ({
+  title,
+  count,
+  isLoading,
+  translationParams,
+  customTranslation,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex items-center">
+      <h2 className="text-lg font-semibold">{title}</h2>
+      <Badge
+        className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3 w-max"
+        variant="outline"
+      >
+        {isLoading
+          ? "Loading..."
+          : t(customTranslation || "entity_count", {
+              count: count ?? 0,
+              ...translationParams,
+            })}
+      </Badge>
+    </div>
+  );
+};
+
+export default EntityBadge;