Fix: Facility Organization Dropdown

public/locale/en.json

@@ -1056,6 +1056,7 @@
   "has_child_locations": "Has child locations",
   "has_domestic_healthcare_support": "Has domestic healthcare support?",
   "has_sari": "Has SARI (Severe Acute Respiratory illness)?",
+  "has_sub_departments": "Has sub-departments",
   "health-profile": "Health Profile",
   "health_profile": "Health Profile",
   "hearing": "We are hearing you...",
@@ -1905,6 +1906,7 @@
   "select_site": "Select site",
   "select_skills": "Select and add some skills",
   "select_status": "Select Status",
+  "select_sub_department": "Select sub-department",
   "select_time": "Select time",
   "select_time_slot": "Select time slot",
   "select_user": "Select user",

src/components/ui/autocomplete.tsx

@@ -52,6 +52,7 @@ export default function Autocomplete({
   "data-cy": dataCy,
 }: AutocompleteProps) {
   const [open, setOpen] = React.useState(false);
+
   const isMobile = useBreakpoints({ default: true, sm: false });
 
   const commandContent = (
@@ -124,26 +125,23 @@ export default function Autocomplete({
     );
   }
 
+  const selectedOption = options.find((option) => option.value === value);
+
   return (
     <Popover open={open} onOpenChange={setOpen} modal={true}>
       <PopoverTrigger asChild className={popoverClassName}>
         <Button
-          title={
-            value
-              ? options.find((option) => option.value === value)?.label
-              : undefined
-          }
+          title={selectedOption?.label}
           variant="outline"
           role="combobox"
           aria-expanded={open}
           className="w-full justify-between"
           disabled={disabled}
           data-cy={dataCy}
+          onClick={() => setOpen(!open)}
         >
-          <span className="overflow-hidden">
-            {value
-              ? options.find((option) => option.value === value)?.label
-              : placeholder}
+          <span className={cn("truncate", !selectedOption && "text-gray-500")}>
+            {selectedOption ? selectedOption.label : placeholder}
           </span>
           <CaretSortIcon className="ml-2 size-4 shrink-0 opacity-50" />
         </Button>

src/pages/Facility/settings/organizations/components/FacilityOrganizationSelector.tsx

@@ -1,12 +1,11 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQueries, useQuery } from "@tanstack/react-query";
+import { Building } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import Autocomplete from "@/components/ui/autocomplete";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 
 import routes from "@/Utils/request/api";
@@ -40,47 +39,40 @@ export default function FacilityOrganizationSelector(
   const [selectedOrganization, setSelectedOrganization] =
     useState<FacilityOrganization | null>(null);
 
-  const { data: getAllOrganizations } = useQuery<FacilityOrganizationResponse>({
+  const { data: rootOrganizations } = useQuery<FacilityOrganizationResponse>({
     queryKey: ["organizations-root"],
     queryFn: query(routes.facilityOrganization.list, {
       pathParams: { facilityId },
-      queryParams: {
-        parent: "",
-      },
+      queryParams: { parent: "" },
     }),
   });
 
-  const { data: currentLevelOrganizations } = useQuery<{
-    results: FacilityOrganization[];
-  }>({
-    queryKey: [
-      "organizations-current",
-      selectedLevels[selectedLevels.length - 1]?.id,
-    ],
-    queryFn: query(routes.facilityOrganization.list, {
-      pathParams: { facilityId },
-      queryParams: {
-        parent: selectedLevels[selectedLevels.length - 1]?.id,
-      },
-    }),
-    enabled: selectedLevels.length > 0,
+  const organizationQueries = useQueries({
+    queries: selectedLevels.map((level, _index) => ({
+      queryKey: ["organizations", level.id],
+      queryFn: query(routes.facilityOrganization.list, {
+        pathParams: { facilityId },
+        queryParams: { parent: level.id },
+      }),
+      enabled: !!level.id,
+    })),
   });
 
   const handleLevelChange = (value: string, level: number) => {
-    const orgList =
-      level === 0
-        ? getAllOrganizations?.results
-        : currentLevelOrganizations?.results;
+    let orgList: FacilityOrganization[] | undefined;
+
+    if (level === 0) {
+      orgList = rootOrganizations?.results;
+    } else if (level - 1 < organizationQueries.length) {
+      orgList = organizationQueries[level - 1].data?.results;
+    }
 
     const selectedOrg = orgList?.find((org) => org.id === value);
     if (!selectedOrg) return;
-
     const newLevels = selectedLevels.slice(0, level);
     newLevels.push(selectedOrg);
     setSelectedLevels(newLevels);
     setSelectedOrganization(selectedOrg);
-
-    // Always update the selected value, regardless of children
     onChange(selectedOrg.id);
   };
 
@@ -104,92 +96,86 @@ export default function FacilityOrganizationSelector(
       onChange(lastOrg.id);
     } else {
       setSelectedOrganization(null);
+      onChange("");
+    }
+  };
+
+  const renderOrganizationLevel = (level: number) => {
+    let orgList: FacilityOrganization[] | undefined;
+
+    if (level === 0) {
+      orgList = rootOrganizations?.results;
+    } else if (level - 1 < organizationQueries.length) {
+      orgList = organizationQueries[level - 1].data?.results;
     }
+
+    const getDropdownLabel = () => {
+      if (level < selectedLevels.length) {
+        return selectedLevels[level].name;
+      }
+      return level === 0 ? t("select_department") : t("select_sub_department");
+    };
+
+    return (
+      <div className="group flex items-center gap-1.5">
+        {level > 0 && (
+          <CareIcon
+            icon="l-arrow-right"
+            className="h-3.5 w-3.5 text-gray-400 flex-shrink-0"
+          />
+        )}
+        <div className="flex-1 flex items-center gap-2">
+          <div className="flex-1">
+            <Autocomplete
+              value={selectedLevels[level]?.id}
+              options={getOrganizationOptions(orgList)}
+              onChange={(value) => handleLevelChange(value, level)}
+              placeholder={getDropdownLabel()}
+            />
+          </div>
+          {level > 0 && level < selectedLevels.length && (
+            <div
+              className="cursor-pointer p-1 hover:bg-gray-100 rounded-sm opacity-0 group-hover:opacity-100 transition-opacity"
+              onClick={() => handleEdit(level)}
+            >
+              <CareIcon icon="l-pen" className="h-4 w-4 text-gray-500" />
+            </div>
+          )}
+        </div>
+      </div>
+    );
   };
 
   return (
     <>
-      <Label className="mb-2">
+      <Label className="mb-2 block">
         {t("select_department")}
         {required && <span className="text-red-500">*</span>}
       </Label>
-      <div className="space-y-4">
-        {/* Selected Organization Display */}
+      <div className="space-y-3">
         {selectedOrganization && (
-          <div className="rounded-md border p-3 bg-gray-50">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="font-medium">{selectedOrganization.name}</p>
-                {selectedOrganization.has_children && (
-                  <p className="text-sm text-gray-500">
-                    You can select a sub-department or keep this selection
-                  </p>
-                )}
-              </div>
+          <div className="flex items-center gap-3 rounded-md border border-sky-100 bg-sky-50/50 p-2.5">
+            <Building className="h-4 w-4 text-sky-600 flex-shrink-0" />
+            <div className="flex-1 min-w-0">
+              <p className="font-medium text-sm text-sky-900 truncate">
+                {selectedOrganization.name}
+              </p>
               {selectedOrganization.has_children && (
-                <Badge variant="outline">Has Sub-departments</Badge>
+                <p className="text-xs text-sky-600">
+                  {t("has_sub_departments")}
+                </p>
               )}
             </div>
           </div>
         )}
-
-        {/* Organization Hierarchy */}
-        <div className="space-y-2">
+        <div className="space-y-1.5">
           {selectedLevels.map((org, index) => (
-            <div key={org.id} className="flex items-center gap-2">
-              {index > 0 && (
-                <CareIcon
-                  icon="l-arrow-right"
-                  className="h-4 w-4 text-gray-400"
-                />
-              )}
-              <div className="flex-1">
-                <div className="flex gap-2">
-                  <div className="flex items-center h-9 w-full rounded-md border border-gray-200 bg-white px-3 py-1 text-base shadow-sm">
-                    {org.name}
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => handleEdit(index)}
-                    type="button"
-                  >
-                    <CareIcon icon="l-pen" className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            </div>
+            <div key={org.id}>{renderOrganizationLevel(index)}</div>
           ))}
+          {(!selectedLevels.length ||
+            selectedLevels[selectedLevels.length - 1]?.has_children) &&
+            renderOrganizationLevel(selectedLevels.length)}
         </div>
-
-        {/* Next Selection */}
-        {(!selectedLevels.length ||
-          selectedLevels[selectedLevels.length - 1]?.has_children) && (
-          <div className="flex items-center gap-2">
-            {selectedLevels.length > 0 && (
-              <CareIcon
-                icon="l-arrow-right"
-                className="h-4 w-4 text-gray-400"
-              />
-            )}
-            <div className="flex-1">
-              <Autocomplete
-                value=""
-                options={getOrganizationOptions(
-                  selectedLevels.length === 0
-                    ? getAllOrganizations?.results
-                    : currentLevelOrganizations?.results,
-                )}
-                onChange={(value: string) =>
-                  handleLevelChange(value, selectedLevels.length)
-                }
-                placeholder={`Select ${
-                  selectedLevels.length ? "sub-department" : "Department"
-                }...`}
-              />
-            </div>
-          </div>
-        )}
       </div>
     </>
   );