feat: add user activation control

- Add is_active field to user model
- Create SealCheckbox component with clickable container
- Add activation control to user modal
- Display user status in users table
- Add localization strings for activation features

src/pages/users/components/add-modal.tsx

@@ -1,5 +1,6 @@
 import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal';
+import SealCheckbox from '@/components/seal-form/seal-checkbox';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction, PasswordReg } from '@/config';
@@ -34,11 +35,13 @@ const AddModal: React.FC<AddModalProps> = ({
     if (action === PageAction.EDIT && open) {
       form.setFieldsValue({
         ...data,
-        is_admin: data?.is_admin ? UserRoles.ADMIN : UserRoles.USER
+        is_admin: data?.is_admin ? UserRoles.ADMIN : UserRoles.USER,
+        is_active: data?.is_active !== undefined ? data.is_active : true
       });
     } else if (action === PageAction.CREATE && open) {
       form.setFieldsValue({
-        is_admin: UserRoles.USER
+        is_admin: UserRoles.USER,
+        is_active: true
       });
     }
   };
@@ -93,24 +96,44 @@ const AddModal: React.FC<AddModalProps> = ({
             label={intl.formatMessage({ id: 'users.form.fullname' })}
           ></SealInput.Input>
         </Form.Item>
-        <Form.Item<FormData> name="is_admin" rules={[{ required: false }]}>
-          <SealSelect label={intl.formatMessage({ id: 'users.table.role' })}>
-            {UserRolesOptions.map((item) => {
-              return (
-                <Select.Option value={item.value} key={item.value}>
-                  {item.value === UserRoles.ADMIN ? (
-                    <UserSwitchOutlined className="size-16" />
-                  ) : (
-                    <UserOutlined className="size-16" />
-                  )}
-                  <span className="m-l-5">
-                    {intl.formatMessage({ id: item.label })}
-                  </span>
-                </Select.Option>
-              );
-            })}
-          </SealSelect>
-        </Form.Item>
+        <div style={{ display: 'flex', gap: '16px' }}>
+          <div style={{ flex: 1 }}>
+            <Form.Item<FormData> name="is_admin" rules={[{ required: false }]}>
+              <SealSelect
+                label={intl.formatMessage({ id: 'users.table.role' })}
+              >
+                {UserRolesOptions.map((item) => {
+                  return (
+                    <Select.Option value={item.value} key={item.value}>
+                      {item.value === UserRoles.ADMIN ? (
+                        <UserSwitchOutlined className="size-16" />
+                      ) : (
+                        <UserOutlined className="size-16" />
+                      )}
+                      <span className="m-l-5">
+                        {intl.formatMessage({ id: item.label })}
+                      </span>
+                    </Select.Option>
+                  );
+                })}
+              </SealSelect>
+            </Form.Item>
+          </div>
+          <div style={{ flex: 1 }}>
+            <Form.Item<FormData>
+              name="is_active"
+              rules={[{ required: false }]}
+              valuePropName="checked"
+            >
+              <SealCheckbox
+                label={intl.formatMessage({ id: 'users.form.active' })}
+                description={intl.formatMessage({
+                  id: 'users.form.active.description'
+                })}
+              />
+            </Form.Item>
+          </div>
+        </div>
 
         <Form.Item<FormData>
           name="password"

src/pages/users/config/types.ts

@@ -8,6 +8,7 @@ export interface ListItem {
   username: string;
   created_at: string;
   updated_at: string;
+  is_active?: boolean;
 }
 
 export interface FormData {
@@ -16,4 +17,5 @@ export interface FormData {
   is_admin: boolean | string;
   full_name: string;
   password: string;
+  is_active?: boolean;
 }

src/pages/users/index.tsx

@@ -295,6 +295,23 @@ const Users: React.FC = () => {
                 );
               }}
             />
+            <Column
+              title={intl.formatMessage({ id: 'users.table.status' })}
+              dataIndex="is_active"
+              key="status"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record: ListItem) => {
+                return (
+                  <AutoTooltip ghost minWidth={20}>
+                    {record.is_active
+                      ? intl.formatMessage({ id: 'users.status.active' })
+                      : intl.formatMessage({ id: 'users.status.inactive' })}
+                  </AutoTooltip>
+                );
+              }}
+            />
             <Column
               title={intl.formatMessage({ id: 'common.table.createTime' })}
               dataIndex="created_at"