Fix: Facility Organization Dropdown

src/components/ui/autocomplete.tsx

@@ -49,27 +49,28 @@ export default function Autocomplete({
   "data-cy": dataCy,
 }: AutocompleteProps) {
   const [open, setOpen] = React.useState(false);
+  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(true)}
         >
-          <span className="overflow-hidden">
-            {value
-              ? options.find((option) => option.value === value)?.label
-              : placeholder}
+          <span
+            className={cn(
+              "truncate",
+              !selectedOption && "text-muted-foreground",
+            )}
+          >
+            {selectedOption ? selectedOption.label : placeholder}
           </span>
           <CaretSortIcon className="ml-2 size-4 shrink-0 opacity-50" />
         </Button>
@@ -98,7 +99,7 @@ export default function Autocomplete({
                         (option) =>
                           option.label.toLowerCase() === v.toLowerCase(),
                       )?.value || "";
-                    onChange(currentValue === value ? "" : currentValue);
+                    onChange(currentValue);
                     setOpen(false);
                   }}
                 >

src/pages/FacilityOrganization/components/FacilityOrganizationSelector.tsx

@@ -1,12 +1,11 @@
 import { 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";
@@ -79,8 +78,6 @@ export default function FacilityOrganizationSelector(
     newLevels.push(selectedOrg);
     setSelectedLevels(newLevels);
     setSelectedOrganization(selectedOrg);
-
-    // Always update the selected value, regardless of children
     onChange(selectedOrg.id);
   };
 
@@ -96,100 +93,89 @@ export default function FacilityOrganizationSelector(
   };
 
   const handleEdit = (level: number) => {
-    const newLevels = selectedLevels.slice(0, level);
-    setSelectedLevels(newLevels);
-    if (newLevels.length > 0) {
-      const lastOrg = newLevels[newLevels.length - 1];
-      setSelectedOrganization(lastOrg);
-      onChange(lastOrg.id);
-    } else {
-      setSelectedOrganization(null);
-    }
+    const orgList =
+      level === 0
+        ? getAllOrganizations?.results
+        : currentLevelOrganizations?.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={() => {
+                const newLevels = selectedLevels.slice(0, level);
+                setSelectedLevels(newLevels);
+                if (newLevels.length > 0) {
+                  const lastOrg = newLevels[newLevels.length - 1];
+                  setSelectedOrganization(lastOrg);
+                  onChange(lastOrg.id);
+                } else {
+                  setSelectedOrganization(null);
+                  onChange("");
+                }
+              }}
+            >
+              <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}>{handleEdit(index)}</div>
           ))}
+          {(!selectedLevels.length ||
+            selectedLevels[selectedLevels.length - 1]?.has_children) &&
+            handleEdit(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>
     </>
   );