bugfix: a new flow added to disable staffs and free the used seats.

frontend/src/app/(dashboard)/staff/page.tsx

@@ -16,7 +16,7 @@ import {
   formatAccessSummary,
   type FeaturePermState,
 } from '../../../components/staff/staff-permission-form';
-import { Pencil, Trash2, Copy, Check, X } from 'lucide-react';
+import { Pencil, Trash2, Copy, Check, X, UserX } from 'lucide-react';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { staffApi, type StaffMemberDto } from '@/lib/api/staff';
@@ -57,7 +57,14 @@ function writeStoredInviteLinks(orgId: string, links: Record<string, StoredInvit
 }
 
 function canShareStaffInviteLink(member: StaffMemberDto): boolean {
-  return !member.isOwner && member.invitationStatus !== 'ACTIVE';
+  return (
+    !member.isOwner &&
+    (member.invitationStatus === 'PENDING' || member.invitationStatus === 'EXPIRED')
+  );
+}
+
+function canDisableStaff(member: StaffMemberDto): boolean {
+  return !member.isOwner && member.isActive;
 }
 
 function PermissionGrid({
@@ -152,6 +159,8 @@ export default function StaffPage() {
   const [editName, setEditName] = useState('');
   const [editPerms, setEditPerms] = useState(() => emptyFeaturePermissionState());
   const [editLoading, setEditLoading] = useState(false);
+  const [disableTarget, setDisableTarget] = useState<StaffMemberDto | null>(null);
+  const [disablingMembershipId, setDisablingMembershipId] = useState<string | null>(null);
 
   const canEdit = useMemo(() => canEditStaff(currentOrganization), [currentOrganization]);
   const hasActivePlan = Boolean(currentOrganization?.plan);
@@ -322,20 +331,24 @@ export default function StaffPage() {
     }
   }
 
-  async function removeMember(m: StaffMemberDto) {
-    if (m.isOwner) return;
-    if (m.userId === user?.id) {
-      if (!confirm('Remove yourself from this organization? You will lose access.')) return;
-    } else {
-      if (!confirm(`Remove ${m.name} from this organization?`)) return;
-    }
+  function handleDeleteMember() {
+    toast.showError('Delete is not implemented yet.');
+  }
+
+  async function confirmDisableMember() {
+    if (!disableTarget || !canDisableStaff(disableTarget)) return;
+
+    setDisablingMembershipId(disableTarget.id);
     toast.setError('');
     try {
-      await staffApi.removeMember(m.id);
-      toast.showSuccess('Member removed.');
+      await staffApi.disableMember(disableTarget.id);
+      toast.showSuccess(`${disableTarget.name} was disabled. A seat is now available.`);
+      setDisableTarget(null);
       await load();
     } catch (e) {
-      toast.showError(formatApiErrorMessage(e, 'Failed to remove member.'));
+      toast.showError(formatApiErrorMessage(e, 'Failed to disable member.'));
+    } finally {
+      setDisablingMembershipId(null);
     }
   }
 
@@ -477,7 +490,9 @@ export default function StaffPage() {
               <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">Role</th>
               <th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">Status</th>
               <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">Access</th>
-              <th className="px-6 py-3 text-right text-xs font-medium text-text-muted uppercase tracking-wider w-28">Actions</th>
+              <th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider w-36">
+                Action
+              </th>
             </tr>
           }
           body={
@@ -498,6 +513,8 @@ export default function StaffPage() {
                       <Badge variant="success">Active</Badge>
                     ) : m.invitationStatus === 'PENDING' ? (
                       <Badge variant="warning">Pending</Badge>
+                    ) : m.invitationStatus === 'DISABLED' ? (
+                      <Badge variant="default">Disabled</Badge>
                     ) : (
                       <Badge variant="danger">Expired</Badge>
                     )}
@@ -511,9 +528,9 @@ export default function StaffPage() {
                       </span>
                     )}
                   </td>
-                  <td className="px-6 py-1.5 align-middle">
+                  <td className="px-6 py-1.5 align-middle text-center">
                     {!m.isOwner && (
-                      <div className="flex min-h-[36px] items-center justify-end gap-1">
+                      <div className="flex min-h-[36px] items-center justify-center gap-1 mx-auto w-fit">
                         {canShareStaffInviteLink(m) && (
                           <button
                             type="button"
@@ -530,6 +547,25 @@ export default function StaffPage() {
                             )}
                           </button>
                         )}
+                        {canDisableStaff(m) && (
+                          <button
+                            type="button"
+                            className={`p-2 rounded-md ${
+                              canEdit
+                                ? 'text-text-secondary hover:bg-background-card/80 hover:text-amber-600'
+                                : 'text-text-muted opacity-50 cursor-not-allowed'
+                            }`}
+                            aria-label="Disable member"
+                            disabled={!canEdit || disablingMembershipId === m.id}
+                            title="Disable member (frees a seat)"
+                            onClick={() => {
+                              if (!canEdit) return;
+                              setDisableTarget(m);
+                            }}
+                          >
+                            <UserX className="w-4 h-4" />
+                          </button>
+                        )}
                         <button
                           type="button"
                           className={`p-2 rounded-md ${
@@ -553,11 +589,12 @@ export default function StaffPage() {
                               ? 'text-text-secondary hover:bg-red-500/15 hover:text-red-600'
                               : 'text-text-muted opacity-50 cursor-not-allowed'
                           }`}
-                          aria-label="Remove member"
+                          aria-label="Delete member"
                           disabled={!canEdit}
+                          title="Delete member (not implemented)"
                           onClick={() => {
                             if (!canEdit) return;
-                            void removeMember(m);
+                            handleDeleteMember();
                           }}
                         >
                           <Trash2 className="w-4 h-4" />
@@ -623,6 +660,60 @@ export default function StaffPage() {
         </div>
       )}
 
+      {disableTarget && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/55">
+          <div
+            className="surface-card w-full max-w-md p-5 space-y-4 shadow-xl"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="disable-staff-title"
+          >
+            <div className="flex items-start justify-between gap-2">
+              <h2 id="disable-staff-title" className="text-lg font-semibold text-text-primary pr-2">
+                Disable team member
+              </h2>
+              <DialogCloseButton
+                onClick={() => {
+                  if (disablingMembershipId) return;
+                  setDisableTarget(null);
+                }}
+              />
+            </div>
+            <p className="text-sm text-text-secondary">
+              Disable <span className="font-medium text-text-primary">{disableTarget.name}</span> (
+              {disableTarget.email})?
+            </p>
+            <ul className="text-sm text-text-secondary space-y-2 list-disc pl-5">
+              <li>They will not be able to sign in to this organization.</li>
+              <li>No data will be removed.</li>
+              <li>
+                Disabling frees <span className="text-text-primary font-medium">one seat</span> on your
+                plan so you can invite someone else.
+              </li>
+            </ul>
+            <div className="flex justify-end gap-2 pt-1">
+              <Button
+                type="button"
+                variant="outline"
+                disabled={Boolean(disablingMembershipId)}
+                onClick={() => setDisableTarget(null)}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                variant="danger"
+                isLoading={disablingMembershipId === disableTarget.id}
+                disabled={Boolean(disablingMembershipId)}
+                onClick={() => void confirmDisableMember()}
+              >
+                Disable member
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {editing && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
           <div

frontend/src/lib/api/staff.ts

@@ -7,7 +7,7 @@ export interface StaffMemberDto {
   name: string;
   isOwner: boolean;
   isActive: boolean;
-  invitationStatus: 'ACTIVE' | 'PENDING' | 'EXPIRED';
+  invitationStatus: 'ACTIVE' | 'PENDING' | 'EXPIRED' | 'DISABLED';
   invitedAt: string | null;
   acceptedAt: string | null;
   permissions: string[] | null;
@@ -100,6 +100,13 @@ export const staffApi = {
     return response.data;
   },
 
+  disableMember: async (
+    membershipId: string,
+  ): Promise<{ success: boolean; message: string }> => {
+    const response = await apiClient.patch(`/staff/members/${membershipId}/disable`);
+    return response.data;
+  },
+
   removeMember: async (
     membershipId: string,
   ): Promise<{ success: boolean; message: string }> => {