Fix: Home and team page style adjustment, and some bug fixes #10703 (#10805)

### What problem does this PR solve?

Fix: Home and team page style adjustment, and some bug fixes #10703

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/user-setting/setting-team/user-table.tsx

@@ -1,75 +1,160 @@
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import { useListTenantUser } from '@/hooks/user-setting-hooks';
-import { ITenantUser } from '@/interfaces/database/user-setting';
 import { formatDate } from '@/utils/date';
-import { DeleteOutlined } from '@ant-design/icons';
-import type { TableProps } from 'antd';
-import { Button, Table, Tag } from 'antd';
 import { upperFirst } from 'lodash';
+import { ArrowDown, ArrowUp, ArrowUpDown, Trash2 } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TenantRole } from '../constants';
 import { useHandleDeleteUser } from './hooks';
 
-const ColorMap = {
-  [TenantRole.Normal]: 'green',
-  [TenantRole.Invite]: 'orange',
-  [TenantRole.Owner]: 'red',
+const ColorMap: Record<string, string> = {
+  [TenantRole.Normal]: 'bg-transparent text-text-primary',
+  [TenantRole.Invite]: 'bg-accent-primary-5 bg-accent-primary rounded-sm',
+  [TenantRole.Owner]: 'bg-red-100 text-red-800',
 };
 
-const UserTable = () => {
+const UserTable = ({ searchUser }: { searchUser: string }) => {
   const { data, loading } = useListTenantUser();
   const { handleDeleteTenantUser } = useHandleDeleteUser();
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | null>(null);
   const { t } = useTranslation();
+  const sortedData = useMemo(() => {
+    console.log('sortedData', data, searchUser);
+    if (!data || data.length === 0) return data;
+    let filtered = data;
+    if (searchUser) {
+      filtered = filtered.filter(
+        (tenant) =>
+          tenant.nickname.toLowerCase().includes(searchUser.toLowerCase()) ||
+          tenant.email.toLowerCase().includes(searchUser.toLowerCase()),
+      );
+    }
+    if (sortOrder) {
+      filtered = [...filtered].sort((a, b) => {
+        const dateA = new Date(a.update_date).getTime();
+        const dateB = new Date(b.update_date).getTime();
 
-  const columns: TableProps<ITenantUser>['columns'] = [
-    {
-      title: t('common.name'),
-      dataIndex: 'nickname',
-      key: 'nickname',
-    },
-    {
-      title: t('setting.email'),
-      dataIndex: 'email',
-      key: 'email',
-    },
-    {
-      title: t('setting.role'),
-      dataIndex: 'role',
-      key: 'role',
-      render(value, { role }) {
-        return (
-          <Tag color={ColorMap[role as keyof typeof ColorMap]}>
-            {upperFirst(role)}
-          </Tag>
-        );
-      },
-    },
-    {
-      title: t('setting.updateDate'),
-      dataIndex: 'update_date',
-      key: 'update_date',
-      render(value) {
-        return formatDate(value);
-      },
-    },
-    {
-      title: t('common.action'),
-      key: 'action',
-      render: (_, record) => (
-        <Button type="text" onClick={handleDeleteTenantUser(record.user_id)}>
-          <DeleteOutlined size={20} />
-        </Button>
-      ),
-    },
-  ];
+        if (sortOrder === 'asc') {
+          return dateA - dateB;
+        } else {
+          return dateB - dateA;
+        }
+      });
+    }
 
+    return filtered;
+  }, [data, sortOrder, searchUser]);
+  const toggleSortOrder = () => {
+    if (sortOrder === 'asc') {
+      setSortOrder('desc');
+    } else if (sortOrder === 'desc') {
+      setSortOrder(null);
+    } else {
+      setSortOrder('asc');
+    }
+  };
+
+  const renderSortIcon = () => {
+    if (sortOrder === 'asc') {
+      return <ArrowUp className="ml-1 h-4 w-4 " />;
+    } else if (sortOrder === 'desc') {
+      return <ArrowDown className="ml-1 h-4 w-4" />;
+    } else {
+      return <ArrowUpDown className="ml-1 h-4 w-4" />;
+    }
+  };
   return (
-    <Table<ITenantUser>
-      rowKey={'user_id'}
-      columns={columns}
-      dataSource={data}
-      loading={loading}
-      pagination={false}
-    />
+    <div className="rounded-lg bg-bg-input scrollbar-auto overflow-hidden border border-border-default">
+      <Table rootClassName="rounded-lg">
+        <TableHeader>
+          <TableRow>
+            <TableHead className="h-12 px-4">{t('common.name')}</TableHead>
+            <TableHead
+              className="h-12 px-4 cursor-pointer"
+              onClick={toggleSortOrder}
+            >
+              <div className="flex items-center">
+                {t('setting.updateDate')}
+                {renderSortIcon()}
+              </div>
+            </TableHead>
+            <TableHead className="h-12 px-4">{t('setting.email')}</TableHead>
+            <TableHead className="h-12 px-4">{t('setting.role')}</TableHead>
+            <TableHead className="h-12 px-4">{t('common.action')}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {loading ? (
+            <TableRow>
+              <TableCell colSpan={5} className="h-24 text-center">
+                <div className="flex items-center justify-center">
+                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"></div>
+                </div>
+              </TableCell>
+            </TableRow>
+          ) : sortedData && sortedData.length > 0 ? (
+            sortedData.map((record) => (
+              <TableRow key={record.user_id} className="hover:bg-bg-card">
+                <TableCell className="p-4 ">
+                  <div className="flex gap-1 items-center">
+                    <RAGFlowAvatar
+                      isPerson
+                      className="size-4"
+                      avatar={record.avatar}
+                      name={record.nickname}
+                    />
+                    {record.nickname}
+                  </div>
+                </TableCell>
+                <TableCell className="p-4">
+                  {formatDate(record.update_date)}
+                </TableCell>
+                <TableCell className="p-4">{record.email}</TableCell>
+                <TableCell className="p-4">
+                  {record.role === TenantRole.Normal && (
+                    <Badge className={ColorMap[record.role]}>
+                      {upperFirst('Member')}
+                    </Badge>
+                  )}
+                  {record.role !== TenantRole.Normal && (
+                    <Badge className={ColorMap[record.role]}>
+                      {upperFirst(record.role)}
+                    </Badge>
+                  )}
+                </TableCell>
+                <TableCell className="p-4">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 p-0"
+                    onClick={handleDeleteTenantUser(record.user_id)}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={5} className="h-24 text-center">
+                {t('common.noData')}
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
   );
 };