src/pages/Organization/components/OrganizationSelector.tsx (2)

23-24: Add documentation for new props.
Prefer adding a short explanation or a JSDoc comment for parentSelectedLevels and errorMessage to guide future maintainers on their usage.

---

170-171: Push only meaningful errors.
errors={[props.errorMessage || ""]} might cause an empty string to appear if there's no actual error. Consider conditionally passing an empty array instead to avoid confusing UI.

-errors={[props.errorMessage || ""]}
+errors={props.errorMessage ? [props.errorMessage] : []}

src/components/Patient/PatientRegistration.tsx (4)

6-6: Confirm i18n usage for toast messages.
Since you are using translations in other notifications, consider localizing toast errors to maintain a consistent user experience.

---

208-213: Consider grouping pincode org fetch logic.
The logic fetches the state org first, then sets selectedLevels to [] early if state org is not found. Consider returning a partial selection if the state is found but not the district – or add a fallback mechanism.

---

326-340: Add robust error details.
toast.error("Error fetching organization") might leave users uncertain about the exact cause. Consider including the organization name in the error text or using a more descriptive message.

---

625-625: Improve UX for disabled text area.
You correctly remove editing with cursor-not-allowed if addresses match. Optionally, add a tooltip or note explaining why the field is disabled for clarity.

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

src/hooks/useOrganization.ts (2)

7-12: Add User Facing Documentation Comment for UseOrganizationParams

Though this interface is self-explanatory, adding a short JSDoc comment or code comment could clarify the accepted parameters for future maintainers and reduce confusion about which fields are optional.

---

20-31: Ensure error handling is robust

While isError is returned, there is no specialized error handling in the queryFn or an onError callback for the query. If additional failover or fallback logic is required when the API call fails, consider adding a custom onError in the useQuery options or a shared error boundary.

src/hooks/useStateAndDistrictFromPincode.ts (3)

14-16: Clarify hook naming or add doc comment

The function name useStateAndDistrictFromPincode is descriptive, but consider adding inline documentation about how it fetches pincode details, extracts the state and district, and loads the corresponding organizations. This can improve maintainability.

---

43-53: Consider concurrency or caching benefits

The second organization query is nested behind the first's result for stateOrg?.id. This is logical. If you anticipate repeated lookups or the same pincodes, ensure that React Query’s caching strategy is adequately configured to minimize network calls.

---

56-61: Combine isError states carefully

This hook merges three possible error states into one, which is correct for a simplified approach. However, distinct error messages can help users identify which step failed (e.g., the pincode fetch vs. the state org fetch). Consider returning more granular error states if needed.

src/components/Patient/PatientRegistration.tsx (7)

6-6: Check the usage of CareIcon import

The CareIcon import is newly added. Verify whether all necessary icons are being efficiently imported. For performance, you might consider a dynamic icon library approach if your codebase loads many icons.

---

30-30: Mention the custom hook in documentation or inline comments

useStateAndDistrictFromPincode is introduced here. A short comment indicating its purpose in the patient registration flow (e.g., “Auto-fills state and district based on pincode”) could guide future contributors.

---

79-79: Refactor state management for clarity

selectedLevels and setSelectedLevels hold the acquired organizations. Consider whether these should be combined or abstracted to a single object (like geoOrganization) if there’s no plan to scale beyond two levels. This might simplify future expansions.

---

189-191: Decouple logic from the UI effect

The useStateAndDistrictFromPincode hook is invoked inline here. If you anticipate using the same logic in other forms, it might be beneficial to centralize or abstract the effect of pincode changes, e.g., in a custom reducer or separate function for clarity.

---

194-206: Enhance user feedback for partial auto-fill

If some part of the data can’t be automatically derived from the pincode (e.g., the district wasn’t found), the pincode_autofill message still appears if levels.length > 0. Consider either partial messages or fallback for missing details.

---

580-580: UI clarity for disabled text area

When sameAddress is true, the permanent address is disabled. The cursor-not-allowed is good, but consider adding a tooltip or helper text to clarify that the permanent address matches the current address. This could improve UX.

---

Line range hint 596-606: Refine timed feedback approach

You’re displaying _showAutoFilledPincode for 2 seconds to highlight auto-filling. This is a subtle user experience detail. If users need more time or have accessibility needs, consider a more stable or dismissible notification.

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

src/pages/Organization/components/OrganizationSelector.tsx (3)

33-36: Consider optimizing for reference stability.

While the implementation is functionally correct, consider adding a deep comparison to prevent unnecessary re-renders when only the reference of parentSelectedLevels changes but the content remains the same.

  useEffect(() => {
    if (parentSelectedLevels) {
+     const hasChanged = JSON.stringify(parentSelectedLevels) !== JSON.stringify(selectedLevels);
+     if (hasChanged) {
        setSelectedLevels(parentSelectedLevels);
+     }
    }
  }, [parentSelectedLevels]);

