Add multi-tenancy with Teams feature
Implement team-based organization for projects with role-based access control: Backend: - Add teams and team_memberships database tables (migrations 009, 009b) - Add Team and TeamMembership ORM models with relationships - Implement TeamAuthorizationService for team-level access control - Add team CRUD, membership, and projects API endpoints - Update project creation to support team assignment Frontend: - Add TeamContext for managing team state with localStorage persistence - Add TeamSelector component for switching between teams - Add TeamsPage, TeamDashboardPage, TeamSettingsPage, TeamMembersPage - Add team API client functions - Update navigation with Teams link Security: - Team role hierarchy: owner > admin > member - Membership checked before system admin fallback - Self-modification prevention for role changes - Email visibility restricted to team admins/owners - Slug validation rejects consecutive hyphens Tests: - Unit tests for TeamAuthorizationService - Integration tests for all team API endpoints
This commit is contained in:
Mondo Diaz
181
frontend/src/pages/TeamDashboardPage.tsx
Normal file
181
frontend/src/pages/TeamDashboardPage.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Link, useParams, useNavigate } from 'react-router-dom';
|
||||
import { TeamDetail, Project, PaginatedResponse } from '../types';
|
||||
import { getTeam, listTeamProjects } from '../api';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { Badge } from '../components/Badge';
|
||||
import { Breadcrumb } from '../components/Breadcrumb';
|
||||
import './TeamDashboardPage.css';
|
||||
|
||||
function TeamDashboardPage() {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
const [team, setTeam] = useState<TeamDetail | null>(null);
|
||||
const [projects, setProjects] = useState<PaginatedResponse<Project> | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loadTeamData = useCallback(async () => {
|
||||
if (!slug) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
const [teamData, projectsData] = await Promise.all([
|
||||
getTeam(slug),
|
||||
listTeamProjects(slug, { limit: 10 }),
|
||||
]);
|
||||
setTeam(teamData);
|
||||
setProjects(projectsData);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load team');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
useEffect(() => {
|
||||
loadTeamData();
|
||||
}, [loadTeamData]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="team-dashboard">
|
||||
<div className="loading-state">Loading team...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !team) {
|
||||
return (
|
||||
<div className="team-dashboard">
|
||||
<div className="error-state">
|
||||
<h2>Error loading team</h2>
|
||||
<p>{error || 'Team not found'}</p>
|
||||
<Link to="/teams" className="btn btn-primary">Back to Teams</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isAdminOrOwner = team.user_role === 'owner' || team.user_role === 'admin' || user?.is_admin;
|
||||
|
||||
const roleVariants: Record<string, 'success' | 'info' | 'default'> = {
|
||||
owner: 'success',
|
||||
admin: 'info',
|
||||
member: 'default',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="team-dashboard">
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ label: 'Teams', href: '/teams' },
|
||||
{ label: team.name },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="team-header">
|
||||
<div className="team-header-info">
|
||||
<h1>{team.name}</h1>
|
||||
{team.user_role && (
|
||||
<Badge variant={roleVariants[team.user_role] || 'default'}>
|
||||
{team.user_role}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{team.description && (
|
||||
<p className="team-description">{team.description}</p>
|
||||
)}
|
||||
<div className="team-meta">
|
||||
<span className="team-slug">@{team.slug}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="team-stats">
|
||||
<div className="stat-card">
|
||||
<div className="stat-value">{team.project_count}</div>
|
||||
<div className="stat-label">Projects</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-value">{team.member_count}</div>
|
||||
<div className="stat-label">Members</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isAdminOrOwner && (
|
||||
<div className="team-actions">
|
||||
<Link to={`/teams/${slug}/settings`} className="btn btn-secondary">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||||
</svg>
|
||||
Settings
|
||||
</Link>
|
||||
<Link to={`/teams/${slug}/members`} className="btn btn-secondary">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
Members
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="team-section">
|
||||
<div className="section-header">
|
||||
<h2>Projects</h2>
|
||||
{isAdminOrOwner && (
|
||||
<Link to="/" className="btn btn-primary btn-sm">
|
||||
+ New Project
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{projects?.items.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<p>No projects in this team yet.</p>
|
||||
{isAdminOrOwner && (
|
||||
<p className="empty-hint">Create a project and assign it to this team to get started.</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="projects-grid">
|
||||
{projects?.items.map(project => (
|
||||
<div
|
||||
key={project.id}
|
||||
className="project-card"
|
||||
onClick={() => navigate(`/project/${project.name}`)}
|
||||
>
|
||||
<div className="project-card-header">
|
||||
<h3>{project.name}</h3>
|
||||
<Badge variant={project.is_public ? 'public' : 'private'}>
|
||||
{project.is_public ? 'Public' : 'Private'}
|
||||
</Badge>
|
||||
</div>
|
||||
{project.description && (
|
||||
<p className="project-card-description">{project.description}</p>
|
||||
)}
|
||||
<div className="project-card-meta">
|
||||
<span>Created by {project.created_by}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{projects && projects.pagination.total > 10 && (
|
||||
<div className="section-footer">
|
||||
<Link to={`/teams/${slug}/projects`} className="view-all-link">
|
||||
View all {projects.pagination.total} projects
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamDashboardPage;
|
||||
Reference in New Issue
Block a user