feat: add search functionality to FilterDropdown component and enable it in AuditLogs pages

src/components/shared/FilterDropdown.tsx

@@ -17,6 +17,7 @@ interface FilterDropdownProps {
   placeholder?: string;
   showIcon?: boolean;
   icon?: ReactElement;
+  isSearchable?: boolean;
 }
 
 export const FilterDropdown = ({
@@ -27,8 +28,10 @@ export const FilterDropdown = ({
   placeholder = 'All',
   showIcon = false,
   icon,
+  isSearchable = false,
 }: FilterDropdownProps): ReactElement => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [localSearch, setLocalSearch] = useState<string>('');
   const dropdownRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const dropdownMenuRef = useRef<HTMLDivElement>(null);
@@ -63,6 +66,7 @@ export const FilterDropdown = ({
         return;
       }
       setIsOpen(false);
+      setLocalSearch(''); 
     };
 
     if (isOpen) {
@@ -117,6 +121,10 @@ export const FilterDropdown = ({
     : null;
   const displayText = selectedOption ? selectedOption.label : placeholder;
 
+  const filteredOptions = isSearchable 
+    ? options.filter(opt => opt.label.toLowerCase().includes(localSearch.toLowerCase()))
+    : options;
+
   return (
     <div className="relative" ref={dropdownRef}>
       <button
@@ -149,6 +157,18 @@ export const FilterDropdown = ({
             className="fixed bg-white border border-[rgba(0,0,0,0.2)] rounded-md shadow-lg z-[250] max-h-60 overflow-y-auto"
             style={dropdownStyle}
           >
+            {isSearchable && (
+              <div className="p-2 border-b border-[rgba(0,0,0,0.08)] sticky top-0 bg-white z-10">
+                <input
+                  type="text"
+                  placeholder="Search..."
+                  value={localSearch}
+                  onChange={(e) => setLocalSearch(e.target.value)}
+                  className="w-full px-2 py-1.5 text-xs border border-[rgba(0,0,0,0.08)] rounded focus:outline-none focus:ring-1 focus:ring-[#112868]/20 bg-gray-50/50"
+                  autoFocus
+                />
+              </div>
+            )}
             <ul className="py-1.5">
               <li>
                 <button
@@ -165,7 +185,12 @@ export const FilterDropdown = ({
                   {placeholder}
                 </button>
               </li>
-              {options.map((option, index) => {
+              {filteredOptions.length === 0 && localSearch && (
+                <li className="px-3 py-4 text-center text-xs text-gray-400">
+                  No results found for "{localSearch}"
+                </li>
+              )}
+              {filteredOptions.map((option, index) => {
                 const optionKey = Array.isArray(option.value)
                   ? option.value.join(':')
                   : option.value;

src/pages/superadmin/AuditLogs.tsx

@@ -411,6 +411,7 @@ const AuditLogs = (): ReactElement => {
                   setCurrentPage(1);
                 }}
                 placeholder="All Resources"
+                isSearchable
               />
 
               {/* Method Filter */}

src/pages/tenant/AuditLogs.tsx

@@ -432,6 +432,7 @@ const AuditLogs = (): ReactElement => {
                       setCurrentPage(1);
                     }}
                     placeholder="All Resources"
+                    isSearchable
                   />
                 </>
               )}