Edited the dropdown action

compass/components/Table/Index.tsx

@@ -21,17 +21,17 @@ type User = {
   id: number;
   created_at: any;
   username: string;
-  role: "ADMIN" | "EMPLOYEE" | "VOLUNTEER";
+  role: "administrator" | "employee" | "volunteer";
   email: string;
-  program: "DOMESTIC" | "ECONOMIC" | "COMMUNITY";
+  program: "domestic" | "economic" | "community";
   experience: number;
   group?: string;
 };
 
 
+
 export const Table = () => {
   const columnHelper = createColumnHelper<User>();
-
   const columns = [
     columnHelper.display({
       id: "options",

compass/components/TagsInput/CreateNewTagAction.tsx

@@ -0,0 +1,10 @@
+import { Tag } from "./Tag"
+
+export const CreateNewTagAction = ({ input }) => {
+    return (
+        <div className="flex flex-row space-x-2 hover:bg-gray-100 rounded-md py-2 p-2 items-center">
+            <p className="capitalize">Create</p>
+            <Tag active={false} onDelete={null} >{input}</Tag>
+        </div>
+    )
+} 

compass/components/TagsInput/DropdownAction.tsx

@@ -1,51 +1,48 @@
 import { EllipsisHorizontalIcon, TrashIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
 
-export const DropdownAction = ({ tag, handleDeleteTag, handleAddTag }) => {
+export const DropdownAction = ({ tag, handleDeleteTag, handleEditTag }) => {
   const [isVisible, setVisible] = useState(false);
   const [inputValue, setInputValue] = useState(tag);
 
-  const handleBlur = () => {
-    setVisible(false);
+
+  const editTagOption = (e) => {
+    if (e.key === 'Enter') { 
+      handleEditTag(tag, inputValue)
+      setVisible(false);
+    }
   };
 
-  const editTagOption = () => {
-    handleDeleteTag(tag)
-    handleAddTag(inputValue)
-  }
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
   };
 
-  const handleClick = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
-    event.stopPropagation(); // This stops the click event from propagating
-    setVisible(!isVisible); // Toggle visibility
-  };
 
   return (
     <div>
-      {isVisible ? (
+      <EllipsisHorizontalIcon
+          className="w-5 text-gray-500"
+          onClick={() => setVisible(!isVisible)}
+        />
+      {isVisible && (
         <div className="absolute flex flex-col justify-start z-50 rounded-md bg-white border border-gray-200 shadow p-2 space-y-2">
           <input
             type="text"
             value={inputValue}
             onChange={handleInputChange}
             onKeyDown={editTagOption}
-            onBlur={handleBlur}
             autoFocus
             className="bg-gray-50 text-2xs focus:outline-none rounded-md font-normal text-gray-800 p-1 border-2 focus:border-blue-200"
           />
-          <button onClick={() => handleDeleteTag(inputValue)} className="justify-start flex flex-row space-x-4 hover:bg-gray-100 rounded-md items-center p-1 px-2">
+          <button onClick={() => {
+            handleDeleteTag(inputValue)
+            setVisible(false)
+            }} className="justify-start flex flex-row space-x-4 hover:bg-gray-100 rounded-md items-center p-2 px-2">
             <TrashIcon className="w-3 h-3" />
             <p>Delete</p>
           </button>
         </div>
-      ) : (
-        <EllipsisHorizontalIcon
-          className="w-5 text-gray-500"
-          onClick={handleClick} // Attach the click event handler here
-        />
       )}
     </div>
   );

compass/components/TagsInput/Index.tsx

@@ -1,16 +1,22 @@
-import React, { useState } from 'react';
-import 'tailwindcss/tailwind.css';
-import { TagsArray } from './TagsArray'; // Corrected path assumption
-import { TagDropdown } from './TagDropdown';
+import React, { useState } from "react";
+import "tailwindcss/tailwind.css";
+import { TagsArray } from "./TagsArray"; 
+import { TagDropdown } from "./TagDropdown";
+import { CreateNewTagAction } from "./CreateNewTagAction";
 
 interface TagsInputProps {
   presetOptions: string[];
 }
 
-const TagsInput: React.FC<TagsInputProps> = ({ presetValue, presetOptions }) => {
-  const [inputValue, setInputValue] = useState('');
+const TagsInput: React.FC<TagsInputProps> = ({
+  presetValue,
+  presetOptions,
+}) => {
+  const [inputValue, setInputValue] = useState("");
   const [cellSelected, setCellSelected] = useState(false);
-  const [tags, setTags] = useState<Set<string>>(new Set(presetValue ? [presetValue] : []));
+  const [tags, setTags] = useState<Set<string>>(
+    new Set(presetValue ? [presetValue] : [])
+  );
   const [options, setOptions] = useState<Set<string>>(new Set(presetOptions));
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -18,31 +24,63 @@ const TagsInput: React.FC<TagsInputProps> = ({ presetValue, presetOptions }) =>
   };
 
   const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && inputValue.trim()) {
-      // To add to a Set, you need to create a new Set for immutability in React state updates.
-      setTags(prevTags => new Set(prevTags).add(inputValue));
-      setOptions(prevOptions => new Set(prevOptions).add(inputValue));
-      setInputValue('');
+    if (e.key === "Enter" && inputValue.trim()) {
+      setTags((prevTags) => new Set(prevTags).add(inputValue));
+      setOptions((prevOptions) => new Set(prevOptions).add(inputValue));
+      setInputValue("");
     }
   };
 
   const handleSelectTag = (tagToAdd: string) => {
-    if (!tags.has(tagToAdd)){ // Corrected syntax for checking if a Set contains an item
-      setTags(prevTags => new Set(prevTags).add(tagToAdd));
+    if (!tags.has(tagToAdd)) {
+      // Corrected syntax for checking if a Set contains an item
+      setTags((prevTags) => new Set(prevTags).add(tagToAdd));
     }
-  }
+  };
 
   const handleDeleteTag = (tagToDelete: string) => {
-    setTags(prevTags => {
+    setTags((prevTags) => {
       const updatedTags = new Set(prevTags);
       updatedTags.delete(tagToDelete);
       return updatedTags;
     });
   };
-  const handleBlur = () => {
-    setCellSelected(false);
+
+  const handleDeleteTagOption = (tagToDelete: string) => {
+    setOptions((prevOptions) => {
+      const updatedOptions = new Set(prevOptions);
+      updatedOptions.delete(tagToDelete);
+      return updatedOptions;
+    });
+    if (tags.has(tagToDelete)) {
+      handleDeleteTag(tagToDelete);
+    }
   };
 
+  const handleEditTag = (oldTag: string, newTag: string) => {
+    if (oldTag !== newTag) {
+      setTags((prevTags) => {
+        const tagsArray = Array.from(prevTags);
+        const oldTagIndex = tagsArray.indexOf(oldTag);
+        if (oldTagIndex !== -1) {
+          tagsArray.splice(oldTagIndex, 1, newTag);
+        }
+        return new Set(tagsArray);
+      });
+  
+      setOptions((prevOptions) => {
+        const optionsArray = Array.from(prevOptions);
+        const oldTagIndex = optionsArray.indexOf(oldTag);
+        if (oldTagIndex !== -1) {
+          optionsArray.splice(oldTagIndex, 1, newTag);
+        }
+        return new Set(optionsArray);
+      });
+    }
+  };
+  
+
+
   return (
     <div className="cursor-pointer" onClick={() => setCellSelected(true)}>
       {!cellSelected ? (
@@ -50,7 +88,7 @@ const TagsInput: React.FC<TagsInputProps> = ({ presetValue, presetOptions }) =>
       ) : (
         <div className="absolute w-64 z-50 -ml-3 -mt-7">
           <div className="rounded-md border border-gray-200 shadow">
-            <div  className="flex flex-wrap rounded-t-md items-center gap-2 bg-gray-50 p-2">
+            <div className="flex flex-wrap rounded-t-md items-center gap-2 bg-gray-50 p-2">
               <TagsArray handleDelete={handleDeleteTag} active tags={tags} />
               <input
                 type="text"
@@ -63,8 +101,16 @@ const TagsInput: React.FC<TagsInputProps> = ({ presetValue, presetOptions }) =>
               />
             </div>
             <div className="flex rounded-b-md bg-white flex-col border-t border-gray-100 text-2xs font-medium text-gray-500 p-2">
-              Select an option or create one
-              <TagDropdown handleAdd={handleSelectTag} tags={options} />
+              <p className="capitalize">Select an option or create one</p>
+              <TagDropdown
+                handleDeleteTag={handleDeleteTagOption}
+                handleEditTag={handleEditTag}
+                handleAdd={handleSelectTag}
+                tags={options}
+              />
+              {inputValue.length > 0 && (
+                <CreateNewTagAction input={inputValue} />
+              )}
             </div>
           </div>
         </div>

compass/components/TagsInput/Tag.tsx

@@ -1,10 +1,15 @@
-import { XMarkIcon } from "@heroicons/react/24/solid"
+import { XMarkIcon } from "@heroicons/react/24/solid";
 
-export const Tag = ({children, handleDelete, active = false}) => {
+export const Tag = ({ children, handleDelete, active = false }) => {
 
-    return (
-        <span className="font-normal text-gray-800 flex flex-row p-1 px-2 rounded-lg bg-blue-100">{children}
-        {active && <button className="hover:bg-gray-200" onClick={() => handleDelete(children)}><XMarkIcon  className=" ml-1 w-3 text-blue-500" /></button>}
-        </span>
-    )
-}
+  return (
+    <span className={`font-normal bg-cyan-100 text-gray-800 flex flex-row p-1 px-2 rounded-lg`}>
+      {children}
+      {active && handleDelete && (
+        <button onClick={() => handleDelete(children)}>
+          <XMarkIcon className={`ml-1 w-3 text-cyan-500`} />
+        </button>
+      )}
+    </span>
+  );
+};

compass/components/TagsInput/TagDropdown.tsx

@@ -2,13 +2,13 @@
 import { Tag } from "./Tag";
 import { DropdownAction } from "./DropdownAction";
 
-export const TagDropdown = ({ tags, handleAdd }) => {
+export const TagDropdown = ({ tags, handleEditTag,handleDeleteTag,handleAdd  }) => {
   return (
-    <div className="flex flex-col space-y-2 mt-2">
+    <div className="z-50 flex flex-col space-y-2 mt-2">
       {Array.from(tags).map((tag, index) => (
-        <div onClick={() => handleAdd(tag)} key={index} className="items-center rounded-md p-1 flex flex-row justify-between hover:bg-gray-100">
-          <Tag>{tag}</Tag>
-          <DropdownAction tag={tag} />
+        <div key={index} className="items-center rounded-md p-1 flex flex-row justify-between hover:bg-gray-100">
+          <button onClick={() => handleAdd(tag)}><Tag >{tag}</Tag></button>
+          <DropdownAction handleDeleteTag={handleDeleteTag} handleEditTag={handleEditTag} tag={tag} />
         </div>
       ))}
     </div>

compass/components/TagsInput/TagsArray.tsx

@@ -1,6 +1,7 @@
 import { Tag } from "./Tag"
 
 export const TagsArray = ({ tags, handleDelete, active = false }) => {
+  
     return(
         <div className="flex flex-wrap gap-2 items-center">
         {