Fix state & district autofill & multiple other small issues in Patient Registration page

src/components/Patient/PatientRegistration.tsx

@@ -3,6 +3,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { navigate, useQueryParams } from "raviger";
 import { Fragment, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
 import SectionNavigator from "@/CAREUI/misc/SectionNavigator";
 
@@ -47,6 +48,7 @@ import {
 } from "@/Utils/utils";
 import OrganizationSelector from "@/pages/Organization/components/OrganizationSelector";
 import { PatientModel, validatePatient } from "@/types/emr/patient";
+import organizationApi from "@/types/organization/organizationApi";
 
 import Autocomplete from "../ui/autocomplete";
 import InputWithError from "../ui/input-with-error";
@@ -79,6 +81,7 @@ export default function PatientRegistration(
   const [suppressDuplicateWarning, setSuppressDuplicateWarning] =
     useState(!!patientId);
   const [debouncedNumber, setDebouncedNumber] = useState<string>();
+  const [selectedLevels, setSelectedLevels] = useState<any[]>([]);
 
   const sidebarItems = [
     { label: t("patient__general-info"), id: "general-info" },
@@ -201,6 +204,19 @@ export default function PatientRegistration(
     const { statename: _stateName, districtname: _districtName } =
       pincodeDetails;
 
+    const stateOrg = await fetchOrganizationByName(_stateName);
+    if (!stateOrg) {
+      setSelectedLevels([]);
+      return;
+    }
+
+    const districtOrg = await fetchOrganizationByName(
+      _districtName,
+      stateOrg.id,
+    );
+
+    setSelectedLevels([stateOrg, districtOrg]);
+
     setShowAutoFilledPincode(true);
     setTimeout(() => {
       setShowAutoFilledPincode(false);
@@ -304,6 +320,22 @@ export default function PatientRegistration(
     return <Loading />;
   }
 
+  async function fetchOrganizationByName(name: string, parentId?: string) {
+    try {
+      const data = await query(organizationApi.list, {
+        queryParams: {
+          org_type: "govt",
+          parent: parentId || "",
+          name,
+        },
+      })({ signal: new AbortController().signal });
+      return data.results?.[0];
+    } catch (error) {
+      toast.error("Error fetching organization");
+      return undefined;
+    }
+  }
+
   return (
     <Page title={title}>
       <hr className="mt-4" />
@@ -587,6 +619,7 @@ export default function PatientRegistration(
                   setForm((f) => ({ ...f, permanent_address: e.target.value }))
                 }
                 disabled={sameAddress}
+                className={sameAddress ? "cursor-not-allowed" : ""}
               />
             </InputWithError>
             {/* <br />
@@ -637,12 +670,14 @@ export default function PatientRegistration(
                 <>
                   <OrganizationSelector
                     required={true}
+                    parentSelectedLevels={selectedLevels}
                     onChange={(value) =>
                       setForm((f) => ({
                         ...f,
                         geo_organization: value,
                       }))
                     }
+                    errorMessage={errors.geo_organization?.[0]}
                   />
                 </>
               )}

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";
 
@@ -20,6 +20,8 @@ interface OrganizationSelectorProps {
   onChange: (value: string) => void;
   required?: boolean;
   authToken?: string;
+  parentSelectedLevels?: Organization[];
+  errorMessage?: string;
 }
 
 interface AutoCompleteOption {
@@ -28,8 +30,10 @@ interface AutoCompleteOption {
 }
 
 export default function OrganizationSelector(props: OrganizationSelectorProps) {
-  const { onChange, required } = props;
-  const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
+  const { onChange, required, parentSelectedLevels } = props;
+  const [selectedLevels, setSelectedLevels] = useState<Organization[]>(
+    parentSelectedLevels || [],
+  );
   const [searchQuery, setSearchQuery] = useDebouncedState("", 500);
 
   const headers = props.authToken
@@ -105,9 +109,27 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
   };
 
   const handleEdit = (level: number) => {
-    setSelectedLevels((prev) => prev.slice(0, level));
+    const newLevels = selectedLevels.slice(0, level);
+    setSelectedLevels(newLevels);
+
+    if (!newLevels.length) {
+      onChange("");
+    } else {
+      const lastOrg = newLevels[newLevels.length - 1];
+      if (!lastOrg.has_children) {
+        onChange(lastOrg.id);
+      } else {
+        onChange("");
+      }
+    }
   };
 
+  useEffect(() => {
+    if (parentSelectedLevels) {
+      setSelectedLevels(parentSelectedLevels);
+    }
+  }, [parentSelectedLevels]);
+
   return (
     <>
       {/* Selected Levels */}
@@ -145,7 +167,8 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
         <div>
           <InputWithError
             label={ORGANIZATION_LEVELS.govt[selectedLevels.length]}
-            required={selectedLevels.length === 0 && required}
+            required={!!required}
+            errors={[props.errorMessage || ""]}
           >
             <Autocomplete
               value=""