[TOOL-3476] Dashboard: Add Transfer Project in Project settings page (#6316)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the project management features by introducing team member retrieval, project transfer capabilities, and UI improvements in the `ProjectGeneralSettingsPage`. It also updates the handling of team roles and member information.

### Detailed summary
- Updated `AccountTeamsUI` to handle empty image string for avatars.
- Added `getMemberById` function to fetch team member details.
- Replaced `getMembers` with `getMemberById` in `Page` component.
- Enhanced `DangerSettingCard` to include `isDisabled` prop.
- Refactored `ProjectGeneralSettingsPage` to manage team roles and project transfers.
- Introduced `TransferProject` component for transferring projects between teams.
- Updated storybook stories to include owner and member account scenarios.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/api/team-members.ts

@@ -47,3 +47,26 @@ export async function getMembers(teamSlug: string) {
 
   return undefined;
 }
+
+export async function getMemberById(teamSlug: string, memberId: string) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return undefined;
+  }
+
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${teamSlug}/members/${memberId}`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+
+  if (res.ok) {
+    return (await res.json())?.result as TeamMember;
+  }
+
+  return undefined;
+}

apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx

@@ -6,7 +6,6 @@ import {
   DialogClose,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -17,13 +16,14 @@ export function DangerSettingCard(props: {
   title: string;
   className?: string;
   footerClassName?: string;
-  description: string;
+  description: React.ReactNode;
   buttonLabel: string;
   buttonOnClick: () => void;
+  isDisabled?: boolean;
   isPending: boolean;
   confirmationDialog: {
     title: string;
-    description: string;
+    description: React.ReactNode;
   };
   children?: React.ReactNode;
 }) {
@@ -55,28 +55,30 @@ export function DangerSettingCard(props: {
             <Button
               variant="destructive"
               className="gap-2 bg-red-600 font-semibold text-white hover:bg-red-600/80"
-              disabled={props.isPending}
+              disabled={props.isDisabled || props.isPending}
             >
               {props.isPending && <Spinner className="size-3" />}
               {props.buttonLabel}
             </Button>
           </DialogTrigger>
 
           <DialogContent
-            className="z-[10001]"
+            className="z-[10001] overflow-hidden p-0"
             dialogOverlayClassName="z-[10000]"
           >
-            <DialogHeader className="pr-10">
-              <DialogTitle className="leading-snug">
-                {props.confirmationDialog.title}
-              </DialogTitle>
+            <div className="p-6">
+              <DialogHeader className="pr-10">
+                <DialogTitle className="leading-snug">
+                  {props.confirmationDialog.title}
+                </DialogTitle>
 
-              <DialogDescription>
-                {props.confirmationDialog.description}
-              </DialogDescription>
-            </DialogHeader>
+                <DialogDescription>
+                  {props.confirmationDialog.description}
+                </DialogDescription>
+              </DialogHeader>
+            </div>
 
-            <DialogFooter className="mt-4 gap-4 lg:gap-2">
+            <div className="flex justify-end gap-4 border-t bg-card p-6 lg:gap-2">
               <DialogClose asChild>
                 <Button variant="outline">Cancel</Button>
               </DialogClose>
@@ -90,7 +92,7 @@ export function DangerSettingCard(props: {
                 {props.isPending && <Spinner className="size-3" />}
                 {props.buttonLabel}
               </Button>
-            </DialogFooter>
+            </div>
           </DialogContent>
         </Dialog>
       </div>

apps/dashboard/src/app/account/overview/AccountTeamsUI.tsx

@@ -108,7 +108,7 @@ function TeamRow(props: {
       <div className="flex items-center gap-4">
         <GradientAvatar
           className="size-8"
-          src={props.team.image || undefined}
+          src={props.team.image || ""}
           id={props.team.id}
           client={props.client}
         />

apps/dashboard/src/app/account/page.tsx

@@ -1,6 +1,7 @@
 import { getTeams } from "@/api/team";
-import { getMembers } from "@/api/team-members";
+import { getMemberById } from "@/api/team-members";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { notFound } from "next/navigation";
 import { getAuthToken } from "../api/lib/getAuthToken";
 import { loginRedirect } from "../login/loginRedirect";
 import { AccountTeamsUI } from "./overview/AccountTeamsUI";
@@ -17,28 +18,20 @@ export default async function Page() {
     loginRedirect("/account");
   }
 
-  const teamsWithRole = (
-    await Promise.all(
-      teams.map(async (team) => {
-        const members = await getMembers(team.slug);
-        if (!members) {
-          return {
-            team,
-            role: "MEMBER" as const,
-          };
-        }
+  const teamsWithRole = await Promise.all(
+    teams.map(async (team) => {
+      const member = await getMemberById(team.slug, account.id);
 
-        const accountMemberInfo = members.find(
-          (m) => m.accountId === account.id,
-        );
+      if (!member) {
+        notFound();
+      }
 
-        return {
-          team,
-          role: accountMemberInfo?.role || "MEMBER",
-        };
-      }),
-    )
-  ).filter((x) => !!x);
+      return {
+        team,
+        role: member.role,
+      };
+    }),
+  );
 
   return (
     <div className="flex grow flex-col">

apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.stories.tsx

@@ -1,11 +1,11 @@
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Toaster } from "sonner";
-import { projectStub } from "../../../../../stories/stubs";
-import { mobileViewport } from "../../../../../stories/utils";
+import { projectStub, teamStub } from "../../../../../stories/stubs";
 import { ProjectGeneralSettingsPageUI } from "./ProjectGeneralSettingsPage";
 
 const meta = {
-  title: "Project/Settings/General",
+  title: "Project/Settings",
   component: Story,
   parameters: {
     nextjs: {
@@ -17,32 +17,56 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
-  args: {},
+export const OwnerAccount: Story = {
+  args: {
+    isOwnerAccount: true,
+  },
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
+export const MemberAccount: Story = {
+  args: {
+    isOwnerAccount: false,
   },
 };
 
-function Story() {
+function Story(props: {
+  isOwnerAccount: boolean;
+}) {
+  const currentTeam = teamStub("currentTeam", "free");
   return (
     <div className="mx-auto w-full max-w-[1100px] px-4 py-6">
       <ProjectGeneralSettingsPageUI
+        isOwnerAccount={props.isOwnerAccount}
+        transferProject={async (newTeam) => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+          console.log("transferProject", newTeam);
+        }}
+        client={getThirdwebClient()}
+        teamsWithRole={[
+          {
+            role: props.isOwnerAccount ? "OWNER" : "MEMBER",
+            team: currentTeam,
+          },
+          {
+            role: "OWNER",
+            team: teamStub("bar", "growth"),
+          },
+          {
+            role: "MEMBER",
+            team: teamStub("baz", "starter"),
+          },
+        ]}
         updateProject={async (params) => {
           await new Promise((resolve) => setTimeout(resolve, 1000));
           console.log("updateProject", params);
-          return projectStub("foo", "team-1");
+          return projectStub("foo", "currentTeam");
         }}
         deleteProject={async () => {
           await new Promise((resolve) => setTimeout(resolve, 1000));
           console.log("deleteProject");
         }}
-        project={projectStub("foo", "team-1")}
-        teamSlug="foo"
+        project={projectStub("foo", currentTeam.id)}
+        teamSlug={currentTeam.slug}
         onKeyUpdated={undefined}
         rotateSecretKey={async () => {
           await new Promise((resolve) => setTimeout(resolve, 1000));