Added project separation logic

2025-12-01 11:01:13 -03:00
parent 6d02736cba
commit 07005788ed
17 changed files with 1337 additions and 115 deletions
--- a/frontend/src/context/ProjectContext.tsx
+++ b/frontend/src/context/ProjectContext.tsx
@@ -0,0 +1,120 @@
+import {
+  createContext,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from 'react'
+import { projectService, type Project } from '@/services'
+import { useAuth } from '@/hooks'
+
+export interface ProjectContextType {
+  projects: Project[]
+  currentProject: Project | null
+  isLoading: boolean
+  error: string | null
+  setCurrentProject: (project: Project | null) => void
+  refreshProjects: () => Promise<void>
+  createProject: (name: string, description?: string) => Promise<Project>
+}
+
+export const ProjectContext = createContext<ProjectContextType | undefined>(undefined)
+
+const STORAGE_KEY = 'selectedProjectId'
+
+interface ProjectProviderProps {
+  children: ReactNode
+}
+
+export function ProjectProvider({ children }: ProjectProviderProps) {
+  const { isAuthenticated, isLoading: authLoading } = useAuth()
+  const [projects, setProjects] = useState<Project[]>([])
+  const [currentProject, setCurrentProjectState] = useState<Project | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const setCurrentProject = useCallback((project: Project | null) => {
+    setCurrentProjectState(project)
+    if (project) {
+      localStorage.setItem(STORAGE_KEY, project.id.toString())
+    } else {
+      localStorage.removeItem(STORAGE_KEY)
+    }
+  }, [])
+
+  const refreshProjects = useCallback(async () => {
+    if (!isAuthenticated) {
+      setProjects([])
+      setCurrentProjectState(null)
+      setIsLoading(false)
+      return
+    }
+
+    try {
+      setIsLoading(true)
+      setError(null)
+      const fetchedProjects = await projectService.getMyProjects()
+      setProjects(fetchedProjects)
+
+      // Restore selected project from localStorage or select first available
+      const savedProjectId = localStorage.getItem(STORAGE_KEY)
+      if (savedProjectId) {
+        const savedProject = fetchedProjects.find(
+          (p) => p.id === parseInt(savedProjectId, 10)
+        )
+        if (savedProject) {
+          setCurrentProjectState(savedProject)
+        } else if (fetchedProjects.length > 0) {
+          // Saved project no longer available, select first one
+          setCurrentProject(fetchedProjects[0])
+        }
+      } else if (fetchedProjects.length > 0) {
+        // No saved project, select first one
+        setCurrentProject(fetchedProjects[0])
+      }
+    } catch (err) {
+      console.error('Failed to fetch projects:', err)
+      setError('Failed to load projects')
+    } finally {
+      setIsLoading(false)
+    }
+  }, [isAuthenticated, setCurrentProject])
+
+  const createProject = useCallback(async (name: string, description?: string): Promise<Project> => {
+    const newProject = await projectService.createProject({
+      project_name: name,
+      project_desc: description,
+    })
+    
+    // Add to projects list
+    setProjects((prev: Project[]) => [newProject, ...prev])
+    
+    // If no current project, set this as current
+    if (!currentProject) {
+      setCurrentProject(newProject)
+    }
+    
+    return newProject
+  }, [currentProject, setCurrentProject])
+
+  // Fetch projects when authentication status changes
+  useEffect(() => {
+    if (!authLoading) {
+      refreshProjects()
+    }
+  }, [authLoading, isAuthenticated, refreshProjects])
+
+  const value: ProjectContextType = {
+    projects,
+    currentProject,
+    isLoading,
+    error,
+    setCurrentProject,
+    refreshProjects,
+    createProject,
+  }
+
+  return (
+    <ProjectContext.Provider value={value}>{children}</ProjectContext.Provider>
+  )
+}
--- a/frontend/src/context/index.ts
+++ b/frontend/src/context/index.ts
@@ -1 +1,3 @@
 export { AuthContext, AuthProvider } from './AuthContext'
+export { ProjectContext, ProjectProvider } from './ProjectContext'
+export type { ProjectContextType } from './ProjectContext'
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -1 +1,2 @@
 export { useAuth } from './useAuth'
+export { useProject } from './useProject'
--- a/frontend/src/hooks/useProject.ts
+++ b/frontend/src/hooks/useProject.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { ProjectContext, type ProjectContextType } from '@/context'
+
+export function useProject(): ProjectContextType {
+  const context = useContext(ProjectContext)
+  if (context === undefined) {
+    throw new Error('useProject must be used within a ProjectProvider')
+  }
+  return context
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,14 +2,16 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import App from './App'
-import { AuthProvider } from '@/context/AuthContext'
+import { AuthProvider, ProjectProvider } from '@/context'
 import './index.css'

 createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <AuthProvider>
-        <App />
+        <ProjectProvider>
+          <App />
+        </ProjectProvider>
      </AuthProvider>
    </BrowserRouter>
  </StrictMode>,
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { useAuth } from '@/hooks'
+import { useAuth, useProject } from '@/hooks'
 import { useNavigate } from 'react-router-dom'
 import { groupService, Group } from '@/services'

@@ -63,11 +63,20 @@ function darkenColor(hex: string, percent: number): string {

 export default function DashboardPage() {
  const { user, logout } = useAuth()
+  const { projects, currentProject, setCurrentProject, isLoading: projectsLoading, createProject } = useProject()
  const navigate = useNavigate()
  const [groups, setGroups] = useState<Group[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [hoveredGroup, setHoveredGroup] = useState<number | null>(null)
+  
+  // Project dropdown state
+  const [showProjectDropdown, setShowProjectDropdown] = useState(false)
+  const [showCreateProjectModal, setShowCreateProjectModal] = useState(false)
+  const [newProjectName, setNewProjectName] = useState('')
+  const [newProjectDesc, setNewProjectDesc] = useState('')
+  const [createProjectLoading, setCreateProjectLoading] = useState(false)
+  const [createProjectError, setCreateProjectError] = useState<string | null>(null)

  useEffect(() => {
    const fetchGroups = async () => {
@@ -95,6 +104,45 @@ export default function DashboardPage() {
    navigate('/requirements')
  }

+  const handleProjectSelect = (project: typeof currentProject) => {
+    if (project) {
+      setCurrentProject(project)
+    }
+    setShowProjectDropdown(false)
+  }
+
+  const handleCreateProject = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (!newProjectName.trim()) {
+      setCreateProjectError('Project name is required')
+      return
+    }
+    
+    try {
+      setCreateProjectLoading(true)
+      setCreateProjectError(null)
+      
+      const newProject = await createProject(
+        newProjectName.trim(),
+        newProjectDesc.trim() || undefined
+      )
+      
+      // Select the newly created project
+      setCurrentProject(newProject)
+      
+      // Close modal and reset form
+      setShowCreateProjectModal(false)
+      setNewProjectName('')
+      setNewProjectDesc('')
+    } catch (err) {
+      console.error('Failed to create project:', err)
+      setCreateProjectError('Failed to create project. Please try again.')
+    } finally {
+      setCreateProjectLoading(false)
+    }
+  }
+
  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
@@ -107,11 +155,73 @@ export default function DashboardPage() {
      {/* Top Bar */}
      <div className="border-y border-gray-200 py-3 px-8">
        <div className="flex items-center justify-between max-w-7xl mx-auto">
-          {/* Breadcrumb */}
-          <div className="text-sm">
+          {/* Breadcrumb with Project Dropdown */}
+          <div className="text-sm flex items-center gap-2">
            <span className="text-gray-600">Projects</span>
            <span className="mx-2 text-gray-400">»</span>
-            <span className="font-semibold text-gray-900">PeTWIN</span>
+            
+            {/* Project Dropdown */}
+            <div className="relative">
+              <button
+                onClick={() => setShowProjectDropdown(!showProjectDropdown)}
+                className="flex items-center gap-2 font-semibold text-gray-900 hover:text-teal-700 focus:outline-none"
+              >
+                {projectsLoading ? (
+                  <span className="text-gray-500">Loading...</span>
+                ) : currentProject ? (
+                  <>
+                    {currentProject.project_name}
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </>
+                ) : (
+                  <span className="text-gray-500 italic">No project selected</span>
+                )}
+              </button>
+              
+              {/* Dropdown Menu */}
+              {showProjectDropdown && (
+                <div className="absolute top-full left-0 mt-1 w-64 bg-white border border-gray-200 rounded-lg shadow-lg z-50">
+                  <div className="py-1">
+                    {projects.length === 0 ? (
+                      <div className="px-4 py-2 text-sm text-gray-500">
+                        No projects available
+                      </div>
+                    ) : (
+                      projects.map((project) => (
+                        <button
+                          key={project.id}
+                          onClick={() => handleProjectSelect(project)}
+                          className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 ${
+                            currentProject?.id === project.id
+                              ? 'bg-teal-50 text-teal-700 font-medium'
+                              : 'text-gray-700'
+                          }`}
+                        >
+                          <div className="font-medium">{project.project_name}</div>
+                          {project.project_desc && (
+                            <div className="text-xs text-gray-500 truncate">
+                              {project.project_desc}
+                            </div>
+                          )}
+                        </button>
+                      ))
+                    )}
+                    <hr className="my-1 border-gray-200" />
+                    <button
+                      onClick={() => {
+                        setShowProjectDropdown(false)
+                        setShowCreateProjectModal(true)
+                      }}
+                      className="w-full text-left px-4 py-2 text-sm text-teal-600 hover:bg-gray-100 font-medium"
+                    >
+                      + Create New Project
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
          </div>

          {/* Language Toggle */}
@@ -151,6 +261,30 @@ export default function DashboardPage() {

      {/* Main Content */}
      <div className="max-w-7xl mx-auto px-8 py-8">
+        {/* No Project Selected Warning */}
+        {!projectsLoading && !currentProject && (
+          <div className="mb-8 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
+            <div className="flex items-center gap-3">
+              <svg className="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+              <div>
+                <h3 className="font-semibold text-yellow-800">No Project Selected</h3>
+                <p className="text-sm text-yellow-700">
+                  Please select a project from the dropdown above or{' '}
+                  <button
+                    onClick={() => setShowCreateProjectModal(true)}
+                    className="underline font-medium hover:text-yellow-900"
+                  >
+                    create a new project
+                  </button>
+                  {' '}to get started.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
        <div className="flex gap-12">
          {/* Left Sidebar */}
          <div className="w-64 flex-shrink-0">
@@ -262,6 +396,104 @@ export default function DashboardPage() {
          </div>
        </div>
      </div>
+
+      {/* Click outside to close dropdown */}
+      {showProjectDropdown && (
+        <div
+          className="fixed inset-0 z-40"
+          onClick={() => setShowProjectDropdown(false)}
+        />
+      )}
+
+      {/* Create Project Modal */}
+      {showCreateProjectModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
+            {/* Modal Header */}
+            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+              <h2 className="text-xl font-semibold text-gray-800">Create New Project</h2>
+              <button
+                onClick={() => {
+                  setShowCreateProjectModal(false)
+                  setCreateProjectError(null)
+                  setNewProjectName('')
+                  setNewProjectDesc('')
+                }}
+                className="text-gray-400 hover:text-gray-600"
+              >
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            {/* Modal Body */}
+            <form onSubmit={handleCreateProject}>
+              <div className="px-6 py-4 space-y-4">
+                {/* Error message */}
+                {createProjectError && (
+                  <div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
+                    {createProjectError}
+                  </div>
+                )}
+
+                {/* Project Name */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Project Name <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    value={newProjectName}
+                    onChange={(e) => setNewProjectName(e.target.value)}
+                    placeholder="Enter project name"
+                    className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"
+                    required
+                  />
+                </div>
+
+                {/* Project Description */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Description
+                  </label>
+                  <textarea
+                    value={newProjectDesc}
+                    onChange={(e) => setNewProjectDesc(e.target.value)}
+                    placeholder="Enter project description (optional)"
+                    rows={3}
+                    className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent resize-none"
+                  />
+                </div>
+              </div>
+
+              {/* Modal Footer */}
+              <div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowCreateProjectModal(false)
+                    setCreateProjectError(null)
+                    setNewProjectName('')
+                    setNewProjectDesc('')
+                  }}
+                  className="px-4 py-2 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-100"
+                  disabled={createProjectLoading}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-teal-600 text-white rounded text-sm font-medium hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                  disabled={createProjectLoading}
+                >
+                  {createProjectLoading ? 'Creating...' : 'Create Project'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
    </div>
  )
 }
--- a/frontend/src/pages/RequirementDetailPage.tsx
+++ b/frontend/src/pages/RequirementDetailPage.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { useAuth } from '@/hooks'
+import { useAuth, useProject } from '@/hooks'
 import { useParams, Link } from 'react-router-dom'
 import { requirementService } from '@/services'
 import type { Requirement } from '@/services/requirementService'
@@ -9,6 +9,7 @@ type TabType = 'description' | 'sub-requirements' | 'co-requirements' | 'accepta

 export default function RequirementDetailPage() {
  const { user, logout } = useAuth()
+  const { currentProject } = useProject()
  const { id } = useParams<{ id: string }>()
  const [activeTab, setActiveTab] = useState<TabType>('description')
  const [requirement, setRequirement] = useState<Requirement | null>(null)
@@ -220,7 +221,7 @@ export default function RequirementDetailPage() {
          <div className="text-sm">
            <Link to="/dashboard" className="text-gray-600 hover:underline">Projects</Link>
            <span className="mx-2 text-gray-400">»</span>
-            <Link to="/dashboard" className="text-gray-600 hover:underline">PeTWIN</Link>
+            <Link to="/dashboard" className="text-gray-600 hover:underline">{currentProject?.project_name || 'Project'}</Link>
            <span className="mx-2 text-gray-400">»</span>
            <Link to="/requirements" className="text-gray-600 hover:underline">Search</Link>
            <span className="mx-2 text-gray-400">»</span>
--- a/frontend/src/pages/RequirementsPage.tsx
+++ b/frontend/src/pages/RequirementsPage.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useAuth } from '@/hooks'
+import { useAuth, useProject } from '@/hooks'
 import { useSearchParams, Link, useNavigate } from 'react-router-dom'
 import { groupService, tagService, requirementService, priorityService } from '@/services'
 import type { Group } from '@/services/groupService'
@@ -24,6 +24,7 @@ function lightenColor(hex: string, percent: number): string {

 export default function RequirementsPage() {
  const { user, logout } = useAuth()
+  const { currentProject, isLoading: projectLoading } = useProject()
  const [searchParams, setSearchParams] = useSearchParams()
  const navigate = useNavigate()
  
@@ -52,24 +53,35 @@ export default function RequirementsPage() {
  const [newReqPriorityId, setNewReqPriorityId] = useState<number | ''>('')
  const [newReqGroupIds, setNewReqGroupIds] = useState<number[]>([])
  
-  // Fetch data on mount
+  // Fetch data when project changes
  useEffect(() => {
    const fetchData = async () => {
+      // Don't fetch if no project is selected
+      if (!currentProject) {
+        setRequirements([])
+        setLoading(false)
+        return
+      }
+
      try {
        setLoading(true)
        setError(null)
        
-        // Fetch groups, tags, priorities, and requirements in parallel
-        const [groupsData, tagsData, prioritiesData, requirementsData] = await Promise.all([
+        // Fetch groups, tags, and priorities in parallel
+        const [groupsData, tagsData, prioritiesData] = await Promise.all([
          groupService.getGroups(),
          tagService.getTags(),
          priorityService.getPriorities(),
-          requirementService.getRequirements(),
        ])
        
        setGroups(groupsData)
        setTags(tagsData)
        setPriorities(prioritiesData)
+        
+        // Fetch requirements for the current project
+        const requirementsData = await requirementService.getRequirements({
+          project_id: currentProject.id,
+        })
        setRequirements(requirementsData)
      } catch (err) {
        console.error('Failed to fetch data:', err)
@@ -79,8 +91,10 @@ export default function RequirementsPage() {
      }
    }
    
-    fetchData()
-  }, [])
+    if (!projectLoading) {
+      fetchData()
+    }
+  }, [currentProject, projectLoading])
  
  // Initialize filters from URL params
  useEffect(() => {
@@ -204,12 +218,17 @@ export default function RequirementsPage() {
      setCreateError('Please select a tag')
      return
    }
+    if (!currentProject) {
+      setCreateError('No project selected')
+      return
+    }
    
    try {
      setCreateLoading(true)
      setCreateError(null)
      
      const data: RequirementCreateRequest = {
+        project_id: currentProject.id,
        tag_id: newReqTagId as number,
        req_name: newReqName.trim(),
        req_desc: newReqDesc.trim() || undefined,
@@ -232,7 +251,7 @@ export default function RequirementsPage() {
    }
  }

-  if (loading) {
+  if (loading || projectLoading) {
    return (
      <div className="min-h-screen bg-white flex items-center justify-center">
        <div className="text-center">
@@ -243,6 +262,26 @@ export default function RequirementsPage() {
    )
  }

+  if (!currentProject) {
+    return (
+      <div className="min-h-screen bg-white flex items-center justify-center">
+        <div className="text-center">
+          <svg className="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+          </svg>
+          <h2 className="text-xl font-semibold text-gray-700 mb-2">No Project Selected</h2>
+          <p className="text-gray-500 mb-4">Please select a project from the dashboard to view requirements.</p>
+          <button
+            onClick={() => navigate('/dashboard')}
+            className="px-4 py-2 bg-teal-600 text-white rounded hover:bg-teal-700"
+          >
+            Go to Dashboard
+          </button>
+        </div>
+      </div>
+    )
+  }
+
  if (error) {
    return (
      <div className="min-h-screen bg-white flex items-center justify-center">
@@ -275,7 +314,7 @@ export default function RequirementsPage() {
          <div className="text-sm">
            <Link to="/dashboard" className="text-gray-600 hover:underline">Projects</Link>
            <span className="mx-2 text-gray-400">»</span>
-            <Link to="/dashboard" className="text-gray-600 hover:underline">PeTWIN</Link>
+            <Link to="/dashboard" className="text-gray-600 hover:underline">{currentProject.project_name}</Link>
            <span className="mx-2 text-gray-400">»</span>
            <span className="font-semibold text-gray-900">Search Requirements</span>
          </div>
--- a/frontend/src/services/index.ts
+++ b/frontend/src/services/index.ts
@@ -7,3 +7,5 @@ export { priorityService } from './priorityService'
 export type { Priority } from './priorityService'
 export { requirementService } from './requirementService'
 export type { Requirement, RequirementCreateRequest, RequirementUpdateRequest } from './requirementService'
+export { projectService } from './projectService'
+export type { Project, ProjectCreateRequest, ProjectUpdateRequest } from './projectService'
--- a/frontend/src/services/projectService.ts
+++ b/frontend/src/services/projectService.ts
@@ -0,0 +1,191 @@
+const API_BASE_URL = '/api'
+
+export interface Project {
+  id: number
+  project_name: string
+  project_desc: string | null
+  created_at: string | null
+}
+
+export interface ProjectCreateRequest {
+  project_name: string
+  project_desc?: string
+}
+
+export interface ProjectUpdateRequest {
+  project_name?: string
+  project_desc?: string
+}
+
+class ProjectService {
+  /**
+   * Get all projects the current user is a member of.
+   */
+  async getMyProjects(): Promise<Project[]> {
+    try {
+      const response = await fetch(`${API_BASE_URL}/projects`, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const projects: Project[] = await response.json()
+      return projects
+    } catch (error) {
+      console.error('Failed to fetch projects:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Get a specific project by ID.
+   */
+  async getProject(projectId: number): Promise<Project> {
+    try {
+      const response = await fetch(`${API_BASE_URL}/projects/${projectId}`, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const project: Project = await response.json()
+      return project
+    } catch (error) {
+      console.error('Failed to fetch project:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Create a new project.
+   */
+  async createProject(data: ProjectCreateRequest): Promise<Project> {
+    try {
+      const response = await fetch(`${API_BASE_URL}/projects`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const project: Project = await response.json()
+      return project
+    } catch (error) {
+      console.error('Failed to create project:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Update an existing project.
+   */
+  async updateProject(projectId: number, data: ProjectUpdateRequest): Promise<Project> {
+    try {
+      const response = await fetch(`${API_BASE_URL}/projects/${projectId}`, {
+        method: 'PUT',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const project: Project = await response.json()
+      return project
+    } catch (error) {
+      console.error('Failed to update project:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Delete a project.
+   */
+  async deleteProject(projectId: number): Promise<void> {
+    try {
+      const response = await fetch(`${API_BASE_URL}/projects/${projectId}`, {
+        method: 'DELETE',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+    } catch (error) {
+      console.error('Failed to delete project:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Add a member to a project.
+   */
+  async addMember(projectId: number, userId: number): Promise<void> {
+    try {
+      const response = await fetch(`${API_BASE_URL}/projects/${projectId}/members`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ user_id: userId }),
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+    } catch (error) {
+      console.error('Failed to add member:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Remove a member from a project.
+   */
+  async removeMember(projectId: number, userId: number): Promise<void> {
+    try {
+      const response = await fetch(`${API_BASE_URL}/projects/${projectId}/members/${userId}`, {
+        method: 'DELETE',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+    } catch (error) {
+      console.error('Failed to remove member:', error)
+      throw error
+    }
+  }
+}
+
+export const projectService = new ProjectService()
--- a/frontend/src/services/requirementService.ts
+++ b/frontend/src/services/requirementService.ts
@@ -6,6 +6,7 @@ const API_BASE_URL = '/api'

 export interface Requirement {
  id: number
+  project_id: number
  req_name: string
  req_desc: string | null
  version: number
@@ -18,6 +19,7 @@ export interface Requirement {
 }

 export interface RequirementCreateRequest {
+  project_id: number
  tag_id: number
  req_name: string
  req_desc?: string
@@ -36,11 +38,43 @@ export interface RequirementUpdateRequest {
 class RequirementService {
  /**
   * Get all requirements from the API.
-   * Optionally filter by group_id or tag_id.
+   * Requires project_id, optionally filter by group_id or tag_id.
   */
-  async getRequirements(params?: { group_id?: number; tag_id?: number }): Promise<Requirement[]> {
+  async getRequirements(params: { project_id: number; group_id?: number; tag_id?: number }): Promise<Requirement[]> {
    try {
-      let url = `${API_BASE_URL}/requirements`
+      const queryParams = new URLSearchParams()
+      queryParams.append('project_id', params.project_id.toString())
+      if (params.group_id) queryParams.append('group_id', params.group_id.toString())
+      if (params.tag_id) queryParams.append('tag_id', params.tag_id.toString())
+
+      const url = `${API_BASE_URL}/requirements?${queryParams.toString()}`
+
+      const response = await fetch(url, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const requirements: Requirement[] = await response.json()
+      return requirements
+    } catch (error) {
+      console.error('Failed to fetch requirements:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Get requirements for a specific project.
+   */
+  async getProjectRequirements(projectId: number, params?: { group_id?: number; tag_id?: number }): Promise<Requirement[]> {
+    try {
+      let url = `${API_BASE_URL}/projects/${projectId}/requirements`
      
      if (params) {
        const queryParams = new URLSearchParams()
@@ -68,7 +102,7 @@ class RequirementService {
      const requirements: Requirement[] = await response.json()
      return requirements
    } catch (error) {
-      console.error('Failed to fetch requirements:', error)
+      console.error('Failed to fetch project requirements:', error)
      throw error
    }
  }