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/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>