diff --git a/public/locale/en.json b/public/locale/en.json
index 9aa895900a3..7a3de9f2eb4 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -914,6 +914,8 @@
"enter_year_of_birth_to_verify": "Enter year of birth to verify",
"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",
"environment": "Environment",
"error_404": "Error 404",
"error_deleting_shifting": "Error while deleting Shifting record",
@@ -948,6 +950,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",
@@ -2108,8 +2112,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
index 288feaa187e..76f1dfd008f 100644
--- a/src/components/Facility/FacilityUsers.tsx
+++ b/src/components/Facility/FacilityUsers.tsx
@@ -32,7 +32,7 @@ export default function FacilityUsers(props: { facilityId: string }) {
let usersList: JSX.Element = <>>;
- const { data: userListData, isLoading: userListLoading } = useQuery({
+ const { data: userListData, isFetching: userListFetching } = useQuery({
queryKey: ["facilityUsers", facilityId, qParams],
queryFn: query.debounced(routes.facility.getUsers, {
pathParams: { facility_id: facilityId },
@@ -45,7 +45,7 @@ export default function FacilityUsers(props: { facilityId: string }) {
enabled: !!facilityId,
});
- if (userListLoading || !userListData) {
+ if (userListFetching || !userListData) {
usersList =
activeTab === "card" ? (
@@ -71,10 +71,15 @@ export default function FacilityUsers(props: { facilityId: string }) {
title={t("users_management")}
componentRight={
- {t("user_count", { count: userListData?.count ?? 0 })}
+ {userListFetching
+ ? t("loading")
+ : t("entity_count", {
+ count: userListData?.count ?? 0,
+ entity: "User",
+ })}
}
>
diff --git a/src/components/Questionnaire/QuestionnaireSearch.tsx b/src/components/Questionnaire/QuestionnaireSearch.tsx
index 46a94e59b84..447e38cb349 100644
--- a/src/components/Questionnaire/QuestionnaireSearch.tsx
+++ b/src/components/Questionnaire/QuestionnaireSearch.tsx
@@ -71,7 +71,7 @@ export function QuestionnaireSearch({
icon="l-spinner"
className="mr-2 h-4 w-4 animate-spin"
/>
- Loading...
+ {t("loading")}
>
) : (
{t("add_questionnaire")}
diff --git a/src/pages/Organization/OrganizationFacilities.tsx b/src/pages/Organization/OrganizationFacilities.tsx
index ff55fa2fc04..ee6e36c5930 100644
--- a/src/pages/Organization/OrganizationFacilities.tsx
+++ b/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 {
@@ -35,13 +36,13 @@ export default function OrganizationFacilities({
const { qParams, Pagination, advancedFilter, resultsPerPage, updateQuery } =
useFilters({ limit: 15, cacheBlacklist: ["name"] });
- const { data: facilities, isLoading } = useQuery({
+ const { data: facilities, isFetching } = useQuery({
queryKey: ["organizationFacilities", id, qParams],
queryFn: query.debounced(routes.facility.list, {
queryParams: {
page: qParams.page,
limit: resultsPerPage,
- offset: (qParams.page - 1) * resultsPerPage,
+ offset: ((qParams.page ?? 1) - 1) * resultsPerPage,
organization: id,
name: qParams.name,
...advancedFilter.filter,
@@ -58,7 +59,14 @@ export default function OrganizationFacilities({
-
{t("facilities")}
+
+
+
@@ -82,7 +90,7 @@ export default function OrganizationFacilities({
className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"
data-cy="facility-cards"
>
- {isLoading ? (
+ {isFetching ? (
) : facilities?.results?.length === 0 ? (
diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
index 98cca56915a..927cc9062ea 100644
--- a/src/pages/Organization/OrganizationPatients.tsx
+++ b/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 {
@@ -70,7 +71,7 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
});
};
- const { data: patients, isLoading } = useQuery({
+ const { data: patients, isFetching } = useQuery({
queryKey: ["organizationPatients", id, qParams],
queryFn: query.debounced(organizationApi.listPatients, {
pathParams: { id },
@@ -78,7 +79,7 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
...(organization?.org_type === "govt" && { organization: id }),
page: qParams.page,
limit: resultsPerPage,
- offset: (qParams.page - 1) * resultsPerPage,
+ offset: ((qParams.page ?? 1) - 1) * resultsPerPage,
...advancedFilter.filter,
},
}),
@@ -97,7 +98,14 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
>
- {isLoading ? (
+ {isFetching ? (
) : patients?.results?.length === 0 ? (
diff --git a/src/pages/Organization/OrganizationUsers.tsx b/src/pages/Organization/OrganizationUsers.tsx
index feebdb813ba..479059fa9a3 100644
--- a/src/pages/Organization/OrganizationUsers.tsx
+++ b/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";
@@ -36,14 +37,14 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
const openAddUserSheet = qParams.sheet === "add";
const openLinkUserSheet = qParams.sheet === "link";
- const { data: users, isLoading: isLoadingUsers } = useQuery({
+ const { data: users, isFetching: isFetchingUsers } = useQuery({
queryKey: ["organizationUsers", id, qParams.search, qParams.page],
queryFn: query.debounced(organizationApi.listUsers, {
pathParams: { id },
queryParams: {
username: qParams.search,
limit: resultsPerPage,
- offset: (qParams.page - 1) * resultsPerPage,
+ offset: ((qParams.page ?? 1) - 1) * resultsPerPage,
},
}),
enabled: !!id,
@@ -57,7 +58,14 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
-
{t("users")}
+
+
+
- {isLoadingUsers ? (
+ {isFetchingUsers ? (
diff --git a/src/pages/Organization/OrganizationView.tsx b/src/pages/Organization/OrganizationView.tsx
index faea49a5993..88cb629baf1 100644
--- a/src/pages/Organization/OrganizationView.tsx
+++ b/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 {
@@ -31,7 +32,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
const [searchQuery, setSearchQuery] = useState("");
const limit = 12; // 3x4 grid
- const { data: children, isLoading } = useQuery({
+ const { data: children, isFetching } = useQuery({
queryKey: ["organization", id, "children", page, limit, searchQuery],
queryFn: query.debounced(organizationApi.list, {
queryParams: {
@@ -52,7 +53,14 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
-
{t("organizations")}
+
+
+
- {isLoading ? (
+ {isFetching ? (
diff --git a/src/pages/Organization/components/EntityBadge.tsx b/src/pages/Organization/components/EntityBadge.tsx
new file mode 100644
index 00000000000..c5352163da4
--- /dev/null
+++ b/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;
+ isFetching: boolean;
+ translationParams?: Record
;
+ customTranslation?: string;
+}
+
+const EntityBadge: React.FC = ({
+ title,
+ count,
+ isFetching,
+ translationParams,
+ customTranslation,
+}) => {
+ const { t } = useTranslation();
+
+ return (
+
+
{title}
+
+ {isFetching
+ ? t("loading")
+ : t(customTranslation || "entity_count", {
+ count: count ?? 0,
+ ...translationParams,
+ })}
+
+
+ );
+};
+
+export default EntityBadge;