Edit feature for facilities in organization | pincode, geo_organization info auto populates

public/locale/en.json

@@ -1581,6 +1581,7 @@
   "select_investigation_groups": "Select Investigation Groups",
   "select_investigations": "Select Investigations",
   "select_local_body": "Select Local Body",
+  "select_location_from": "Select location from",
   "select_patient": "Select Patient",
   "select_policy": "Select an Insurance Policy",
   "select_policy_to_add_items": "Select a Policy to Add Items",

src/components/Facility/FacilityCreate.tsx

@@ -146,7 +146,7 @@ export const FacilityCreate = (props: FacilityProps) => {
         name: facilityData.name,
         description: facilityData.description || "",
         features: facilityData.features || [],
-        pincode: facilityData.pincode,
+        pincode: facilityData.pincode?.toString() || "",
         geo_organization: facilityData.geo_organization,
         address: facilityData.address,
         phone_number: facilityData.phone_number,
@@ -214,7 +214,7 @@ export const FacilityCreate = (props: FacilityProps) => {
 
   return (
     <Page
-      title={facilityId ? "Update Facility" : "Create Facility"}
+      title={facilityId ? t("update_facility") : t("create_facility")}
       crumbsReplacements={{
         [facilityId || "????"]: { name: form.watch("name") },
       }}
@@ -329,6 +329,7 @@ export const FacilityCreate = (props: FacilityProps) => {
               <div className="col-span-2 grid grid-cols-2 gap-5">
                 <OrganizationSelector
                   required={true}
+                  value={facilityData?.geo_organization}
                   onChange={(value) => form.setValue("geo_organization", value)}
                 />
               </div>
@@ -411,7 +412,7 @@ export const FacilityCreate = (props: FacilityProps) => {
                         >
                           <CareIcon icon="l-map-marker" className="text-xl" />
                           <span className="tooltip-text tooltip-bottom">
-                            Select location from map
+                            {t("select_location_from")}
                           </span>
                         </Button>
                       </PopoverButton>

src/pages/Organization/components/OrganizationSelector.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -28,10 +28,32 @@ interface AutoCompleteOption {
 }
 
 export default function OrganizationSelector(props: OrganizationSelectorProps) {
-  const { onChange, required } = props;
+  const { value, onChange, required } = props;
   const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
   const [searchQuery, setSearchQuery] = useDebouncedState("", 500);
 
+  useEffect(() => {
+    if (value) {
+      try {
+        const parsedValue =
+          typeof value === "string" ? JSON.parse(value) : value;
+        if (parsedValue) {
+          const levels: Organization[] = [];
+          let current = parsedValue;
+
+          while (current.parent) {
+            levels.unshift(current);
+            current = current.parent;
+          }
+
+          setSelectedLevels(levels);
+        }
+      } catch (e) {
+        console.error("Invalid value for geo_organization:", e);
+      }
+    }
+  }, [value]);
+
   const headers = props.authToken
     ? {
         headers: {
@@ -146,7 +168,7 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
             required={selectedLevels.length === 0 && required}
           >
             <Autocomplete
-              value=""
+              value={selectedLevels[selectedLevels.length - 1]?.id || ""}
               options={getOrganizationOptions(
                 selectedLevels.length === 0
                   ? getAllOrganizations?.results