Also applies to: 123-127

---

108-120: Consider simplifying the control flow.

While the logic is correct, the nested if-else structure could be simplified for better readability.

  const handleEdit = (level: number) => {
    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("");
-     }
-   }
+   const lastOrg = newLevels[newLevels.length - 1];
+   const newValue = lastOrg && !lastOrg.has_children ? lastOrg.id : "";
+   onChange(newValue);
  };

---

170-171: Simplify required prop and improve error handling.

Two minor improvements could be made:

1. The double negation (!!) is unnecessary since required is already boolean
2. Consider passing undefined instead of an empty string array when there's no error

-           required={!!required}
-           errors={[props.errorMessage || ""]}
+           required={required}
+           errors={props.errorMessage ? [props.errorMessage] : undefined}

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

src/hooks/useOrganization.ts (2)

23-24: Consider enhancing the query key specificity.

The current query key ["organization", orgType, name, parentId] could potentially cause cache collisions. Consider adding a more specific prefix.

-    queryKey: ["organization", orgType, name, parentId],
+    queryKey: ["organization", "list", orgType, name, parentId],

---

37-37: Enhance error toast message with more context.

The generic error message could be more helpful by including the context of what failed.

-  isError && toast.error(t("organizations_fetch_error"));
+  isError && toast.error(t("organizations_fetch_error", { context: `${orgType}${parentId ? ' for parent ' + parentId : ''}` }));

src/hooks/useStateAndDistrictFromPincode.ts (2)

58-62: Consider combining error notifications.

Multiple toast notifications for state and district errors might overwhelm the user. Consider combining them into a single notification.

-  isStateError && toast.info(t("pincode_state_auto_fill_error"));
-
-  isDistrictError &&
-    !isStateError &&
-    toast.info(t("pincode_district_auto_fill_error"));
+  useEffect(() => {
+    if (isStateError || isDistrictError) {
+      const errors = [];
+      if (isStateError) errors.push(t("pincode_state_auto_fill_error"));
+      if (isDistrictError && !isStateError) errors.push(t("pincode_district_auto_fill_error"));
+      toast.info(errors.join(". "));
+    }
+  }, [isStateError, isDistrictError, t]);

---

34-56: Consider combining state and district queries.

The separate queries for state and district organizations could be combined using a single useQuery to reduce network requests.

+  const { data: orgs, isLoading, isError } = useQuery({
+    queryKey: ["organizations", "state-district", stateName, districtName],
+    queryFn: async () => {
+      const stateOrg = await organizationApi.list({ 
+        org_type: "govt",
+        name: stateName 
+      });
+      if (stateOrg.results?.[0]) {
+        const districtOrg = await organizationApi.list({
+          org_type: "govt",
+          parent: stateOrg.results[0].id,
+          name: districtName
+        });
+        return {
+          stateOrg: stateOrg.results[0],
+          districtOrg: districtOrg.results[0]
+        };
+      }
+      return { stateOrg: null, districtOrg: null };
+    },
+    enabled: !!stateName && !!districtName
+  });

src/components/Patient/PatientRegistration.tsx (2)

189-206: Consider extracting form management logic into a custom hook.

The form management logic, including the pincode-based autofill functionality, could be extracted into a custom hook to improve maintainability and reusability.

// usePatientRegistrationForm.ts
export function usePatientRegistrationForm(initialData?: Partial<PatientModel>) {
  const [form, setForm] = useState<Partial<PatientModel>>(initialData || {
    nationality: "India",
    phone_number: "+91",
    emergency_phone_number: "+91",
  });
  
  const { stateOrg, districtOrg } = useStateAndDistrictFromPincode({
    pincode: form.pincode?.toString() || "",
  });
  
  const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
  const [showAutoFilledPincode, setShowAutoFilledPincode] = useState(false);

  useEffect(() => {
    const levels: Organization[] = [];
    if (stateOrg) levels.push(stateOrg);
    if (districtOrg) levels.push(districtOrg);
    setSelectedLevels(levels);

    if (levels.length === 2) {
      setShowAutoFilledPincode(true);
      const timer = setTimeout(() => {
        setShowAutoFilledPincode(false);
      }, 2000);
      return () => clearTimeout(timer);
    }
  }, [stateOrg, districtOrg]);

  return {
    form,
    setForm,
    selectedLevels,
    showAutoFilledPincode
  };
}

---

Line range hint 596-606: Extract autofill notification into a separate component.

The autofill notification UI could be extracted into a reusable component.

// AutofillNotification.tsx
interface AutofillNotificationProps {
  show: boolean;
  message: string;
}

function AutofillNotification({ show, message }: AutofillNotificationProps) {
  if (!show) return null;
  
  return (
    <div>
      <CareIcon
        icon="l-check-circle"
        className="mr-2 text-sm text-green-500"
      />
      <span className="text-sm text-primary-500">
        {message}
      </span>
    </div>
  );
}

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro