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

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
-          src="/avatar.svg"
-          alt="avatar"
-          style={{
-            width: 32,
-            height: 32,
-            borderRadius: '50%',
-            cursor: 'pointer',
-          }}
-        />
-        <span className="font-bold">
+        <UserOutlined />
+        <span className="font-sans">
           {currentUserProfile?.metadata?.full_name || ''}
         </span>
       </div>