i18n

packages/app/resource/locales/en_US/admin/admin.json

@@ -514,5 +514,11 @@
       "force_update_parents_label": "Forcibly add missing users",
       "force_update_parents_description": "Enable this option to force the addition of missing users to the ancestor groups if they exist after changing a parent group."
     }
+  },
+  "audit_log_management": {
+    "username": "Username",
+    "target_model": "Target Model",
+    "action": "Action",
+    "date": "Date"
   }
 }

packages/app/resource/locales/ja_JP/admin/admin.json

@@ -513,5 +513,11 @@
       "force_update_parents_label": "強制的に足りないユーザーを追加する",
       "force_update_parents_description": "このオプションを有効化すると、親グループ変更後に祖先グループに足りないユーザーが存在した場合にそれらのユーザーを強制的に追加することができます"
     }
+  },
+  "audit_log_management": {
+    "username": "ユーザー名",
+    "target_model": "ターゲットモデル",
+    "action": "アクション",
+    "date": "日付"
   }
 }

packages/app/resource/locales/zh_CN/admin/admin.json

@@ -523,5 +523,11 @@
       "force_update_parents_label": "强行添加失踪的用户",
       "force_update_parents_description": "激活这个选项，如果在父组改变后，在祖先组中有缺失的用户，可以强制添加这些用户"
     }
+  },
+  "audit_log_management": {
+    "username": "帐号",
+    "target_model": "目标模型",
+    "action": "行动",
+    "date": "日期"
   }
 }

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

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 
 import { format } from 'date-fns';
+import { useTranslation } from 'react-i18next';
 
 import { IActivityHasId } from '~/interfaces/activity';
 
@@ -13,15 +14,17 @@ const formatDate = (date) => {
 };
 
 export const ActivityTable : FC<Props> = (props: Props) => {
+  const { t } = useTranslation();
+
   return (
     <div className="table-responsive text-nowrap h-100">
       <table className="table table-default table-bordered table-user-list">
         <thead>
           <tr>
-            <th scope="col">username</th>
-            <th scope="col">targetModel</th>
-            <th scope="col">action</th>
-            <th scope="col">createdAt</th>
+            <th scope="col">{t('admin:audit_log_management.username')}</th>
+            <th scope="col">{t('admin:audit_log_management.target_model')}</th>
+            <th scope="col">{t('admin:audit_log_management.action')}</th>
+            <th scope="col">{t('admin:audit_log_management.date')}</th>
           </tr>
         </thead>
         <tbody>

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

@@ -5,6 +5,8 @@ import React, {
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 
+import { useTranslation } from 'react-i18next';
+
 
 type CustomInputProps = {
   buttonRef: React.Ref<HTMLButtonElement>
@@ -12,6 +14,7 @@ type CustomInputProps = {
 }
 
 const CustomInput = forwardRef<HTMLButtonElement, CustomInputProps>((props: CustomInputProps) => {
+  const { t } = useTranslation();
   return (
     <button
       type="button"
@@ -19,7 +22,7 @@ const CustomInput = forwardRef<HTMLButtonElement, CustomInputProps>((props: Cust
       ref={props.buttonRef}
       onClick={props.onClick}
     >
-      <i className="fa fa-fw fa-calendar" /> Date
+      <i className="fa fa-fw fa-calendar" /> {t('admin:audit_log_management.date')}
     </button>
   );
 });
@@ -47,7 +50,7 @@ export const DateRangePicker: FC<DateRangePickerProps> = (props: DateRangePicker
         onChange(dateList);
       }
     }
-  }, []);
+  }, [onChange]);
 
   return (
     <div className="btn-group mr-2">

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

@@ -3,6 +3,7 @@ import React, {
 } from 'react';
 
 import { AsyncTypeahead, Menu, MenuItem } from 'react-bootstrap-typeahead';
+import { useTranslation } from 'react-i18next';
 
 import { useSWRxUsernames } from '~/stores/user';
 
@@ -26,6 +27,7 @@ type Props = {
 
 export const SearchUsernameTypeahead: FC<Props> = (props: Props) => {
   const { onChange } = props;
+  const { t } = useTranslation();
 
   /*
    * State
@@ -106,7 +108,7 @@ export const SearchUsernameTypeahead: FC<Props> = (props: Props) => {
         multiple
         delay={400}
         minLength={0}
-        placeholder="username"
+        placeholder={t('admin:audit_log_management.username')}
         caseSensitive={false}
         isLoading={isLoading}
         options={allUser}

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

@@ -1,5 +1,7 @@
 import React, { FC, useCallback } from 'react';
 
+import { useTranslation } from 'react-i18next';
+
 import { SupportedActionType } from '~/interfaces/activity';
 
 type Props = {
@@ -10,6 +12,7 @@ type Props = {
 }
 
 export const SelectActionDropdown: FC<Props> = (props: Props) => {
+  const { t } = useTranslation();
   const {
     dropdownItems, actionMap, onChangeAction, onChangeMultipleAction,
   } = props;
@@ -29,7 +32,7 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
   return (
     <div className="btn-group mr-2">
       <button className="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
-        <i className="fa fa-fw fa-bolt" />Action
+        <i className="fa fa-fw fa-bolt" />{t('admin:audit_log_management.action')}
       </button>
       <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
         {dropdownItems.map(item => (