Add multi-tenancy with Teams feature

frontend/src/pages/TeamsPage.tsx

@@ -0,0 +1,310 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { TeamDetail, TeamCreate, PaginatedResponse } from '../types';
+import { listTeams, createTeam } from '../api';
+import { useAuth } from '../contexts/AuthContext';
+import { Badge } from '../components/Badge';
+import { DataTable } from '../components/DataTable';
+import './TeamsPage.css';
+
+function TeamsPage() {
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const [teamsData, setTeamsData] = useState<PaginatedResponse<TeamDetail> | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [showForm, setShowForm] = useState(false);
+  const [newTeam, setNewTeam] = useState<TeamCreate>({ name: '', slug: '', description: '' });
+  const [creating, setCreating] = useState(false);
+  const [slugManuallySet, setSlugManuallySet] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const loadTeams = useCallback(async () => {
+    try {
+      setLoading(true);
+      const data = await listTeams({ limit: 100 });
+      setTeamsData(data);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load teams');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadTeams();
+  }, [loadTeams]);
+
+  // Auto-generate slug from name
+  const handleNameChange = (name: string) => {
+    setNewTeam(prev => ({
+      ...prev,
+      name,
+      slug: slugManuallySet ? prev.slug : name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''),
+    }));
+  };
+
+  const handleSlugChange = (slug: string) => {
+    setSlugManuallySet(true);
+    setNewTeam(prev => ({ ...prev, slug }));
+  };
+
+  async function handleCreateTeam(e: React.FormEvent) {
+    e.preventDefault();
+    try {
+      setCreating(true);
+      const team = await createTeam(newTeam);
+      setNewTeam({ name: '', slug: '', description: '' });
+      setSlugManuallySet(false);
+      setShowForm(false);
+      navigate(`/teams/${team.slug}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create team');
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  const closeModal = () => {
+    setShowForm(false);
+    setNewTeam({ name: '', slug: '', description: '' });
+    setSlugManuallySet(false);
+  };
+
+  // Filter teams by search
+  const filteredTeams = teamsData?.items.filter(team =>
+    team.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    team.slug.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    (team.description?.toLowerCase().includes(searchQuery.toLowerCase()))
+  ) || [];
+
+  const totalTeams = teamsData?.items.length || 0;
+
+  const roleConfig: Record<string, { variant: 'success' | 'info' | 'default'; label: string }> = {
+    owner: { variant: 'success', label: 'Owner' },
+    admin: { variant: 'info', label: 'Admin' },
+    member: { variant: 'default', label: 'Member' },
+  };
+
+  if (!user) {
+    return (
+      <div className="teams-page">
+        <div className="teams-empty-state">
+          <div className="teams-empty-icon">
+            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+              <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>
+          </div>
+          <h2>Sign in to view your teams</h2>
+          <p>Teams help you organize projects and collaborate with others.</p>
+          <Link to="/login" className="btn btn-primary">Sign In</Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="teams-page">
+      {/* Header */}
+      <div className="teams-header">
+        <h1>Teams</h1>
+        <button className="btn btn-primary" onClick={() => setShowForm(true)}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          Create Team
+        </button>
+      </div>
+
+      {/* Search */}
+      {!loading && totalTeams > 3 && (
+        <div className="teams-search">
+          <svg className="teams-search__icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <circle cx="11" cy="11" r="8"/>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <input
+            type="text"
+            placeholder="Search teams..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="teams-search__input"
+          />
+          {searchQuery && (
+            <button className="teams-search__clear" onClick={() => setSearchQuery('')}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <line x1="18" y1="6" x2="6" y2="18"/>
+                <line x1="6" y1="6" x2="18" y2="18"/>
+              </svg>
+            </button>
+          )}
+        </div>
+      )}
+
+      {error && (
+        <div className="teams-error">
+          {error}
+          <button onClick={() => setError(null)} className="teams-error__dismiss">&times;</button>
+        </div>
+      )}
+
+      {/* Create Team Modal */}
+      {showForm && (
+        <div className="modal-overlay" onClick={closeModal}>
+          <div className="modal-content" onClick={e => e.stopPropagation()}>
+            <div className="modal-header">
+              <h2>Create New Team</h2>
+              <button className="modal-close" onClick={closeModal}>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <line x1="18" y1="6" x2="6" y2="18"/>
+                  <line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+              </button>
+            </div>
+            <form onSubmit={handleCreateTeam}>
+              <div className="form-group">
+                <label htmlFor="team-name">Team Name</label>
+                <input
+                  id="team-name"
+                  type="text"
+                  value={newTeam.name}
+                  onChange={e => handleNameChange(e.target.value)}
+                  placeholder="Engineering"
+                  required
+                  autoFocus
+                />
+              </div>
+              <div className="form-group">
+                <label htmlFor="team-slug">URL Slug</label>
+                <div className="input-with-prefix">
+                  <span className="input-prefix">@</span>
+                  <input
+                    id="team-slug"
+                    type="text"
+                    value={newTeam.slug}
+                    onChange={e => handleSlugChange(e.target.value)}
+                    placeholder="engineering"
+                    pattern="^[a-z0-9][a-z0-9-]*[a-z0-9]$|^[a-z0-9]$"
+                    title="Lowercase letters, numbers, and hyphens only"
+                    required
+                  />
+                </div>
+                <span className="form-hint">Used in URLs. Lowercase letters, numbers, and hyphens.</span>
+              </div>
+              <div className="form-group">
+                <label htmlFor="team-description">Description <span className="optional">(optional)</span></label>
+                <textarea
+                  id="team-description"
+                  value={newTeam.description}
+                  onChange={e => setNewTeam({ ...newTeam, description: e.target.value })}
+                  placeholder="What is this team for?"
+                  rows={3}
+                />
+              </div>
+              <div className="form-actions">
+                <button type="button" className="btn btn-secondary" onClick={closeModal}>
+                  Cancel
+                </button>
+                <button type="submit" className="btn btn-primary" disabled={creating}>
+                  {creating ? 'Creating...' : 'Create Team'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Content */}
+      {loading ? (
+        <div className="teams-loading">
+          <div className="teams-loading__spinner" />
+          <span>Loading teams...</span>
+        </div>
+      ) : filteredTeams.length === 0 ? (
+        <div className="teams-empty-state">
+          <div className="teams-empty-icon">
+            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+              <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>
+          </div>
+          {searchQuery ? (
+            <>
+              <h2>No teams found</h2>
+              <p>No teams match "{searchQuery}"</p>
+              <button className="btn btn-secondary" onClick={() => setSearchQuery('')}>
+                Clear search
+              </button>
+            </>
+          ) : (
+            <>
+              <h2>No teams yet</h2>
+              <p>Create your first team to start organizing your projects.</p>
+              <button className="btn btn-primary" onClick={() => setShowForm(true)}>
+                Create Team
+              </button>
+            </>
+          )}
+        </div>
+      ) : (
+        <DataTable
+          data={filteredTeams}
+          keyExtractor={(team) => team.id}
+          onRowClick={(team) => navigate(`/teams/${team.slug}`)}
+          columns={[
+            {
+              key: 'name',
+              header: 'Name',
+              render: (team) => (
+                <div className="team-name-cell">
+                  <Link
+                    to={`/teams/${team.slug}`}
+                    className="cell-name"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {team.name}
+                  </Link>
+                  <span className="team-slug">@{team.slug}</span>
+                </div>
+              ),
+            },
+            {
+              key: 'description',
+              header: 'Description',
+              className: 'cell-description',
+              render: (team) => team.description || <span className="text-muted">—</span>,
+            },
+            {
+              key: 'role',
+              header: 'Role',
+              render: (team) => team.user_role ? (
+                <Badge variant={roleConfig[team.user_role]?.variant || 'default'}>
+                  {roleConfig[team.user_role]?.label || team.user_role}
+                </Badge>
+              ) : null,
+            },
+            {
+              key: 'members',
+              header: 'Members',
+              render: (team) => <span className="text-muted">{team.member_count}</span>,
+            },
+            {
+              key: 'projects',
+              header: 'Projects',
+              render: (team) => <span className="text-muted">{team.project_count}</span>,
+            },
+          ]}
+        />
+      )}
+    </div>
+  );
+}
+
+export default TeamsPage;