improvement: newly created organization's subscriptions flow improved.

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

@@ -119,6 +119,7 @@ export default function StaffPage() {
   const [editLoading, setEditLoading] = useState(false);
 
   const canEdit = useMemo(() => canEditStaff(currentOrganization), [currentOrganization]);
+  const hasActivePlan = Boolean(currentOrganization?.plan);
   const atSeatLimit = useMemo(() => {
     if (!seats || seats.unlimited) return false;
     if (seats.limit == null) return false;
@@ -240,7 +241,7 @@ export default function StaffPage() {
   }
 
   return (
-    <div className="space-y-6 max-w-5xl">
+    <div className="space-y-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h1 className="text-2xl font-semibold text-text-primary">Staff Management</h1>
@@ -248,20 +249,20 @@ export default function StaffPage() {
             Invite teammates, set tab access, and stay within your plan seat limit.
           </p>
         </div>
-        {canEdit && (
-          <Button
-            size="sm"
-            onClick={() => {
-              setInviteOpen(true);
-              setLastInviteInfo(null);
-            }}
-            disabled={atSeatLimit}
-            className="shrink-0"
-          >
-            <UserPlus className="w-4 h-4 mr-2" />
-            Invite member
-          </Button>
-        )}
+        <Button
+          size="sm"
+          onClick={() => {
+            if (!canEdit || atSeatLimit) return;
+            setInviteOpen(true);
+            setLastInviteInfo(null);
+          }}
+          disabled={!canEdit || atSeatLimit}
+          className="shrink-0"
+          title={!canEdit ? 'Read-only access for this organization.' : undefined}
+        >
+          <UserPlus className="w-4 h-4 mr-2" />
+          Invite member
+        </Button>
       </div>
 
       {seats && (
@@ -273,7 +274,9 @@ export default function StaffPage() {
           </span>
           {!seats.unlimited && atSeatLimit && (
             <span className="text-amber-600 dark:text-amber-400 ml-2">
-              Limit reached — remove a member or upgrade your plan.
+              {hasActivePlan
+                ? 'Plan seat limit reached for this organization.'
+                : 'No active plan selected for this organization. Choose a subscription plan to invite members.'}
             </span>
           )}
         </p>
@@ -356,7 +359,7 @@ export default function StaffPage() {
                 <th className="p-3 font-medium">Role</th>
                 <th className="p-3 font-medium">Status</th>
                 <th className="p-3 font-medium">Access</th>
-                {canEdit && <th className="p-3 font-medium w-28">Actions</th>}
+                <th className="p-3 font-medium w-28">Actions</th>
               </tr>
             </thead>
             <tbody>
@@ -396,30 +399,44 @@ export default function StaffPage() {
                       </span>
                     )}
                   </td>
-                  {canEdit && (
-                    <td className="p-3">
-                      {!m.isOwner && (
-                        <div className="flex items-center gap-1">
-                          <button
-                            type="button"
-                            className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary"
-                            aria-label="Edit member"
-                            onClick={() => openEdit(m)}
-                          >
-                            <Pencil className="w-4 h-4" />
-                          </button>
-                          <button
-                            type="button"
-                            className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600"
-                            aria-label="Remove member"
-                            onClick={() => void removeMember(m)}
-                          >
-                            <Trash2 className="w-4 h-4" />
-                          </button>
-                        </div>
-                      )}
-                    </td>
-                  )}
+                  <td className="p-3">
+                    {!m.isOwner && (
+                      <div className="flex items-center gap-1">
+                        <button
+                          type="button"
+                          className={`p-2 rounded-md ${
+                            canEdit
+                              ? 'text-text-secondary hover:bg-background-card/80 hover:text-text-primary'
+                              : 'text-text-muted opacity-50 cursor-not-allowed'
+                          }`}
+                          aria-label="Edit member"
+                          disabled={!canEdit}
+                          onClick={() => {
+                            if (!canEdit) return;
+                            openEdit(m);
+                          }}
+                        >
+                          <Pencil className="w-4 h-4" />
+                        </button>
+                        <button
+                          type="button"
+                          className={`p-2 rounded-md ${
+                            canEdit
+                              ? 'text-text-secondary hover:bg-red-500/15 hover:text-red-600'
+                              : 'text-text-muted opacity-50 cursor-not-allowed'
+                          }`}
+                          aria-label="Remove member"
+                          disabled={!canEdit}
+                          onClick={() => {
+                            if (!canEdit) return;
+                            void removeMember(m);
+                          }}
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </button>
+                      </div>
+                    )}
+                  </td>
                 </tr>
               ))}
             </tbody>