feat(users): add user permissions management and enhance theme switcher

.eslintrc.js

@@ -1,3 +1,6 @@
 module.exports = {
   extends: require.resolve('@umijs/max/eslint'),
+  rules: {
+    '@typescript-eslint/no-unused-vars': 'off',
+  },
 };

README.md

@@ -0,0 +1 @@
+Source web của các dự án SMATEC

config/routes.ts

@@ -61,6 +61,10 @@ export const commonManagerRoutes = [
         path: '/manager/users',
         component: './Manager/User',
       },
+      {
+        path: '/manager/users/:userId/permissions',
+        component: './Manager/User/Permission/Assign',
+      },
     ],
   },
   {

src/components/Avatar/AvatarDropdown.tsx

@@ -1,6 +1,10 @@
 import { ROUTE_LOGIN, ROUTE_PROFILE } from '@/constants/routes';
 import { clearAllData, clearSessionData, removeToken } from '@/utils/storage';
-import { LogoutOutlined, ProfileOutlined } from '@ant-design/icons';
+import {
+  LogoutOutlined,
+  SettingOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
 import { history, useIntl } from '@umijs/max';
 
 import { Dropdown } from 'antd';
@@ -18,7 +22,7 @@ export const AvatarDropdown = ({
         items: [
           {
             key: ROUTE_PROFILE,
-            icon: <ProfileOutlined />,
+            icon: <SettingOutlined />,
             label: intl.formatMessage({ id: 'menu.profile' }),
             onClick: () => {
               history.push(ROUTE_PROFILE);
@@ -42,17 +46,8 @@ export const AvatarDropdown = ({
       }}
     >
       <div className="flex gap-2">
-        <img
+        <UserOutlined />
-          src="/avatar.svg"
+        <span className="font-sans">
-          alt="avatar"
-          style={{
-            width: 32,
-            height: 32,
-            borderRadius: '50%',
-            cursor: 'pointer',
-          }}
-        />
-        <span className="font-bold">
           {currentUserProfile?.metadata?.full_name || ''}
         </span>
       </div>

src/components/Theme/ThemeSwitcher.tsx

@@ -1,7 +1,7 @@
 import { THEME_KEY } from '@/constants';
 import { MoonOutlined, SunOutlined } from '@ant-design/icons';
-import { useIntl, useModel } from '@umijs/max';
+import { useModel } from '@umijs/max';
-import { Button, Dropdown } from 'antd';
+import { Segmented } from 'antd';
 import React, { useEffect, useState } from 'react';
 
 export interface ThemeSwitcherProps {
@@ -10,7 +10,6 @@ export interface ThemeSwitcherProps {
 
 const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({ className }) => {
   const { initialState, setInitialState } = useModel('@@initialState');
-  const intl = useIntl();
   const [isDark, setIsDark] = useState(
     (initialState?.theme as 'light' | 'dark') === 'dark',
   );
@@ -30,46 +29,80 @@ const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({ className }) => {
   }, []);
 
   const handleThemeChange = (newTheme: 'light' | 'dark') => {
+    // Check if browser supports View Transitions API
+    const supportsViewTransition = 'startViewTransition' in document;
+
+    if (!supportsViewTransition) {
+      // Fallback: just change theme without animation
       localStorage.setItem(THEME_KEY, newTheme);
-    // Update global state để trigger layout re-render
+      setIsDark(newTheme === 'dark');
+      window.dispatchEvent(
+        new CustomEvent('theme-change', { detail: { theme: newTheme } }),
+      );
       setInitialState({
         ...initialState,
         theme: newTheme,
-    } as any).then(() => {
+      } as any);
-      // Dispatch event để notify ThemeProvider
+      return;
+    }
+
+    // Set origin to top-right corner
+    const x = window.innerWidth;
+    const y = 0;
+
+    // Calculate end radius to cover the entire screen
+    const endRadius = Math.hypot(
+      Math.max(x, window.innerWidth - x),
+      Math.max(y, window.innerHeight - y),
+    );
+
+    // Start the view transition
+    const transition = (document as any).startViewTransition(() => {
+      localStorage.setItem(THEME_KEY, newTheme);
+      setIsDark(newTheme === 'dark');
       window.dispatchEvent(
         new CustomEvent('theme-change', { detail: { theme: newTheme } }),
       );
     });
+
+    // Animate the ripple effect
+    transition.ready.then(() => {
+      requestAnimationFrame(() => {
+        document.documentElement.animate(
+          {
+            clipPath: [
+              `circle(0px at ${x}px ${y}px)`,
+              `circle(${endRadius}px at ${x}px ${y}px)`,
+            ],
+          },
+          {
+            duration: 800,
+            easing: 'ease-in-out',
+            pseudoElement: '::view-transition-new(root)',
+          },
+        );
+      });
+    });
+
+    // Update initialState after transition
+    setInitialState({
+      ...initialState,
+      theme: newTheme,
+    } as any);
   };
 
-  const items = [
-    {
-      key: 'light',
-      label: intl.formatMessage({
-        id: 'common.theme.light',
-        defaultMessage: 'Light Theme',
-      }),
-      icon: <SunOutlined />,
-      onClick: () => handleThemeChange('light'),
-    },
-    {
-      key: 'dark',
-      label: intl.formatMessage({
-        id: 'common.theme.dark',
-        defaultMessage: 'Dark Theme',
-      }),
-      icon: <MoonOutlined />,
-      onClick: () => handleThemeChange('dark'),
-    },
-  ];
-
   return (
-    <Dropdown menu={{ items }} placement="bottomRight" trigger={['click']}>
+    <Segmented
-      <Button type="text" className={className}>
+      className={className}
-        {isDark ? <MoonOutlined /> : <SunOutlined />}
+      size="small"
-      </Button>
+      shape="round"
-    </Dropdown>
+      value={isDark ? 'dark' : 'light'}
+      onChange={(value) => handleThemeChange(value as 'light' | 'dark')}
+      options={[
+        { value: 'light', icon: <SunOutlined /> },
+        { value: 'dark', icon: <MoonOutlined /> },
+      ]}
+    />
   );
 };
 

src/components/Theme/style.less

@@ -1,3 +1,12 @@
+/* View Transitions API - Disable default animation for custom ripple effect */
+/* stylelint-disable selector-pseudo-element-no-unknown */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+/* stylelint-enable selector-pseudo-element-no-unknown */
+
 /* From Uiverse.io by Galahhad */
 .theme-switch {
   --toggle-size: 20px;

src/constants/api.ts

@@ -8,6 +8,7 @@ export const API_ALARMS_CONFIRM = '/api/alarms/confirm';
 
 // Thing API Constants
 export const API_THINGS_SEARCH = '/api/things/search';
+export const API_THINGS_POLICY = '/api/things/policy';
 
 // Group API Constants
 export const API_GROUPS = '/api/groups';

src/constants/routes.ts

@@ -1,3 +1,5 @@
 export const ROUTE_LOGIN = '/login';
 export const ROUTER_HOME = '/';
 export const ROUTE_PROFILE = '/profile';
+export const ROUTE_MANAGER_USERS = '/manager/users';
+export const ROUTE_MANAGER_USERS_PERMISSIONS = 'permissions';

src/locales/en-US/master/master-en.ts

@@ -7,6 +7,7 @@ import masterMenuProfileEn from './master-profile-en';
 import masterThingEn from './master-thing-en';
 import masterUserEn from './master-user-en';
 export default {
+  'master.footer.chosen': 'Chosen',
   ...masterAuthEn,
   ...masterMenuEn,
   ...masterMenuProfileEn,

src/locales/en-US/master/master-user-en.ts

@@ -32,4 +32,23 @@ export default {
   'master.users.role.sgw.end_user': 'Ship Owner',
   'master.users.create.error': 'User creation failed',
   'master.users.create.success': 'User created successfully',
+  'master.users.change_role.confirm.title': 'Confirm role change',
+  'master.users.change_role.admin.content':
+    'Are you sure you want to change the role to Unit Manager?',
+  'master.users.change_role.user.content':
+    'Are you sure you want to change the role to Unit Supervisor?',
+  'master.users.change_role.user.success': 'Role change successful',
+  'master.users.change_role.user.fail': 'Role change failed',
+  'master.users.group_assign.title': 'Assigned Groups',
+  'master.users.group_assign.button.title': 'Assign Groups',
+  'master.users.group_assign.select.title': 'Select Group',
+  'master.users.unassign.content':
+    'Are you sure you want to unassign this group?',
+  'master.users.unassign.success': 'Unassign successful',
+  'master.users.unassign.fail': 'Unassign failed',
+  'master.users.assign.success': 'Assign group successful',
+  'master.users.assign.fail': 'Assign group failed',
+  'master.users.deletion.title': 'Are you sure to delete this selected items?',
+  'master.users.delete.success': 'User deleted successfully',
+  'master.users.delete.fail': 'User deletion failed',
 };

src/locales/vi-VN/master/master-group-vi.ts

@@ -4,7 +4,7 @@ export default {
     'Không thể tạo đơn vị con khi gốc đã có thiết bị',
   'master.groups.add': 'Tạo đơn vị cấp dưới',
   'master.groups.delete.confirm': 'Bạn có chắc muốn xóa nhóm này không?',
-  'master.groups.code': 'Mã',
+  'master.groups.code': 'Mã đỡ vị',
   'master.groups.code.exists': 'Mã đã tồn tại',
   'master.groups.short_name': 'Tên viết tắt',
   'master.groups.short_name.exists': 'Tên viết tắt đã tồn tại',

src/locales/vi-VN/master/master-user-vi.ts

@@ -32,4 +32,22 @@ export default {
   'master.users.role.sgw.end_user': 'Chủ tàu',
   'master.users.create.error': 'Tạo người dùng lỗi',
   'master.users.create.success': 'Tạo người dùng thành công',
+  'master.users.change_role.confirm.title': 'Xác nhận thay đổi vai trò',
+  'master.users.change_role.admin.content':
+    'Bạn có chắc muốn thay đổi vai trò thành quản lý đơn vị không?',
+  'master.users.change_role.user.content':
+    'Bạn có chắc muốn thay đổi vai trò thành giám sát đơn vị không?',
+  'master.users.change_role.user.success': 'Thay đổi vai trò thành công',
+  'master.users.change_role.user.fail': 'Thay đổi vai trò thất bại',
+  'master.users.group_assign.title': 'Đơn vị được phân quyền',
+  'master.users.group_assign.button.title': 'Phân quyền đơn vị',
+  'master.users.group_assign.select.title': 'Chọn đơn vị',
+  'master.users.unassign.content': 'Bạn chắc chắn ngừng phân quyền khỏi đơn vị',
+  'master.users.unassign.success': 'Ngừng phân quyền thành công',
+  'master.users.unassign.fail': 'Ngừng phân quyền thất bại',
+  'master.users.assign.success': 'Phân quyền đơn vị thành công',
+  'master.users.assign.fail': 'Phân quyền đơn vị thất bại',
+  'master.users.deletion.title': 'Chắc chắn xoá các tài khoản đã chọn?',
+  'master.users.delete.success': 'Xoá người dùng thành công',
+  'master.users.delete.fail': 'Xoá người dùng thất bại',
 };

src/locales/vi-VN/master/master-vi.ts

@@ -7,6 +7,7 @@ import masterProfileVi from './master-profile-vi';
 import masterThingVi from './master-thing-vi';
 import masterUserVi from './master-user-vi';
 export default {
+  'master.footer.chosen': 'Đã chọn',
   ...masterAuthVi,
   ...masterMenuVi,
   ...masterProfileVi,

src/pages/Alarm/components/AlarmFormConfirm.tsx

@@ -38,7 +38,7 @@ const AlarmFormConfirm = ({
       formRef={formRef}
       title={
         <Flex align="center" justify="center">
-          <FormattedMessage id="alarms.confirm.title" />
+          <FormattedMessage id="master.alarms.confirm.title" />
         </Flex>
       }
       width="40%"
@@ -66,7 +66,7 @@ const AlarmFormConfirm = ({
           if (resp.status === HTTPSTATUS.HTTP_ACCEPTED) {
             message.success({
               content: intl.formatMessage({
-                id: 'alarms.confirm.success',
+                id: 'master.alarms.confirm.success',
                 defaultMessage: 'Confirm alarm successfully',
               }),
             });
@@ -74,7 +74,7 @@ const AlarmFormConfirm = ({
           } else if (resp.status === HTTPSTATUS.HTTP_NOTFOUND) {
             message.warning({
               content: intl.formatMessage({
-                id: 'alarms.not_found',
+                id: 'master.alarms.not_found',
                 defaultMessage: 'Alarm has expired or does not exist',
               }),
             });
@@ -86,7 +86,7 @@ const AlarmFormConfirm = ({
           console.error('Error when confirm alarm: ', error);
           message.error({
             content: intl.formatMessage({
-              id: 'alarms.confirm.fail',
+              id: 'master.alarms.confirm.fail',
               defaultMessage: 'Confirm alarm failed',
             }),
           });
@@ -120,7 +120,7 @@ const AlarmFormConfirm = ({
         <ProFormText
           name="time"
           label={intl.formatMessage({
-            id: 'alarms.occurred_at',
+            id: 'master.alarms.occurred_at',
             defaultMessage: 'When',
           })}
           readonly={true}
@@ -139,7 +139,7 @@ const AlarmFormConfirm = ({
           {
             required: true,
             message: intl.formatMessage({
-              id: 'alarms.confirm.description.required',
+              id: 'master.alarms.confirm.description.required',
               defaultMessage: 'The description is required',
             }),
           },

src/pages/Manager/User/Permission/Assign.tsx

@@ -0,0 +1,67 @@
+import { ROUTE_MANAGER_USERS } from '@/constants/routes';
+import { apiQueryUserById } from '@/services/master/UserController';
+import { PageContainer } from '@ant-design/pro-components';
+import { history, useParams } from '@umijs/max';
+import { useEffect, useState } from 'react';
+import AssignGroup from './components/AssignGroup';
+import ShareThing from './components/ShareThing';
+
+enum AssignTabsKey {
+  group = 'group',
+  device = 'device',
+}
+
+const AssignUserPage = () => {
+  const { userId } = useParams<{ userId: string }>();
+  const [userProfile, setUserProfile] =
+    useState<MasterModel.ProfileResponse | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [tabSelected, setTabSelected] = useState<AssignTabsKey>(
+    AssignTabsKey.group,
+  );
+  useEffect(() => {
+    const fetchUserProfile = async () => {
+      try {
+        setLoading(true);
+        const profile = await apiQueryUserById(userId || '');
+        setUserProfile(profile);
+      } catch (error) {
+        console.error('Failed to fetch user profile:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchUserProfile();
+  }, [userId]);
+  return (
+    <PageContainer
+      title={userProfile?.email}
+      header={{
+        onBack: () => history.push(ROUTE_MANAGER_USERS),
+      }}
+      loading={loading}
+      tabList={[
+        {
+          tab: 'Phân quyền đơn vị',
+          key: AssignTabsKey.group,
+        },
+        {
+          tab: 'Chia sẻ thiết bị',
+          key: AssignTabsKey.device,
+        },
+      ]}
+      onTabChange={(key) => {
+        setTabSelected(key as AssignTabsKey);
+      }}
+    >
+      {tabSelected === AssignTabsKey.group && (
+        <AssignGroup user={userProfile} />
+      )}
+      {tabSelected === AssignTabsKey.device && (
+        <ShareThing user={userProfile} />
+      )}
+    </PageContainer>
+  );
+};
+
+export default AssignUserPage;

src/pages/Manager/User/Permission/components/AssignGroup.tsx

@@ -0,0 +1,318 @@
+import TreeSelectedGroup from '@/components/shared/TreeSelectedGroup';
+import { HTTPSTATUS } from '@/constants';
+import {
+  apiAssignToGroup,
+  apiQueryMembers,
+  apiUnassignToGroup,
+} from '@/services/master/GroupController';
+import { apiChangeRoleUser } from '@/services/master/UserController';
+import { DeleteOutlined } from '@ant-design/icons';
+import { ActionType, ProList, ProListMetas } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import {
+  Button,
+  Flex,
+  message,
+  Modal,
+  Popconfirm,
+  Segmented,
+  Space,
+  Tag,
+  Tooltip,
+  Typography,
+} from 'antd';
+import { useRef, useState } from 'react';
+const { Text } = Typography;
+type AssignGroupProps = {
+  user: MasterModel.ProfileResponse | null;
+};
+const AssignGroup = ({ user }: AssignGroupProps) => {
+  const groupActionRef = useRef<ActionType>();
+  const intl = useIntl();
+  const [assignedGroups, setAssignedGroups] = useState<MasterModel.GroupNode[]>(
+    [],
+  );
+  const [messageApi, contextHolder] = message.useMessage();
+  const [userRole, setUserRole] = useState<string>(
+    user?.metadata?.user_type || 'users',
+  );
+  const [open, setOpen] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [groupSelected, setGroupSelected] = useState<string | string[] | null>(
+    null,
+  );
+  const columns: ProListMetas<MasterModel.GroupNode> = {
+    title: {
+      dataIndex: 'name',
+
+      render: (_, item: MasterModel.GroupNode) => (
+        <Typography.Paragraph
+          style={{
+            marginBottom: 0,
+            marginLeft: 8,
+            verticalAlign: 'middle',
+            display: 'inline-block',
+          }}
+          copyable
+        >
+          {item?.name}
+        </Typography.Paragraph>
+      ),
+    },
+    subTitle: {
+      render: (_, entity) => {
+        return (
+          <Space>
+            <Tooltip
+              title={intl.formatMessage({
+                id: 'master.groups.code',
+                defaultMessage: 'Mã đơn vị',
+              })}
+            >
+              <Tag color="blue">{entity?.metadata?.code || '-'}</Tag>
+            </Tooltip>
+            <Tooltip
+              title={intl.formatMessage({
+                id: 'master.groups.short_name',
+                defaultMessage: 'Tên viết tắt',
+              })}
+            >
+              <Tag color="green">{entity?.metadata?.short_name || '-'}</Tag>
+            </Tooltip>
+          </Space>
+        );
+      },
+    },
+    actions: {
+      render: (_, item: MasterModel.GroupNode) => {
+        return (
+          <Popconfirm
+            title={`${intl.formatMessage({
+              id: 'master.users.unassign.content',
+              defaultMessage: 'Are you sure unassign this group',
+            })} ${item?.name}?`}
+            onConfirm={async () => {
+              try {
+                const body: MasterModel.AssignMemberRequest = {
+                  group_id: item.id,
+                  type: 'users',
+                  members: [user?.id || ''],
+                };
+                const success = await apiUnassignToGroup(body);
+                if (success.status === HTTPSTATUS.HTTP_NOCONTENT) {
+                  messageApi.success(
+                    intl.formatMessage({
+                      id: 'master.users.unassign.success',
+                      defaultMessage: 'Unassign group successfully',
+                    }),
+                  );
+                  groupActionRef.current?.reload();
+                } else {
+                  throw new Error('Unassign group failed');
+                }
+              } catch (error) {
+                console.error('Error when unassign group: ', error);
+                messageApi.error(
+                  intl.formatMessage({
+                    id: 'master.users.unassign.fail',
+                    defaultMessage: 'Unassign group failed',
+                  }),
+                );
+              }
+            }}
+          >
+            <Button type="primary" danger icon={<DeleteOutlined />} />
+          </Popconfirm>
+        );
+      },
+    },
+  };
+
+  const showModal = () => {
+    setOpen(true);
+  };
+
+  const handleAssignUserToGroup = async () => {
+    setConfirmLoading(true);
+    try {
+      const body: MasterModel.AssignMemberRequest = {
+        group_id: groupSelected as string,
+        type: userRole === 'admin' ? 'admin' : 'users',
+        members: [user?.id || ''],
+      };
+      const resp = await apiAssignToGroup(body);
+      if (resp.status === HTTPSTATUS.HTTP_SUCCESS) {
+        messageApi.success(
+          intl.formatMessage({
+            id: 'master.users.assign.success',
+            defaultMessage: 'Assign group successfully',
+          }),
+        );
+        groupActionRef.current?.reload();
+        setOpen(false);
+      } else {
+        throw new Error('Assign group failed');
+      }
+    } catch (error) {
+      console.error('Error when assign group: ', error);
+      messageApi.error(
+        intl.formatMessage({
+          id: 'master.users.assign.fail',
+          defaultMessage: 'Assign group failed',
+        }),
+      );
+    } finally {
+      setConfirmLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setOpen(false);
+  };
+  return (
+    <>
+      {contextHolder}
+      <Modal
+        title={intl.formatMessage({
+          id: 'master.users.group_assign.button.title',
+          defaultMessage: 'Assign Groups',
+        })}
+        open={open}
+        onOk={handleAssignUserToGroup}
+        confirmLoading={confirmLoading}
+        onCancel={handleCancel}
+      >
+        <Flex vertical gap={5}>
+          <Text>
+            {intl.formatMessage({
+              id: 'master.users.group_assign.select.title',
+              defaultMessage: 'Select Group',
+            })}
+            :
+          </Text>
+          <TreeSelectedGroup
+            disabled
+            groupIds={assignedGroups.map((group) => group.id)}
+            onSelected={(value) => {
+              setGroupSelected(value);
+            }}
+          />
+        </Flex>
+      </Modal>
+      <ProList<MasterModel.GroupNode>
+        headerTitle={intl.formatMessage({
+          id: 'master.users.group_assign.title',
+          defaultMessage: 'Assigned list',
+        })}
+        actionRef={groupActionRef}
+        metas={columns}
+        toolBarRender={() => [
+          user?.metadata?.user_type !== 'enduser' && (
+            <Segmented
+              key="role"
+              value={userRole}
+              onChange={(value) => {
+                Modal.confirm({
+                  title: intl.formatMessage({
+                    id: 'master.users.change_role.confirm.title',
+                    defaultMessage: 'Xác nhận thay đổi vai trò',
+                  }),
+                  content:
+                    userRole === 'admin'
+                      ? intl.formatMessage({
+                          id: 'master.users.change_role.user.content',
+                          defaultMessage:
+                            'Bạn có chắc muốn thay đổi vai trò thành giám sát đơn vị không?',
+                        })
+                      : intl.formatMessage({
+                          id: 'master.users.change_role.admin.content',
+                          defaultMessage:
+                            'Bạn có chắc muốn thay đổi vai trò thành quản lý đơn vị không?',
+                        }),
+                  onOk: async () => {
+                    try {
+                      const resp = await apiChangeRoleUser(
+                        user?.id || '',
+                        value as 'users' | 'admin',
+                      );
+                      if (resp.status === HTTPSTATUS.HTTP_SUCCESS) {
+                        messageApi.success(
+                          intl.formatMessage({
+                            id: 'master.users.change_role.user.success',
+                            defaultMessage: 'Role change successful',
+                          }),
+                        );
+                        groupActionRef.current?.reload();
+                        setUserRole(value as string);
+                      } else {
+                        throw new Error('Change role failed');
+                      }
+                    } catch (error) {
+                      console.error('Error when change role user: ', error);
+                      messageApi.error(
+                        intl.formatMessage({
+                          id: 'master.users.change_role.user.fail',
+                          defaultMessage: 'Role change failed',
+                        }),
+                      );
+                    }
+                  },
+                });
+              }}
+              options={[
+                {
+                  label: intl.formatMessage({
+                    id: 'master.users.role.user',
+                    defaultMessage: 'Giám sát',
+                  }),
+                  value: 'users',
+                },
+                {
+                  label: intl.formatMessage({
+                    id: 'master.users.role.admin',
+                    defaultMessage: 'Quản lý',
+                  }),
+                  value: 'admin',
+                },
+              ]}
+            />
+          ),
+          <Button
+            key="assign"
+            type="primary"
+            onClick={() => {
+              showModal();
+            }}
+          >
+            {intl.formatMessage({
+              id: 'master.users.group_assign.button.title',
+              defaultMessage: 'Assign',
+            })}
+          </Button>,
+        ]}
+        request={async () => {
+          if (user?.id) {
+            const resp = await apiQueryMembers(user.id);
+            if (resp?.groups) {
+              setAssignedGroups(resp.groups);
+              return Promise.resolve({
+                success: true,
+                data: resp?.groups,
+                total: resp?.groups?.length || 0,
+              });
+            }
+          }
+          return Promise.resolve({
+            success: false,
+            data: [],
+            total: 0,
+          });
+        }}
+        rowKey="id"
+        search={false}
+      />
+    </>
+  );
+};
+
+export default AssignGroup;

src/pages/Manager/User/Permission/components/ShareThing.tsx

@@ -0,0 +1,100 @@
+import { ActionType, ProList } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import { message } from 'antd';
+import { useRef } from 'react';
+
+type ShareThingProps = {
+  user: MasterModel.ProfileResponse | null;
+};
+const ShareThing = ({ user }: ShareThingProps) => {
+  const listActionRef = useRef<ActionType>();
+  const intl = useIntl();
+  const [messageAPI, contextHolder] = message.useMessage();
+  return (
+    <>
+      {contextHolder}
+      <ProList
+        headerTitle={intl.formatMessage({
+          id: 'pages.users.things.list',
+          defaultMessage: 'List things',
+        })}
+        actionRef={listActionRef}
+        toolBarRender={() => [
+          //   <Button
+          //     type="primary"
+          //     key="primary"
+          //     onClick={() => {
+          //       handleShareModalVisible(true);
+          //     }}
+          //   >
+          //     <PlusOutlined />{" "}
+          //     <FormattedMessage
+          //       id="pages.things.share.text"
+          //       defaultMessage="Share"
+          //     />
+          //   </Button>,
+        ]}
+        metas={columns}
+        request={async () => {
+          const query = {
+            type: 'sub',
+            id: user?.id || '',
+          };
+          if (user?.id) {
+            const resp = (await apiQueryThingsByPolicy(
+              query,
+            )) as PolicyResponse;
+            const { relations } = resp;
+            if (relations) {
+              const queries = relations.map(async (rel: PolicyRelation) => {
+                const thg = await apiQueryThing(rel.id);
+                return {
+                  ...thg,
+                  relations: rel?.actions,
+                };
+              });
+              const policies = await Promise.all(queries);
+              return Promise.resolve({
+                success: true,
+                data: policies,
+                total: policies.length,
+              });
+            }
+          }
+          return Promise.resolve({
+            success: false,
+            data: [],
+            total: 0,
+          });
+        }}
+        rowKey="id"
+        search={false}
+        // rowSelection={{
+        //   selectedRowKeys: selectedRowsState.map((row) => row.id).filter((id): id is string => id !== undefined),
+        //   onChange: (_: React.Key[], selectedRows: API.Thing[]) => {
+        //     setSelectedRows(selectedRows);
+        //   },
+        // }}
+      />
+      {/* <FormShareVms
+        visible={shareModalVisibale}
+        onVisibleChange={handleShareModalVisible}
+        user={user}
+        onSubmit={async (values: ShareFormValues) => {
+          console.log(values);
+          const success = await handleShare(values);
+          if (success) {
+            handleShareModalVisible(false);
+            onReload();
+            if (actionRef.current) {
+              //await delay(1000);
+              actionRef.current.reload();
+            }
+          }
+        }}
+      /> */}
+    </>
+  );
+};
+
+export default ShareThing;

src/pages/Manager/User/components/CreateUser.tsx

@@ -232,6 +232,7 @@ const CreateUser = ({ message, onSuccess }: CreateUserProps) => {
           {
             validator: async (rule, value) => {
               if (value) {
+                try {
                   const query: MasterModel.SearchUserPaginationBody = {
                     offset: 0,
                     limit: 1,
@@ -251,6 +252,9 @@ const CreateUser = ({ message, onSuccess }: CreateUserProps) => {
                       ),
                     );
                   }
+                } catch (error) {
+                  return Promise.resolve();
+                }
               }
               return Promise.resolve();
             },

src/pages/Manager/User/index.tsx

@@ -2,17 +2,24 @@ import IconFont from '@/components/IconFont';
 import TreeGroup from '@/components/shared/TreeGroup';
 import { DEFAULT_PAGE_SIZE } from '@/constants';
 import {
+  ROUTE_MANAGER_USERS,
+  ROUTE_MANAGER_USERS_PERMISSIONS,
+} from '@/constants/routes';
+import {
+  apiDeleteUser,
   apiQueryUsers,
   apiQueryUsersByGroup,
 } from '@/services/master/UserController';
+import { DeleteOutlined } from '@ant-design/icons';
 import {
   ActionType,
+  FooterToolbar,
   ProCard,
   ProColumns,
   ProTable,
 } from '@ant-design/pro-components';
-import { FormattedMessage, useIntl } from '@umijs/max';
+import { FormattedMessage, history, useIntl } from '@umijs/max';
-import { Button, Grid } from 'antd';
+import { Button, Grid, Popconfirm, theme } from 'antd';
 import message from 'antd/es/message';
 import Paragraph from 'antd/lib/typography/Paragraph';
 import { useRef, useState } from 'react';
@@ -22,18 +29,21 @@ const ManagerUserPage = () => {
   const { useBreakpoint } = Grid;
   const intl = useIntl();
   const screens = useBreakpoint();
+  const { token } = theme.useToken();
   const actionRef = useRef<ActionType | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [messageApi, contextHolder] = message.useMessage();
   const [selectedRowsState, setSelectedRowsState] = useState<
     MasterModel.ProfileResponse[]
   >([]);
+
   const [groupCheckedKeys, setGroupCheckedKeys] = useState<
     string | string[] | null
   >(null);
 
   const handleClickAssign = (user: MasterModel.ProfileResponse) => {
-    console.log('User ', user);
+    const path = `${ROUTE_MANAGER_USERS}/${user.id}/${ROUTE_MANAGER_USERS_PERMISSIONS}`;
+    history.push(path);
   };
 
   const columns: ProColumns<MasterModel.ProfileResponse>[] = [
@@ -53,6 +63,7 @@ const ManagerUserPage = () => {
             marginBottom: 0,
             verticalAlign: 'middle',
             display: 'inline-block',
+            color: token.colorText,
           }}
           copyable
         >
@@ -82,6 +93,7 @@ const ManagerUserPage = () => {
               marginBottom: 0,
               verticalAlign: 'middle',
               display: 'inline-block',
+              color: token.colorText,
             }}
             copyable
           >
@@ -124,6 +136,48 @@ const ManagerUserPage = () => {
     },
   ];
 
+  const handleRemove = async (selectedRows: MasterModel.ProfileResponse[]) => {
+    const key = 'remove_user';
+    if (!selectedRows) return true;
+
+    try {
+      messageApi.open({
+        type: 'loading',
+        content: intl.formatMessage({
+          id: 'common.deleting',
+          defaultMessage: 'deleting...',
+        }),
+        duration: 0,
+        key,
+      });
+      const allDelete = selectedRows.map(
+        async (row: MasterModel.ProfileResponse) => {
+          await apiDeleteUser(row?.id || '');
+        },
+      );
+      await Promise.all(allDelete);
+      messageApi.open({
+        type: 'success',
+        content: intl.formatMessage({
+          id: 'master.users.delete.success',
+          defaultMessage: 'Deleted successfully and will refresh soon',
+        }),
+        key,
+      });
+      return true;
+    } catch (error) {
+      messageApi.open({
+        type: 'error',
+        content: intl.formatMessage({
+          id: 'master.users.delete.fail',
+          defaultMessage: 'Delete failed, please try again!',
+        }),
+        key,
+      });
+      return false;
+    }
+  };
+
   return (
     <>
       {contextHolder}
@@ -182,6 +236,7 @@ const ManagerUserPage = () => {
               const offset = current === 1 ? 0 : (current - 1) * size;
               setIsLoading(true);
               // If groups are checked, use queryUsersByGroup
+              try {
                 if (groupCheckedKeys && groupCheckedKeys.length > 0) {
                   // Ensure groupCheckedKeys is an array
                   const groupIdsArray = Array.isArray(groupCheckedKeys)
@@ -224,7 +279,8 @@ const ManagerUserPage = () => {
                     dir: 'asc',
                   };
                   if (email) query.email = email;
-                if (Object.keys(metadata).length > 0) query.metadata = metadata;
+                  if (Object.keys(metadata).length > 0)
+                    query.metadata = metadata;
 
                   const response = await apiQueryUsers(query);
                   setIsLoading(false);
@@ -234,6 +290,14 @@ const ManagerUserPage = () => {
                     total: response.total,
                   };
                 }
+              } catch (error) {
+                setIsLoading(false);
+                return {
+                  data: [],
+                  success: false,
+                  total: 0,
+                };
+              }
             }}
             options={{
               search: false,
@@ -255,6 +319,53 @@ const ManagerUserPage = () => {
           />
         </ProCard>
       </ProCard>
+      {selectedRowsState?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              <FormattedMessage
+                id="master.footer.chosen"
+                defaultMessage="Chosen"
+              />{' '}
+              <a
+                style={{
+                  fontWeight: 600,
+                }}
+              >
+                {selectedRowsState.length}
+              </a>{' '}
+              <FormattedMessage
+                id="master.users.table.pagination"
+                defaultMessage="users"
+              />
+            </div>
+          }
+        >
+          <Popconfirm
+            title={intl.formatMessage({
+              id: 'master.users.deletion.title',
+              defaultMessage: 'Are you sure to delete this selected items',
+            })}
+            okText={intl.formatMessage({
+              id: 'common.sure',
+              defaultMessage: 'Sure',
+            })}
+            onConfirm={async () => {
+              const success = await handleRemove(selectedRowsState);
+              if (success) {
+                setSelectedRowsState([]);
+                if (actionRef.current) {
+                  actionRef.current.reload();
+                }
+              }
+            }}
+          >
+            <Button icon={<DeleteOutlined />} type="primary" danger>
+              <FormattedMessage id="common.delete" defaultMessage="Delete" />
+            </Button>
+          </Popconfirm>
+        </FooterToolbar>
+      )}
     </>
   );
 };

src/services/master/GroupController.ts

@@ -55,3 +55,20 @@ export async function apiDeleteGroup(group_id: string) {
     },
   );
 }
+
+export async function apiUnassignToGroup(
+  body: MasterModel.AssignMemberRequest,
+) {
+  return request(`${API_GROUPS}/${body.group_id}/members`, {
+    method: 'DELETE',
+    data: body,
+    getResponse: true,
+  });
+}
+export async function apiAssignToGroup(body: MasterModel.AssignMemberRequest) {
+  return request(`${API_GROUPS}/${body.group_id}/members`, {
+    method: 'POST',
+    data: body,
+    getResponse: true,
+  });
+}

src/services/master/UserController.ts

@@ -1,4 +1,4 @@
-import { API_USERS, API_USERS_BY_GROUP } from '@/constants/api';
+import { API_GROUPS, API_USERS, API_USERS_BY_GROUP } from '@/constants/api';
 import { request } from '@umijs/max';
 
 export async function apiQueryUsers(
@@ -9,6 +9,10 @@ export async function apiQueryUsers(
   });
 }
 
+export async function apiQueryUserById(userId: string) {
+  return request<MasterModel.ProfileResponse>(`${API_USERS}/${userId}`);
+}
+
 export async function apiQueryUsersByGroup(
   group_id: string,
 ): Promise<MasterModel.UserResponse> {
@@ -22,3 +26,19 @@ export async function apiCreateUsers(body: MasterModel.CreateUserBodyRequest) {
     getResponse: true,
   });
 }
+export async function apiChangeRoleUser(
+  userId: string,
+  role: 'users' | 'admin',
+) {
+  return request(`${API_GROUPS}/${userId}/${role}`, {
+    method: 'PUT',
+    getResponse: true,
+  });
+}
+
+export async function apiDeleteUser(userId: string) {
+  return request(`${API_USERS}/${userId}`, {
+    method: 'DELETE',
+    getResponse: true,
+  });
+}

src/services/master/typings.d.ts

@@ -36,6 +36,7 @@ declare namespace MasterModel {
     subtopic?: string;
   }
 
+  // Auth
   interface LoginRequestBody {
     guid: string;
     email: string;
@@ -66,6 +67,7 @@ declare namespace MasterModel {
     user_type?: 'admin' | 'enduser' | 'sysadmin' | 'users';
   }
 
+  // User
   interface CreateUserMetadata extends ProfileMetadata {
     group_id?: string;
   }
@@ -96,7 +98,7 @@ declare namespace MasterModel {
     thing_id?: string;
     time?: number;
   }
-
+  // Alarm
   interface Alarm {
     name?: string;
     time?: number;
@@ -110,6 +112,8 @@ declare namespace MasterModel {
     thing_name?: string;
     thing_type?: string;
   }
+
+  // Thing
   interface ThingMetadata {
     address?: string;
     alarm_list?: string;
@@ -155,6 +159,25 @@ declare namespace MasterModel {
     metadata?: T;
   }
 
+  // Thing Policy
+  interface ThingPolicy {
+    next_page_token?: string;
+    relations?: Relation[];
+  }
+
+  interface Relation {
+    id?: string;
+    actions?: Action[];
+  }
+
+  enum Action {
+    Delete = 'delete',
+    Read = 'read',
+    Write = 'write',
+  }
+
+  // Group
+
   interface GroupBodyRequest {
     id?: string;
     name: string;
@@ -200,6 +223,8 @@ declare namespace MasterModel {
     [key: string]: any;
   }
 
+  // Log
+
   type LogTypeRequest = 'user_logs' | undefined;
 
   interface LogResponse {
@@ -222,4 +247,12 @@ declare namespace MasterModel {
     time?: number;
     string_value?: string;
   }
+
+  // User
+
+  interface AssignMemberRequest {
+    group_id: string;
+    type: 'users' | 'admin' | 'things' | undefined;
+    members: string[];
+  }
 }