create "SearchUsernameInput.tsx"

packages/app/src/components/Admin/AuditLog/SearchUsernameInput.tsx

@@ -0,0 +1,40 @@
+import React, { FC, useState } from 'react';
+
+import { AsyncTypeahead } from 'react-bootstrap-typeahead';
+
+import { useSWRxUsernames } from '~/stores/user';
+
+export const SearchUsernameInput: FC = () => {
+  const [inputText, setInputText] = useState('');
+
+  const includeUserOptions = {
+    isIncludeActiveUser: true,
+    isIncludeInactiveUser: true,
+    isIncludeActivitySnapshotUser: true,
+  };
+  const { data: usernameData, error } = useSWRxUsernames(inputText, 0, 3, includeUserOptions);
+  const isLoading = usernameData === undefined && error == null;
+
+
+  console.log(usernameData);
+
+  return (
+    <div className="input-group mr-2">
+      <div className="input-group-prepend">
+        <span className="input-group-text">
+          <i className="icon-user"></i>
+        </span>
+      </div>
+      <AsyncTypeahead
+        id="auditlog-username-typeahead-asynctypeahead"
+        caseSensitive={false}
+        defaultSelected={[]}
+        isLoading={isLoading}
+        minLength={1}
+        multiple
+        newSelectionPrefix=""
+      />
+    </div>
+
+  );
+};

packages/app/src/components/Admin/AuditLogManagement.tsx

@@ -12,6 +12,7 @@ import PaginationWrapper from '../PaginationWrapper';
 
 import { ActivityTable } from './AuditLog/ActivityTable';
 import { DateRangePicker } from './AuditLog/DateRangePicker';
+import { SearchUsernameInput } from './AuditLog/SearchUsernameInput';
 import { SelectActionDropdown } from './AuditLog/SelectActionDropdown';
 
 
@@ -82,6 +83,8 @@ export const AuditLogManagement: FC = () => {
     <div data-testid="admin-auditlog">
       <h2 className="admin-setting-header mb-3">{t('AuditLog')}</h2>
 
+      <SearchUsernameInput />
+
       <DateRangePicker
         startDate={startDate}
         endDate={endDate}