Add lead title combobox for data standardization

Author: devksingh4

src/common/types/organizations.ts

@@ -12,6 +12,8 @@ export const orgLeadEntry = z.object({
   title: z.optional(z.string())
 })
 
+export const leadTitleSuggestions = ["Chair", "Co-chair", "Admin", "Lead", "Helper"];
+
 export const MAX_ORG_DESCRIPTION_CHARS = 125;
 export type LeadEntry = z.infer<typeof orgLeadEntry>;
 

src/ui/pages/organization/ManageOrganizationForm.test.tsx

@@ -445,11 +445,16 @@ describe("ManageOrganizationForm - Lead Management Tests", () => {
     await waitFor(() => {
       expect(screen.getByText("John Doe")).toBeInTheDocument();
       expect(screen.getByText("jdoe@illinois.edu")).toBeInTheDocument();
-      expect(screen.getByText("Chair")).toBeInTheDocument();
       expect(screen.getByText("Jane Smith")).toBeInTheDocument();
       expect(screen.getByText("jsmith@illinois.edu")).toBeInTheDocument();
       expect(screen.getByText("Vice Chair")).toBeInTheDocument();
     });
+
+    const table = screen.getByRole("table");
+    expect(table).toHaveTextContent("John Doe");
+    expect(table).toHaveTextContent("Chair");
+    expect(table).toHaveTextContent("Jane Smith");
+    expect(table).toHaveTextContent("Vice Chair");
   });
 
   it("shows 'No leads found' when there are no leads", async () => {

src/ui/pages/organization/ManageOrganizationForm.tsx

@@ -18,12 +18,16 @@ import {
   Avatar,
   Modal,
   Divider,
+  Combobox,
+  useCombobox,
+  InputBase,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { notifications } from "@mantine/notifications";
 import { IconPlus, IconTrash, IconUserPlus } from "@tabler/icons-react";
 import {
   LeadEntry,
+  leadTitleSuggestions,
   MAX_ORG_DESCRIPTION_CHARS,
   setOrganizationMetaBody,
   validOrgLinkTypes,
@@ -65,6 +69,15 @@ export const ManageOrganizationForm: React.FC<ManageOrganizationFormProps> = ({
   const [newLeadEmail, setNewLeadEmail] = useState("");
   const [newLeadTitle, setNewLeadTitle] = useState("");
 
+  // Combobox for title suggestions
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+  });
+
+  const filteredTitles = leadTitleSuggestions.filter((title) =>
+    title.toLowerCase().includes(newLeadTitle.toLowerCase()),
+  );
+
   const form = useForm({
     validate: zodResolver(setOrganizationMetaBody),
     initialValues: {
@@ -348,7 +361,9 @@ export const ManageOrganizationForm: React.FC<ManageOrganizationFormProps> = ({
                 Organization Leads
               </Title>
               <Text size="sm" c="dimmed" mb="md">
-                Manage who has leadership permissions for this organization
+                These users will be your Executive Council representatives and
+                will be given management permissions for your org. These users
+                must be paid members.
               </Text>
 
               <Table verticalSpacing="sm" highlightOnHover>
@@ -460,12 +475,45 @@ export const ManageOrganizationForm: React.FC<ManageOrganizationFormProps> = ({
                   value={newLeadEmail}
                   onChange={(e) => setNewLeadEmail(e.currentTarget.value)}
                 />
-                <TextInput
-                  label="Lead Title"
-                  placeholder="Chair"
-                  value={newLeadTitle}
-                  onChange={(e) => setNewLeadTitle(e.currentTarget.value)}
-                />
+                <Combobox
+                  store={combobox}
+                  onOptionSubmit={(val) => {
+                    setNewLeadTitle(val);
+                    combobox.closeDropdown();
+                  }}
+                >
+                  <Combobox.Target>
+                    <InputBase
+                      label="Lead Title"
+                      placeholder="Chair"
+                      value={newLeadTitle}
+                      onChange={(e) => {
+                        setNewLeadTitle(e.currentTarget.value);
+                        combobox.openDropdown();
+                        combobox.updateSelectedOptionIndex();
+                      }}
+                      onClick={() => combobox.openDropdown()}
+                      onFocus={() => combobox.openDropdown()}
+                      onBlur={() => combobox.closeDropdown()}
+                      rightSection={<Combobox.Chevron />}
+                      rightSectionPointerEvents="none"
+                    />
+                  </Combobox.Target>
+
+                  <Combobox.Dropdown>
+                    <Combobox.Options>
+                      {filteredTitles.length > 0 ? (
+                        filteredTitles.map((title) => (
+                          <Combobox.Option value={title} key={title}>
+                            {title}
+                          </Combobox.Option>
+                        ))
+                      ) : (
+                        <Combobox.Empty>No matches found</Combobox.Empty>
+                      )}
+                    </Combobox.Options>
+                  </Combobox.Dropdown>
+                </Combobox>
               </Stack>
 
               <Button