Feat: Add TeamManagement component #3221 (#3626)

### What problem does this PR solve?

Feat: Add TeamManagement component #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/profile-setting/index.tsx

@@ -1,11 +1,9 @@
 import { Button } from '@/components/ui/button';
 import { ArrowLeft } from 'lucide-react';
 import { Outlet } from 'umi';
-import { useGetPageTitle } from './hooks';
 import { SideBar } from './sidebar';
 
 export default function ProfileSetting() {
-  const title = useGetPageTitle();
   return (
     <div className="flex flex-col w-full h-screen bg-background text-foreground">
       <header className="flex items-center border-b">
@@ -24,9 +22,9 @@ export default function ProfileSetting() {
       <div className="flex flex-1 bg-muted/50">
         <SideBar></SideBar>
 
-        <main className="flex-1 p-10">
-          <h1 className="text-3xl font-bold mb-6"> {title}</h1>
+        <main className="flex-1 ">
           <Outlet></Outlet>
+          {/* <h1 className="text-3xl font-bold mb-6"> {title}</h1> */}
         </main>
       </div>
     </div>

web/src/pages/profile-setting/profile/index.tsx

@@ -11,7 +11,8 @@ import {
 
 export default function Profile() {
   return (
-    <section>
+    <section className="p-8">
+      <h1 className="text-3xl font-bold mb-6">User profile</h1>
       <Avatar className="w-[120px] h-[120px] mb-6">
         <AvatarImage
           src={

web/src/pages/profile-setting/team/index.tsx

@@ -1,3 +1,107 @@
-export default function Team() {
-  return <div>team</div>;
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
+import { ChevronDown, MoreVertical, Plus, UserPlus } from 'lucide-react';
+
+interface TeamMember {
+  email: string;
+  name: string;
+  role: string;
 }
+
+const TeamManagement = () => {
+  const teamMembers: TeamMember[] = [
+    { email: '[email protected]', name: 'Yifan Wu', role: 'Admin' },
+    { email: '[email protected]', name: 'Yifan Wu', role: 'Admin' },
+  ];
+
+  const stats = {
+    project: 1,
+    token: '1,000',
+    storage: '1GB',
+  };
+
+  return (
+    <div className="min-h-screen text-white p-8 ">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-4xl font-bold">Team management</h1>
+          <Button className="hover:bg-[#6B4FD8] text-white bg-colors-background-core-standard">
+            <Plus className="mr-2 h-4 w-4" />
+            Create team
+          </Button>
+        </div>
+
+        <div className="mb-8">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-2xl font-semibold">Yifan's team</h2>
+            <Button variant="secondary" size="icon">
+              <ChevronDown className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <Card className="border-0 p-6 mb-6 bg-colors-background-inverse-weak">
+            <div className="grid grid-cols-3 gap-8">
+              <div>
+                <p className="text-sm text-gray-400 mb-2">Project</p>
+                <p className="text-2xl font-semibold">{stats.project}</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-400 mb-2">Token</p>
+                <p className="text-2xl font-semibold">{stats.token}</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-400 mb-2">Storage</p>
+                <p className="text-2xl font-semibold">{stats.storage}</p>
+              </div>
+            </div>
+          </Card>
+
+          <Card className="border-0 p-6 bg-colors-background-inverse-weak">
+            <Table>
+              <TableBody>
+                {teamMembers.map((member, idx) => (
+                  <TableRow key={idx}>
+                    <TableCell>{member.email}</TableCell>
+                    <TableCell>{member.name}</TableCell>
+                    <TableCell className="flex items-center justify-end">
+                      <span className="text-colors-text-core-standard">
+                        {member.role}
+                      </span>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="icon">
+                            <MoreVertical className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem>Edit</DropdownMenuItem>
+                          <DropdownMenuItem className="text-red-600">
+                            Remove
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+
+            <Button variant="outline" className="mt-6 ">
+              <UserPlus className="mr-2 h-4 w-4" />
+              Invite member
+            </Button>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamManagement;

web/tailwind.config.js

@@ -29,6 +29,8 @@ module.exports = {
         'colors-outline-sentiment-primary':
           'var(--colors-outline-sentiment-primary)',
 
+        'colors-text-core-standard': 'var(--colors-text-core-standard)',
+
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',