Tweak logic to work with levels from BE than hardcoded

public/locale/en.json

@@ -1345,6 +1345,7 @@
   "patient_consultation__treatment__summary__spo2": "SpO2",
   "patient_consultation__treatment__summary__temperature": "Temperature",
   "patient_created": "Patient Created",
+  "patient_dashboard": "Patient Dashboard",
   "patient_details": "Patient Details",
   "patient_details_incomplete": "Patient Details Incomplete",
   "patient_face": "Patient Face",
@@ -1604,7 +1605,6 @@
   "select": "Select",
   "select_all": "Select All",
   "select_date": "Select date",
-  "select_district": "Select District",
   "select_eligible_policy": "Select an Eligible Insurance Policy",
   "select_facility_for_discharged_patients_warning": "Facility needs to be selected to view discharged patients.",
   "select_facility_type": "Select Facility Type",
@@ -1614,18 +1614,17 @@
   "select_investigation_groups": "Select Investigation Groups",
   "select_investigations": "Select Investigations",
   "select_local_body": "Select Local Body",
-  "select_localbody": "Select Local Body",
   "select_patient": "Select Patient",
   "select_policy": "Select an Insurance Policy",
   "select_policy_to_add_items": "Select a Policy to Add Items",
   "select_practitioner": "Select Practicioner",
+  "select_previous": "Select previous fields",
   "select_register_patient": "Select/Register Patient",
   "select_role": "Select Role",
   "select_seven_day_period": "Select a seven day period",
   "select_skills": "Select and add some skills",
   "select_time": "Select time",
   "select_time_slot": "Select time slot",
-  "select_ward": "Select Ward",
   "select_wards": "Select wards",
   "self_booked": "Self-booked",
   "send": "Send",
@@ -1665,6 +1664,7 @@
   "show_default_presets": "Show Default Presets",
   "show_patient_presets": "Show Patient Presets",
   "show_unread_notifications": "Show Unread",
+  "sign_in": "Sign In",
   "sign_out": "Sign Out",
   "skill_add_error": "Error while adding skill",
   "skill_added_successfully": "Skill added successfully",

src/pages/Facility/FacilitiesPage.tsx

