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

35-55: Enhance defensive checks around JSON parsing.
Currently, a try/catch block is in place to catch JSON.parse errors, logging them to the console. Consider adding a fallback path or early return to ensure the component’s state remains stable in edge cases (e.g., an empty string or invalid structure) to avoid undesired behavior.

 useEffect(() => {
   if (value) {
     try {
       const parsedValue =
         typeof value === "string" ? JSON.parse(value) : value;
       if (parsedValue) {
         // ...
       }
     } catch (e) {
+      setSelectedLevels([]);
       console.error("Invalid value for geo_organization:", e);
     }
   }
 }, [value]);

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

src/components/Facility/FacilityCreate.tsx (1)

Line range hint 523-534: Internationalize visibility settings strings.

The visibility settings section contains hardcoded English strings. These should be internationalized for consistency with the rest of the application.

 <FormLabel className="text-base">
-  Make this facility public
+  {t("make_facility_public")}
 </FormLabel>
 <p className="text-sm text-muted-foreground">
-  When enabled, this facility will be visible to the
-  public and can be discovered by anyone using the
-  platform
+  {t("facility_public_description")}
 </p>

src/components/Facility/FacilityForm.tsx (2)

58-58: Improve the validation error message for 'geo_organization'

The error message for the geo_organization field is currently set to "required", which might not be informative for users. Consider providing a more descriptive message to enhance user understanding.

Apply this diff to improve the error message:

-      geo_organization: z.string().min(1, { message: "required" }),
+      geo_organization: z.string().min(1, { message: "Geo organization is required" }),

---

396-405: Synchronize 'geo_organization' value with form state

The value prop of OrganizationSelector is set to facilityData?.geo_organization, which may not update if the user changes the field. To keep the component in sync with the form state, consider using form.watch("geo_organization").

Apply this diff to synchronize the value:

-                    value={facilityData?.geo_organization}
+                    value={form.watch("geo_organization")}

src/pages/Organization/components/AddFacilitySheet.tsx (1)

16-16: Align component naming with file name for consistency

The component is named CreateFacilityForm but is imported from "FacilityForm". For clarity and consistency, consider renaming the component or updating the import statement to match the file name.

If the component is intended to be FacilityForm, update the export and import:

In FacilityForm.tsx:

