Added project separation logic

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>