add count with heading

ohcnetwork · Jan 22, 2025 · 05d91ad · 05d91ad
1 parent 9f2d856
commit 05d91ad
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 7 deletions.
diff --git a/public/locale/en.json b/public/locale/en.json
@@ -981,6 +981,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",
@@ -1014,6 +1016,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",
@@ -2166,8 +2170,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",

diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx
@@ -162,7 +162,10 @@ export default function FacilityUsers(props: { facilityId: string }) {
           className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3"
           variant="outline"
         >
-          {t("user_count", { count: userListData?.count ?? 0 })}
+          {t("entity_count", {
+            count: userListData?.count || 0,
+            entity: "User",
+          })}
         </Badge>
       }
     >

diff --git a/src/pages/Organization/OrganizationFacilities.tsx b/src/pages/Organization/OrganizationFacilities.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -57,7 +58,17 @@ 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">
+            <h2 className="text-lg font-semibold">{t("facilities")}</h2>
+            <Badge
+              className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3"
+              variant="outline"
+            >
+              {t("facility_count", {
+                count: facilities?.count || 0,
+              })}
+            </Badge>
+          </div>
           <AddFacilitySheet organizationId={id} />
         </div>
 

diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import RecordMeta from "@/CAREUI/display/RecordMeta";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 
@@ -96,7 +97,18 @@ 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">
+            <h2 className="text-lg font-semibold">{t("patients")}</h2>
+            <Badge
+              className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3"
+              variant="outline"
+            >
+              {t("entity_count", {
+                count: patients?.count || 0,
+                entity: "Patient",
+              })}
+            </Badge>
+          </div>
         </div>
 
         <SearchByMultipleFields

diff --git a/src/pages/Organization/OrganizationUsers.tsx b/src/pages/Organization/OrganizationUsers.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -56,7 +57,18 @@ 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">
+            <h2 className="text-lg font-semibold">{t("organizations")}</h2>
+            <Badge
+              className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3"
+              variant="outline"
+            >
+              {t("entity_count", {
+                count: users?.count || 0,
+                entity: "User",
+              })}
+            </Badge>
+          </div>
           <div className="flex gap-2">
             <AddUserSheet
               open={openAddUserSheet}

diff --git a/src/pages/Organization/OrganizationView.tsx b/src/pages/Organization/OrganizationView.tsx
@@ -51,7 +51,18 @@ 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">
+            <h2 className="text-lg font-semibold">{t("organizations")}</h2>
+            <Badge
+              className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3"
+              variant="outline"
+            >
+              {t("entity_count", {
+                count: children?.results.length || 0,
+                entity: "Organization",
+              })}
+            </Badge>
+          </div>
           <div className="w-72">
             <Input
               placeholder="Search by name..."