spine-framework-portal 0.2.13 → 0.2.14

package/components/PortalHeader.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { NavLink, useNavigate } from 'react-router-dom'
-import { Ticket, Users, BookOpen, GraduationCap, Store, LayoutGrid, User, LogOut, Save } from 'lucide-react'
+import { Ticket, Users, BookOpen, GraduationCap, Store, LayoutGrid, User, LogOut, Save, UserPlus } from 'lucide-react'
 import { useAuth } from '@core/contexts/AuthContext'
 import { useAppPath } from '@core/hooks/useAppPath'
 import { Button } from '@core/components/ui/button'
@@ -22,6 +22,10 @@ export function PortalHeader() {
   const { user, logout } = useAuth()
   const appPath = useAppPath()
   const navigate = useNavigate()
+
+  const isTeamAdmin =
+    user?.is_system_admin ||
+    user?.roles?.some((r: string) => r === 'member_admin')
   const [accountOpen, setAccountOpen] = useState(false)
   const [displayName, setDisplayName] = useState(user?.full_name || user?.email?.split('@')[0] || '')
 
@@ -68,6 +72,22 @@ export function PortalHeader() {
                 {label}
               </NavLink>
             ))}
+            {isTeamAdmin && (
+              <NavLink
+                to={appPath('/team')}
+                className={({ isActive }) =>
+                  [
+                    'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
+                    isActive
+                      ? 'bg-accent text-accent-foreground'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-accent/50',
+                  ].join(' ')
+                }
+              >
+                <UserPlus size={14} />
+                Team
+              </NavLink>
+            )}
           </nav>
 
           <Button

package/index.tsx

@@ -7,6 +7,7 @@ import { PortalFooter } from './components/PortalFooter'
 import { useCurrentApp } from '@core/contexts/AppContext'
 
 const HomePage = lazy(() => import('./pages/HomePage').then(m => ({ default: m.HomePage })))
+const TeamPage = lazy(() => import('./pages/team/TeamPage').then(m => ({ default: m.TeamPage })))
 const TicketsPage = lazy(() => import('./pages/TicketsPage').then(m => ({ default: m.TicketsPage })))
 const CommunityPage = lazy(() => import('./pages/CommunityPage').then(m => ({ default: m.CommunityPage })))
 const CoursesPage = lazy(() => import('./pages/CoursesPage').then(m => ({ default: m.CoursesPage })))
@@ -33,6 +34,7 @@ function PortalLayout() {
               <Route path="community" element={<CommunityPage />} />
               <Route path="marketplace" element={<MarketplacePage />} />
               <Route path="developer" element={<DeveloperSettingsPage />} />
+              <Route path="team" element={<TeamPage />} />
               <Route path="*" element={<Navigate to="." replace />} />
             </Routes>
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spine-framework-portal",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "private": false,
   "description": "Customer Portal — self-service portal app for Spine Framework",
   "type": "module",

package/pages/team/TeamPage.tsx

@@ -5,8 +5,8 @@
  * @stability stable
  *
  * Portal team management page. Visible to member_admin only.
- * Invites are scoped to the current user's account with the 'member' role.
- * Renders the shared InviteManager with account scope.
+ * Invites are scoped to the current user's account with selectable portal roles.
+ * List is filtered to portal roles only (member, member_admin).
  *
  * Route: /portal/team
  *
@@ -17,6 +17,13 @@ import React from 'react'
 import { InviteManager } from '../../../../.framework/src/components/shared/InviteManager'
 import { useAuth } from '../../../../.framework/src/contexts/AuthContext'
 
+const PORTAL_ROLES = [
+  { slug: 'member', name: 'Member' },
+  { slug: 'member_admin', name: 'Member Admin' },
+]
+
+const PORTAL_ROLE_SLUGS = PORTAL_ROLES.map(r => r.slug).join(',')
+
 export function TeamPage() {
   const { user } = useAuth()
 
@@ -37,14 +44,15 @@ export function TeamPage() {
       <div>
         <h1 className="text-2xl font-semibold text-slate-900">Team</h1>
         <p className="mt-1 text-sm text-slate-500">
-          Invite members and manage access requests for your account.
+          Invite members and manage access to your account.
         </p>
       </div>
 
       <InviteManager
         scope="account"
         accountId={user?.account_id}
-        defaultRoleSlug="member"
+        allowedRoles={PORTAL_ROLES}
+        roleSlugsFilter={PORTAL_ROLE_SLUGS}
       />
     </div>
   )