@@ -73,6 +73,7 @@ export function FacilitiesPage() {
   const GetLoginHeader = () => {
     if (
       tokenData &&
+      tokenData.createdAt &&
       dayjs(tokenData.createdAt).isAfter(dayjs().subtract(14, "minutes"))
     ) {
       return (
@@ -141,7 +142,7 @@ export function FacilitiesPage() {
           id="facility-search"
           options={[
             {
-              key: "facility_search_text",
+              key: "facility_search_placeholder_text",
               type: "text" as const,
               placeholder: t("facility_search_placeholder_text"),
               value: qParams.search || "",

src/pages/Organization/components/OrganizationFilter.tsx

@@ -1,5 +1,5 @@
 import { useQueries, useQuery } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import Autocomplete from "@/components/ui/autocomplete";
@@ -21,9 +21,6 @@ import query from "@/Utils/request/query";
 import { Organization } from "@/types/organization/organization";
 import organizationApi from "@/types/organization/organizationApi";
 
-// TODO: fetch from the backend instead
-const govtOrgLevels = ["District", "LocalBody", "Ward"];
-
 interface OrganizationFilterProps {
   selected: string[];
   onChange: (Filter: FilterState, index?: number) => void;
@@ -37,11 +34,14 @@ interface AutoCompleteOption {
   value: string;
 }
 
+const DEFAULT_ORG_LEVELS = 3;
+
 export default function OrganizationFilter(props: OrganizationFilterProps) {
   const { t } = useTranslation();
   const { onChange, selected, skipLevels } = props;
 
   const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
+  const [orgTypes, setOrgTypes] = useState<string[]>([]);
   const [selectedFacilityType, setSelectedFacilityType] = useState<
     OptionsType | undefined
   >(undefined);
@@ -69,6 +69,17 @@ export default function OrganizationFilter(props: OrganizationFilterProps) {
 
       if (validOrgs.length > 0) {
         setSelectedLevels(validOrgs);
+        const validOrg = validOrgs[0];
+        if (
+          validOrg &&
+          validOrg.metadata?.govt_org_type &&
+          validOrg.metadata?.govt_org_children_type
+        ) {
+          setOrgTypes([
+            validOrg.metadata?.govt_org_type,
+            validOrg.metadata?.govt_org_children_type,
+          ]);
+        }
       } else {
         setSelectedLevels([]);
       }
@@ -93,96 +104,164 @@ export default function OrganizationFilter(props: OrganizationFilterProps) {
 
   const clearSelections = () => {
     setSelectedFacilityType(undefined);
+    setOrgTypes((prevTypes) => {
+      return [prevTypes[0], prevTypes[1]];
+    });
     setSelectedLevels([]);
     setTimeout(() => {
       onChange({ organization: undefined, facility_type: undefined }, 0);
     }, 0);
   };
 
-  const RenderOrganizationLevel = (
-    level: Organization | undefined,
-    index: number,
-  ) => {
-    const skip = skipLevels?.includes(index) || false;
-    const [levelSearch, setLevelSearch] = useDebouncedState("", 500);
-    const { data: availableOrgs } = useQuery<{ results: Organization[] }>({
-      queryKey: ["organizations-available", getParentId(index), levelSearch],
-      queryFn: query(organizationApi.getPublicOrganizations, {
-        queryParams: {
-          ...(index > 0 && { parent: getParentId(index) }),
-          ...(index === 0 && { level_cache: 1 }),
-          name: levelSearch || undefined,
-        },
-      }),
-      enabled:
-        !skip &&
-        index <= selectedLevels.length &&
-        (index === 0 || selectedLevels[index - 1] !== undefined),
-    });
-    if (skip) return null;
-    const options = getOrganizationOptions(availableOrgs?.results || []);
-
-    return (
-      <Autocomplete
-        key={`dropdown-${index}`}
-        popoverClassName="sm:min-w-56 sm:max-w-60 w-[calc(100vw-2rem)]"
-        value={selectedLevels[index]?.id || ""}
-        options={options}
-        onChange={(value: string) => {
-          const selectedOrg = availableOrgs?.results.find(
-            (org) => org.id === value,
-          );
-
-          if (selectedOrg) {
-            onChange({ organization: selectedOrg.id }, index);
-            setLevelSearch("");
+  return (
+    <div className="gap-3 flex flex-col sm:flex-col">
+      <div className="flex flex-row gap-3">
+        <Select
+          value={selectedFacilityType?.text || ""}
+          onValueChange={(value) => {
+            setSelectedFacilityType(
+              FACILITY_TYPES.find((type) => type.text === value),
+            );
+            onChange({
+              facility_type: FACILITY_TYPES.find((type) => type.text === value)
+                ?.id,
+            });
+          }}
+        >
+          <SelectTrigger className="overflow-hidden sm:min-w-48 sm:max-w-56 w-[calc(100vw-1rem)]">
+            <SelectValue placeholder={t("select_facility_type")} />
+          </SelectTrigger>
+          <SelectContent>
+            {FACILITY_TYPES.map((type) => (
+              <SelectItem key={type.id} value={type.text}>
+                {type.text}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          onClick={clearSelections}
+          variant="white"
+          disabled={
+            selectedLevels.length === 0 && selectedFacilityType === undefined
           }
-        }}
-        onSearch={(value) => setLevelSearch(value)}
-        placeholder={t(`select_${govtOrgLevels[index].toLowerCase()}`)}
-        disabled={index > selectedLevels.length}
-        align="start"
-      />
-    );
-  };
+        >
+          {t("clear")}
+        </Button>
+      </div>
+      <div className="flex flex-row gap-3">
+        {[...Array(Math.min(orgTypes.length + 1, DEFAULT_ORG_LEVELS))].map(
+          (_, index) => (
+            <OrganizationLevel
+              key={`organization-level-${index}`}
+              index={index}
+              skip={skipLevels?.includes(index) || false}
+              selectedLevels={selectedLevels}
+              orgTypes={orgTypes}
+              setOrgTypes={setOrgTypes}
+              onChange={onChange}
+              getParentId={getParentId}
+              getOrganizationOptions={getOrganizationOptions}
+            />
+          ),
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface OrganizationLevelProps {
+  index: number;
+  skip: boolean;
+  selectedLevels: Organization[];
+  orgTypes: string[];
+  setOrgTypes: React.Dispatch<React.SetStateAction<string[]>>;
+  onChange: (Filter: FilterState, index?: number) => void;
+  getParentId: (index: number) => string;
+  getOrganizationOptions: (orgs?: Organization[]) => AutoCompleteOption[];
+}
+
+function OrganizationLevel({
+  index,
+  skip,
+  selectedLevels,
+  orgTypes,
+  setOrgTypes,
+  onChange,
+  getParentId,
+  getOrganizationOptions,
+}: OrganizationLevelProps) {
+  const [levelSearch, setLevelSearch] = useDebouncedState("", 500);
+  const { t } = useTranslation();
+  const { data: availableOrgs } = useQuery<{ results: Organization[] }>({
+    queryKey: ["organizations-available", getParentId(index), levelSearch],
+    queryFn: query(organizationApi.getPublicOrganizations, {
+      queryParams: {
+        ...(index > 0 && { parent: getParentId(index) }),
+        ...(index === 0 && { level_cache: 1 }),
+        name: levelSearch || undefined,
+      },
+    }),
+    enabled:
+      !skip &&
+      index <= selectedLevels.length &&
+      (index === 0 || selectedLevels[index - 1] !== undefined),
+  });
+
+  // Update org types when we get new data for this level
+  useEffect(() => {
+    if (selectedLevels[index]) {
+      const currentOrg = selectedLevels[index];
+      if (currentOrg?.metadata?.govt_org_children_type) {
+        setOrgTypes((prevTypes) => {
+          const newTypes = [...prevTypes];
+          // Update next level type
+          if (currentOrg.metadata?.govt_org_children_type) {
+            if (index === newTypes.length) {
+              newTypes.push(currentOrg.metadata.govt_org_children_type);
+            } else {
+              newTypes[index + 1] = currentOrg.metadata.govt_org_children_type;
+            }
+          }
+          return newTypes;
+        });
+      }
+    }
+  }, [selectedLevels, setOrgTypes]);
+
+  const options = useMemo(() => {
+    return getOrganizationOptions(availableOrgs?.results || []);
+  }, [availableOrgs?.results, getOrganizationOptions]);
+
+  if (skip) return null;
+  const orgType = orgTypes[index];
 
   return (
-    <div className="gap-3 flex flex-col sm:flex-row">
-      <Select
-        value={selectedFacilityType?.text || ""}
-        onValueChange={(value) => {
-          setSelectedFacilityType(
-            FACILITY_TYPES.find((type) => type.text === value),
-          );
-          onChange({
-            facility_type: FACILITY_TYPES.find((type) => type.text === value)
-              ?.id,
-          });
-        }}
-      >
-        <SelectTrigger className="overflow-hidden sm:min-w-56 sm:max-w-60 w-[calc(100vw-1rem)]">
-          <SelectValue placeholder={t("select_facility_type")} />
-        </SelectTrigger>
-        <SelectContent>
-          {FACILITY_TYPES.map((type) => (
-            <SelectItem key={type.id} value={type.text}>
-              {type.text}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      {govtOrgLevels.map((_, index) =>
-        RenderOrganizationLevel(selectedLevels[index] || undefined, index),
-      )}
-      <Button
-        onClick={clearSelections}
-        variant="white"
-        disabled={
-          selectedLevels.length === 0 && selectedFacilityType === undefined
+    <Autocomplete
+      key={`dropdown-${index}`}
+      popoverClassName="sm:min-w-64 sm:max-w-72 w-[calc(100vw-2rem)]"
+      value={selectedLevels[index]?.id || ""}
+      options={options}
+      onChange={(value: string) => {
+        const selectedOrg = availableOrgs?.results.find(
+          (org) => org.id === value,
+        );
+
+        if (selectedOrg) {
+          onChange({ organization: selectedOrg.id }, index);
+          setLevelSearch("");
         }
-      >
-        {t("clear")}
-      </Button>
-    </div>
+      }}
+      onSearch={(value) => setLevelSearch(value)}
+      placeholder={
+        orgType
+          ? t("select") +
+            " " +
+            t(`SYSTEM__govt_org_type__${orgType?.toLowerCase()}`)
+          : t("select_previous")
+      }
+      disabled={index > selectedLevels.length}
+      align="start"
+    />
   );
 }