en.json updated, debouncing is added all the requested changes are done

public/locale/en.json

@@ -106,6 +106,8 @@
   "LOG_UPDATE_FIELD_LABEL__ventilator_spo2": "SpO₂",
   "LOG_UPDATE_UPDATED_NOTIFICATION": "{{ roundType }} updated successfully",
   "NORMAL": "Brief Update",
+  "no_sub_organizations_found": "No sub_organizations found",
+  "no_organizations_found_matching": "No organizations found matching",
   "NURSING_CARE_PROCEDURE__ascitic_tapping": "Ascitic Tapping",
   "NURSING_CARE_PROCEDURE__bed_bath": "Bed Bath",
   "NURSING_CARE_PROCEDURE__catheter_care": "Catheter Care",
@@ -1609,6 +1611,8 @@
   "search": "Search",
   "search_by_emergency_contact_phone_number": "Search by Emergency Contact Phone Number",
   "search_by_emergency_phone_number": "Search by Emergency Phone Number",
+  "search_facilities": "Search Facilities",
+  "search_by_name": "Search by name",
   "search_by_patient_name": "Search by Patient Name",
   "search_by_patient_no": "Search by Patient Number",
   "search_by_phone_number": "Search by Phone Number",
@@ -1700,6 +1704,7 @@
   "spokes": "Spoke Facilities",
   "srf_id": "SRF ID",
   "staff_list": "Staff List",
+  "staff": "Staff",
   "start_consultation": "Start Consultation",
   "start_datetime": "Start Date/Time",
   "start_dosage": "Start Dosage",
@@ -1930,4 +1935,4 @@
   "you_need_at_least_a_location_to_create_an_assest": "You need at least a location to create an assest.",
   "zoom_in": "Zoom In",
   "zoom_out": "Zoom Out"
-}
+}

src/pages/FacilityOrganization/FacilityOrganizationView.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
 import { useState } from "react";
-
+import { useTranslation } from "react-i18next";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Badge } from "@/components/ui/badge";
@@ -32,7 +32,7 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) {
     searchQuery,
     500,
   );
-
+ const {t}=useTranslation();
   const { data: children, isLoading } = useQuery({
     queryKey: [
       "facilityOrganization",
@@ -58,11 +58,11 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) {
     <FacilityOrganizationLayout id={id} facilityId={facilityId}>
       <div className="space-y-6">
         <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-          <h2 className="text-lg font-semibold">Organizations</h2>
+          <h2 className="text-lg font-semibold">{t("organizations")}</h2>
           <div className="flex items-center gap-4 w-full sm:w-auto">
             <div className="w-full sm:w-72">
               <Input
-                placeholder="Search by name..."
+                placeholder={t("search_by_name")}
                 value={searchQuery}
                 onChange={(e) => {
                   setSearchQuery(e.target.value);
@@ -138,8 +138,8 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) {
                 <Card className="col-span-full">
                   <CardContent className="p-6 text-center text-gray-500">
                     {searchQuery
-                      ? `No organizations found matching "${searchQuery}"`
-                      : "No sub-organizations found."}
+                      ? `${t("no_organizations_found_matching")} "${searchQuery}"`
+                      : `${t("no_sub_organizations_found")}`}
                   </CardContent>
                 </Card>
               )}

src/pages/Organization/OrganizationFacilities.tsx

@@ -18,6 +18,7 @@ import { BaseFacility } from "@/types/facility/facility";
 
 import AddFacilitySheet from "./components/AddFacilitySheet";
 import OrganizationLayout from "./components/OrganizationLayout";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   id: string;
@@ -32,7 +33,7 @@ export default function OrganizationFacilities({
     useFilters({ limit: 14, cacheBlacklist: ["facility"] });
 
   const [debouncedParams, setDebouncedParams] = useDebouncedState(qParams, 500);
-
+  const { t } = useTranslation();
   const { data: facilities, isLoading } = useQuery({
     queryKey: ["organizationFacilities", id, debouncedParams],
     queryFn: query(routes.facility.list, {
@@ -63,7 +64,7 @@ export default function OrganizationFacilities({
         <div className="flex gap-2">
           <Input
             type="text"
-            placeholder="Search facilities..."
+            placeholder={t("search_facilities")}
             value={qParams.name || ""}
             onChange={(e) => {
               updateQuery({
@@ -106,7 +107,7 @@ export default function OrganizationFacilities({
           ) : facilities?.results?.length === 0 ? (
             <Card className="col-span-full">
               <CardContent className="p-6 text-center text-gray-500">
-                No facilities found.
+                {t("no_facilities_found")}
               </CardContent>
             </Card>
           ) : (
@@ -149,7 +150,7 @@ export default function OrganizationFacilities({
                       href={`/facility/${facility.id}`}
                       className="text-sm text-primary hover:underline"
                     >
-                      View Facility
+                     {t("view_facility")}
                       <Button
                         variant="ghost"
                         size="icon"

src/pages/Organization/OrganizationView.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
 import { useState } from "react";
-
+import { useTranslation } from "react-i18next";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Badge } from "@/components/ui/badge";
@@ -32,9 +32,8 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
     searchQuery,
     500,
   );
-
   const limit = 12; // 3x4 grid
-
+  const { t } = useTranslation();
   const { data: children, isLoading } = useQuery({
     queryKey: ["organization", id, "children", page, limit, debouncedParams],
     queryFn: query(organizationApi.list, {
@@ -59,7 +58,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
           <h2 className="text-lg font-semibold">Organizations</h2>
           <div className="w-72">
             <Input
-              placeholder="Search by name..."
+              placeholder={t("search_by_name")}
               value={searchQuery}
               onChange={(e) => {
                 setSearchQuery(e.target.value);
@@ -137,8 +136,8 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
                 <Card className="col-span-full">
                   <CardContent className="p-6 text-center text-gray-500">
                     {searchQuery
-                      ? `No organizations found matching "${searchQuery}"`
-                      : "No sub-organizations found."}
+                      ? `${t("no_organizations_found_matching")} "${searchQuery}"`
+                      : `${t("no_sub_organizations_found")}`}
                   </CardContent>
                 </Card>
               )}