- export default function CreateFacilityForm(props: FacilityProps) {
+ export default function FacilityForm(props: FacilityProps) {

In AddFacilitySheet.tsx:

- import CreateFacilityForm from "@/components/Facility/FacilityForm";
+ import FacilityForm from "@/components/Facility/FacilityForm";

Alternatively, if the component name is correct, consider renaming the file to CreateFacilityForm.tsx.

src/components/Facility/FacilityCreate.tsx (2)

Line range hint 91-106: Simplify phone number validation logic.

The current validation combines multiple checks in a way that might be confusing. Consider extracting this into a separate validator function for better maintainability.

+const validatePhoneNumber = (value: string) => {
+  return PhoneNumberValidator(["mobile", "landline"])(value) !== undefined && phonePreg(value);
+};
+
 phone_number: z
   .string()
   .min(1, { message: t("required") })
-  .refine(
-    (val: string) => {
-      if (
-        !PhoneNumberValidator(["mobile", "landline"])(val) === undefined ||
-        !phonePreg(val)
-      ) {
-        return false;
-      }
-      return true;
-    },
-    {
-      message: t("invalid_phone_number"),
-    },
-  ),
+  .refine(validatePhoneNumber, { message: t("invalid_phone_number") }),

---

224-232: Enhance error handling for pincode queries.

The current error handling only shows a generic "Invalid pincode" message. Consider providing more specific error information to help users understand and resolve the issue.

 if (isPincodeError) {
-  toast.error("Invalid pincode");
+  toast.error(t("invalid_pincode_details"), {
+    description: t("please_check_pincode_and_try_again"),
+  });
 }

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

src/Utils/utils.ts (3)

193-196: Use i18n for error messages

The error message is hardcoded. Since the file already imports t from i18next, use it for internationalization.

-    toast.error("Invalid pincode");
+    toast.error(t("invalid_pincode"));

---

193-196: Add TypeScript interface for the API response

Define an interface for the API response to improve type safety and code maintainability.

interface PincodeApiResponse {
  records: Array<{
    pincode: string;
    officename: string;
    statename: string;
    districtname: string;
    // add other fields as needed
  }>;
}

---

193-196: Consider implementing caching for pincode data

Since pincode data rarely changes, consider implementing a caching mechanism to:

1. Reduce API calls
2. Improve performance
3. Handle rate limiting

src/components/Facility/FacilityForm.tsx (2)

213-213: Consider reducing geolocation timeout.

The current 10-second timeout for geolocation might lead to a poor user experience. Consider reducing it to 5 seconds and providing a retry option.

-        { timeout: 10000 },
+        { timeout: 5000 },

---

220-224: Optimize pincode validation and data fetching.

The current implementation might trigger unnecessary API calls as it validates the pincode on every change.

Consider debouncing the pincode validation:

  const { data: pincodeData } = useQuery({
    queryKey: ["pincodeDetails", pincode],
    queryFn: () => getPincodeDetails(pincode, careConfig.govDataApiKey),
-    enabled: validatePincode(pincode) && pincode != facilityData?.pincode,
+    enabled: validatePincode(pincode) && pincode !== facilityData?.pincode,
+    staleTime: 5 * 60 * 1000, // Cache pincode data for 5 minutes
  });

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

src/components/Facility/FacilityForm.tsx (3)

79-83: Initialize pincode state with form value

The pincode state should be initialized with the form's pincode value to ensure consistency when editing a facility.

-  const [pincode, setPincode] = useState("");
+  const [pincode, setPincode] = useState(form.getValues("pincode") || "");

Also applies to: 89-91

---

130-150: Enhance error handling for API failures

The error handling could be improved in the following ways:

1. Add specific error messages for different API failure scenarios
2. Handle network timeouts
3. Add retry logic for pincode API calls

 const { data: pincodeData } = useQuery({
   queryKey: ["pincodeDetails", pincode],
   queryFn: () => getPincodeDetails(pincode, careConfig.govDataApiKey),
   enabled: validatePincode(pincode) && pincode != facilityData?.pincode,
+  retry: 3,
+  retryDelay: 1000,
+  onError: (error) => {
+    toast.error(t("pincode_fetch_error"));
+  }
 });

Also applies to: 152-158, 220-224

---

392-401: Enhance accessibility for form controls

Consider adding the following accessibility improvements:

1. ARIA labels for the organization selector
2. Loading state announcements for screen readers

 <OrganizationSelector
   required={true}
   value={facilityData?.geo_organization}
   parentSelectedLevels={selectedLevels}
+  aria-label={t("select_organization")}
   onChange={(value) => {
     form.setValue("geo_organization", value);
   }}
 />

Also applies to: 546-570

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

src/components/Facility/FacilityForm.tsx (2)

130-150: Consider enhancing error handling with more specific error messages.

The error handling is good but could be more informative for users.

 onError: (error: Error) => {
   const errorData = error.cause as { errors: { msg: string[] } };
   if (errorData?.errors?.msg) {
     errorData.errors.msg.forEach((msg) => {
       toast.error(msg);
     });
   } else {
-    toast.error(t("facility_update_error"));
+    toast.error(t("facility_update_error"), {
+      description: error.message || t("please_try_again_later")
+    });
   }
 }

---

180-197: Add cleanup to prevent memory leaks.

The form reset effect should handle component unmounting.

 useEffect(() => {
+  let mounted = true;
   if (facilityData) {
+    if (!mounted) return;
     form.reset({
       facility_type: facilityData.facility_type,
       // ... other fields
     });
   }
+  return () => {
+    mounted = false;
+  };
 }, [facilityData, form]);

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

src/components/Facility/FacilityCreate.tsx (1)

224-232: ⚠️ Potential issue

Move error handling to useEffect.

The current error handling can trigger multiple toasts during renders. Move it to useEffect for better user experience.

-if (isPincodeError) {
-  toast.error("Invalid pincode");
-}
+useEffect(() => {
+  if (isPincodeError) {
+    toast.error(t("invalid_pincode"));
+  }
+  return () => {
+    toast.dismiss();
+  };
+}, [isPincodeError, t]);

src/components/Facility/FacilityCreate.tsx (1)

234-250: Add loading states for organization selection.

The organization selection logic should handle loading states to provide better feedback to users.

+const [isLoadingOrg, setIsLoadingOrg] = useState(false);
+
 useEffect(() => {
+  setIsLoadingOrg(true);
   if (stateOrg && districtOrg) {
     setSelectedLevels([stateOrg, districtOrg]);
   } else {
     setSelectedLevels([]);
   }
+  setIsLoadingOrg(false);
 }, [stateOrg, districtOrg]);

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