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) { >
-

{t("patients")}

+
+ +
- {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;