feat: add accounts table

client/src/pages/AccountsPage.tsx

@@ -1,9 +1,12 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { User } from '@/types/user';
+import { AccountStatus, AllUser, AllUserResponse } from '@/types/user';
 import Header from '@/components/Header';
 import ContentDrawer from '@/components/ContentDrawer';
 import UserCreate from '@/components/UserCreate';
+import { Avatar, Table } from 'antd';
+import { TableProps } from 'antd/lib';
+import { UserService } from '@/services/userService';
 
 export default function AccountsPage() {
   const { t } = useTranslation();
@@ -12,7 +15,93 @@ export default function AccountsPage() {
   const showDrawer = () => setOpen(true);
   const closeDrawer = () => setOpen(false);
 
-  const [accounts, setAccounts] = useState<User[]>([]);
+  const [accounts, setAccounts] = useState<AllUserResponse>({
+    amountCount: 0,
+    amountPages: 0,
+    users: [],
+  });
+
+  useEffect(() => {
+    async function getUsers() {
+      const data = await UserService.getUsers();
+      setAccounts(data);
+    }
+
+    getUsers();
+  }, []);
+
+  const statusColor = {
+    ACTIVE: '#27AE60',
+    DISABLED: '#606060',
+    BLOCKED: '#FF0000',
+    DELETED: '#B30000',
+  };
+
+  const columns: TableProps<AllUser>['columns'] = [
+    {
+      title: '#',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: t('nameLogin'),
+      dataIndex: 'nameLogin',
+      key: 'nameLogin',
+      render: (text, record) => (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+          <div
+            style={{
+              height: '32px',
+              width: '32px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Avatar
+              size={32}
+              src={`https://gamma.heado.ru/go/ava?name=${record.login}`}
+            />
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <div>{record.name}</div>
+            <div style={{ color: '#606060' }}>{record.email}</div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: 'E-mail',
+      dataIndex: 'email',
+      key: 'email',
+    },
+    {
+      title: t('tenant'),
+      dataIndex: 'bindTenantId',
+      key: 'tenant',
+    },
+    {
+      title: t('role'),
+      dataIndex: 'role',
+      key: 'role',
+      render: (text) => <div>{t(text)}</div>,
+    },
+    {
+      title: t('createdAt'),
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+    },
+    {
+      title: t('status'),
+      dataIndex: 'status',
+      key: 'status',
+      render: (text) => (
+        <div style={{ color: statusColor[text as AccountStatus] }}>
+          {t(text)}
+        </div>
+      ),
+    },
+  ];
 
   return (
     <>
@@ -31,6 +120,12 @@ export default function AccountsPage() {
           />
         }
       />
+      <Table
+        columns={columns}
+        dataSource={accounts.users}
+        pagination={{ pageSize: 10, current: 1, total: accounts.amountCount }}
+        rowKey={'id'}
+      />
 
       <ContentDrawer open={open} closeDrawer={closeDrawer} type="create">
         <UserCreate />