From 7196a6437042ad51693d7daac20359f218d55707 Mon Sep 17 00:00:00 2001
From: amimaro <amir.zahlan@gmail.com>
Date: Thu, 24 Jul 2025 19:29:32 -0300
Subject: [PATCH 1/2] fix: remove team member action display condition

---
 app/(dashboard)/dashboard/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
index 60475a8587..70b567f014 100644
--- a/app/(dashboard)/dashboard/page.tsx
+++ b/app/(dashboard)/dashboard/page.tsx
@@ -153,7 +153,7 @@ function TeamMembers() {
                   </p>
                 </div>
               </div>
-              {index > 1 ? (
+              {index >= 1 ? (
                 <form action={removeAction}>
                   <input type="hidden" name="memberId" value={member.id} />
                   <Button

From 4391122ea91b9eabcc0a41c3d17300d6076acb9d Mon Sep 17 00:00:00 2001
From: amimaro <amir.zahlan@gmail.com>
Date: Thu, 24 Jul 2025 22:45:41 -0300
Subject: [PATCH 2/2] handle remove team member

---
 app/(dashboard)/dashboard/page.tsx | 134 +++++++++++++++++------------
 app/(login)/actions.ts             |   2 +-
 lib/db/schema.ts                   |   7 +-
 3 files changed, 84 insertions(+), 59 deletions(-)

diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
index 70b567f014..83dfb217a1 100644
--- a/app/(dashboard)/dashboard/page.tsx
+++ b/app/(dashboard)/dashboard/page.tsx
@@ -10,8 +10,8 @@ import {
   CardFooter
 } from '@/components/ui/card';
 import { customerPortalAction } from '@/lib/payments/actions';
-import { useActionState } from 'react';
-import { TeamDataWithMembers, User } from '@/lib/db/schema';
+import { useActionState, useState } from 'react';
+import { TeamDataWithMembers, TeamMemberWithUser, User } from '@/lib/db/schema';
 import { removeTeamMember, inviteTeamMember } from '@/app/(login)/actions';
 import useSWR from 'swr';
 import { Suspense } from 'react';
@@ -95,14 +95,6 @@ function TeamMembersSkeleton() {
 
 function TeamMembers() {
   const { data: teamData } = useSWR<TeamDataWithMembers>('/api/team', fetcher);
-  const [removeState, removeAction, isRemovePending] = useActionState<
-    ActionState,
-    FormData
-  >(removeTeamMember, {});
-
-  const getUserDisplayName = (user: Pick<User, 'id' | 'name' | 'email'>) => {
-    return user.name || user.email || 'Unknown User';
-  };
 
   if (!teamData?.teamMembers?.length) {
     return (
@@ -125,58 +117,90 @@ function TeamMembers() {
       <CardContent>
         <ul className="space-y-4">
           {teamData.teamMembers.map((member, index) => (
-            <li key={member.id} className="flex items-center justify-between">
-              <div className="flex items-center space-x-4">
-                <Avatar>
-                  {/* 
-                    This app doesn't save profile images, but here
-                    is how you'd show them:
-
-                    <AvatarImage
-                      src={member.user.image || ''}
-                      alt={getUserDisplayName(member.user)}
-                    />
-                  */}
-                  <AvatarFallback>
-                    {getUserDisplayName(member.user)
-                      .split(' ')
-                      .map((n) => n[0])
-                      .join('')}
-                  </AvatarFallback>
-                </Avatar>
-                <div>
-                  <p className="font-medium">
-                    {getUserDisplayName(member.user)}
-                  </p>
-                  <p className="text-sm text-muted-foreground capitalize">
-                    {member.role}
-                  </p>
-                </div>
-              </div>
-              {index >= 1 ? (
-                <form action={removeAction}>
-                  <input type="hidden" name="memberId" value={member.id} />
-                  <Button
-                    type="submit"
-                    variant="outline"
-                    size="sm"
-                    disabled={isRemovePending}
-                  >
-                    {isRemovePending ? 'Removing...' : 'Remove'}
-                  </Button>
-                </form>
-              ) : null}
-            </li>
+            <TeamMemberRow key={member.id} member={member} index={index} />
           ))}
         </ul>
-        {removeState?.error && (
-          <p className="text-red-500 mt-4">{removeState.error}</p>
-        )}
       </CardContent>
     </Card>
   );
 }
 
+function TeamMemberRow({
+  member,
+  index,
+}: {
+  member: TeamMemberWithUser;
+  index: number;
+}) {
+  const [visible, setVisible] = useState(true);
+  const [removeState, removeAction, isRemovePending] = useActionState<
+    ActionState,
+    FormData
+  >(async (actionState,formData) => {
+    const result = await removeTeamMember(actionState,formData);
+    if ('success' in result && typeof result.success !== 'undefined') {
+      setVisible(false);
+    }
+    return result;
+  }, {});
+
+  const getUserDisplayName = (user: Pick<User, "id" | "name" | "email">) => {
+    return user.name || user.email || "Unknown User";
+  };
+
+  if (!visible) return null;
+
+  return (
+    <li className="flex items-center justify-between">
+      <div className="flex items-center space-x-4">
+        <Avatar>
+          {/* 
+            This app doesn't save profile images, but here
+            is how you'd show them:
+
+            <AvatarImage
+              src={member.user.image || ''}
+              alt={getUserDisplayName(member.user)}
+            />
+          */}
+          <AvatarFallback>
+            {getUserDisplayName(member.user)
+              .split(' ')
+              .map((n) => n[0])
+              .join('')}
+          </AvatarFallback>
+        </Avatar>
+        <div>
+          <p className="font-medium">
+            {getUserDisplayName(member.user)}
+          </p>
+          <p className="text-sm text-muted-foreground capitalize">
+            {member.role}
+          </p>
+        </div>
+      </div>
+      {index > 0 && (
+        <div className="flex flex-col items-end">
+          <form action={removeAction}>
+            <input type="hidden" name="memberId" value={member.id} />
+            <Button
+              type="submit"
+              variant="outline"
+              size="sm"
+              disabled={isRemovePending}
+            >
+              {isRemovePending ? 'Removing...' : 'Remove'}
+            </Button>
+          </form>
+          {removeState?.error && (
+            <p className="text-red-500 text-xs">{removeState.error}</p>
+          )}
+        </div>
+      )}
+    </li>
+  );
+}
+
 function InviteTeamMemberSkeleton() {
   return (
     <Card className="h-[260px]">
diff --git a/app/(login)/actions.ts b/app/(login)/actions.ts
index 532adc0ef4..1791a6a2e5 100644
--- a/app/(login)/actions.ts
+++ b/app/(login)/actions.ts
@@ -359,7 +359,7 @@ export const updateAccount = validatedActionWithUser(
 );
 
 const removeTeamMemberSchema = z.object({
-  memberId: z.number()
+  memberId: z.string().transform((val) => Number(val)),
 });
 
 export const removeTeamMember = validatedActionWithUser(
diff --git a/lib/db/schema.ts b/lib/db/schema.ts
index 1d047ce661..25162b91af 100644
--- a/lib/db/schema.ts
+++ b/lib/db/schema.ts
@@ -122,10 +122,11 @@ export type ActivityLog = typeof activityLogs.$inferSelect;
 export type NewActivityLog = typeof activityLogs.$inferInsert;
 export type Invitation = typeof invitations.$inferSelect;
 export type NewInvitation = typeof invitations.$inferInsert;
+export type TeamMemberWithUser = TeamMember & {
+  user: Pick<User, "id" | "name" | "email">;
+};
 export type TeamDataWithMembers = Team & {
-  teamMembers: (TeamMember & {
-    user: Pick<User, 'id' | 'name' | 'email'>;
-  })[];
+  teamMembers: TeamMemberWithUser[];
 };
 
 export enum ActivityType {