Dashboard revision
This commit is contained in:
gulimabr
@@ -1,7 +1,8 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useAuth, useProject } from '@/hooks'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { groupService, Group } from '@/services'
|
||||
import { groupService, requirementService, Group } from '@/services'
|
||||
import type { Requirement } from '@/services/requirementService'
|
||||
|
||||
/**
|
||||
* Helper function to convert hex color to RGB values
|
||||
@@ -61,11 +62,19 @@ function darkenColor(hex: string, percent: number): string {
|
||||
return `#${r}${g}${b}`
|
||||
}
|
||||
|
||||
// Interface for group statistics
|
||||
interface GroupStats {
|
||||
total: number
|
||||
validated: number
|
||||
notValidated: number
|
||||
}
|
||||
|
||||
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 [requirements, setRequirements] = useState<Requirement[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [hoveredGroup, setHoveredGroup] = useState<number | null>(null)
|
||||
@@ -78,23 +87,56 @@ export default function DashboardPage() {
|
||||
const [createProjectLoading, setCreateProjectLoading] = useState(false)
|
||||
const [createProjectError, setCreateProjectError] = useState<string | null>(null)
|
||||
|
||||
// Calculate stats for each group
|
||||
const getGroupStats = (groupId: number): GroupStats => {
|
||||
const groupRequirements = requirements.filter(req =>
|
||||
req.groups.some(g => g.id === groupId)
|
||||
)
|
||||
const validated = groupRequirements.filter(req =>
|
||||
req.validation_status === 'Approved'
|
||||
).length
|
||||
return {
|
||||
total: groupRequirements.length,
|
||||
validated,
|
||||
notValidated: groupRequirements.length - validated
|
||||
}
|
||||
}
|
||||
|
||||
// Get total stats
|
||||
const getTotalStats = () => {
|
||||
const total = requirements.length
|
||||
const validated = requirements.filter(req =>
|
||||
req.validation_status === 'Approved'
|
||||
).length
|
||||
return { total, validated, notValidated: total - validated }
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const fetchGroups = async () => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const fetchedGroups = await groupService.getGroups()
|
||||
setGroups(fetchedGroups)
|
||||
|
||||
// Fetch requirements if project is selected
|
||||
if (currentProject) {
|
||||
const fetchedRequirements = await requirementService.getRequirements({
|
||||
project_id: currentProject.id
|
||||
})
|
||||
setRequirements(fetchedRequirements)
|
||||
}
|
||||
|
||||
setError(null)
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch groups:', err)
|
||||
setError('Failed to load groups')
|
||||
console.error('Failed to fetch data:', err)
|
||||
setError('Failed to load data')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchGroups()
|
||||
}, [])
|
||||
fetchData()
|
||||
}, [currentProject])
|
||||
|
||||
const handleCategoryClick = (groupName: string) => {
|
||||
navigate(`/requirements?group=${encodeURIComponent(groupName)}`)
|
||||
@@ -104,6 +146,10 @@ export default function DashboardPage() {
|
||||
navigate('/requirements')
|
||||
}
|
||||
|
||||
const handleCreateRequirementClick = () => {
|
||||
navigate('/requirements', { state: { openCreateModal: true } })
|
||||
}
|
||||
|
||||
const handleProjectSelect = (project: typeof currentProject) => {
|
||||
if (project) {
|
||||
setCurrentProject(project)
|
||||
@@ -144,207 +190,262 @@ export default function DashboardPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Header */}
|
||||
<header className="py-6 text-center">
|
||||
<h1 className="text-3xl font-semibold text-teal-700">
|
||||
Digital Twin Requirements Tool
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
{/* 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 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>
|
||||
|
||||
{/* 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 */}
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<span>English</span>
|
||||
<div className="relative inline-flex h-5 w-10 items-center rounded-full bg-gray-300">
|
||||
<span className="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-0.5" />
|
||||
</div>
|
||||
<span>Portuguese</span>
|
||||
</div>
|
||||
|
||||
{/* Admin Panel Button - Only visible for admins (role_id=3) */}
|
||||
{user?.role_id === 3 && (
|
||||
<button
|
||||
onClick={() => navigate('/admin')}
|
||||
className="px-4 py-1.5 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Admin Panel
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* User Info */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="text-sm text-gray-700">
|
||||
{user?.full_name || user?.preferred_username || 'User'}{' '}
|
||||
<span className="text-gray-500">({user?.role || 'user'})</span>
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="px-3 py-1 border border-gray-400 rounded text-sm text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
<div className="min-h-screen bg-gray-50 flex">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-64 bg-slate-800 text-white flex-shrink-0 min-h-screen">
|
||||
{/* Sidebar Header */}
|
||||
<div className="p-6 border-b border-slate-700">
|
||||
<h1 className="text-lg font-semibold text-teal-400">
|
||||
Digital Twin
|
||||
</h1>
|
||||
<p className="text-sm text-slate-400">Requirements Tool</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
{/* Navigation */}
|
||||
<nav className="p-4 space-y-2">
|
||||
{/* Create Requirement - Primary CTA */}
|
||||
<button
|
||||
onClick={handleCreateRequirementClick}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 bg-teal-600 hover:bg-teal-500 rounded-lg text-white font-medium transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Create Requirement
|
||||
</button>
|
||||
|
||||
<div className="pt-4 pb-2">
|
||||
<p className="px-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">Navigation</p>
|
||||
</div>
|
||||
|
||||
{/* Search Requirements */}
|
||||
<button
|
||||
onClick={handleMyRequirementsClick}
|
||||
className="w-full flex items-center gap-3 px-4 py-2.5 text-slate-300 hover:bg-slate-700 hover:text-white rounded-lg transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
Search Requirements
|
||||
</button>
|
||||
|
||||
{/* My Requirements */}
|
||||
<button
|
||||
onClick={handleMyRequirementsClick}
|
||||
className="w-full flex items-center gap-3 px-4 py-2.5 text-slate-300 hover:bg-slate-700 hover:text-white rounded-lg transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
My Requirements
|
||||
</button>
|
||||
|
||||
{/* Reports */}
|
||||
<button
|
||||
className="w-full flex items-center gap-3 px-4 py-2.5 text-slate-300 hover:bg-slate-700 hover:text-white rounded-lg transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Generate Report
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Project Stats Summary at bottom */}
|
||||
{currentProject && !loading && (
|
||||
<div className="absolute bottom-0 left-0 w-64 p-4 border-t border-slate-700 bg-slate-900">
|
||||
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Project Summary</p>
|
||||
<div className="grid grid-cols-2 gap-2 text-center">
|
||||
<div className="bg-slate-800 rounded p-2">
|
||||
<p className="text-xl font-bold text-white">{getTotalStats().total}</p>
|
||||
<p className="text-xs text-slate-400">Total</p>
|
||||
</div>
|
||||
<div className="bg-slate-800 rounded p-2">
|
||||
<p className="text-xl font-bold text-green-400">{getTotalStats().validated}</p>
|
||||
<p className="text-xs text-slate-400">Validated</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
|
||||
<div className="flex gap-12">
|
||||
{/* Left Sidebar */}
|
||||
<div className="w-64 flex-shrink-0">
|
||||
{/* Requirements Search */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-bold text-gray-800 mb-1">Requirements Search</h2>
|
||||
<p className="text-sm text-teal-600">
|
||||
Search for specific elements by name or symbol.
|
||||
</p>
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Top Bar */}
|
||||
<header className="bg-white border-b border-gray-200 px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Breadcrumb with Project Dropdown */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-500">Projects</span>
|
||||
<svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
|
||||
{/* Project Dropdown */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowProjectDropdown(!showProjectDropdown)}
|
||||
className="flex items-center gap-2 text-sm 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>
|
||||
|
||||
{/* Create a Requirement */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-bold text-gray-800 mb-1">Create a Requirement</h2>
|
||||
<p className="text-sm text-teal-600">
|
||||
Register a new Requirement.
|
||||
</p>
|
||||
</div>
|
||||
{/* Right side utilities - grouped tighter */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Language Toggle */}
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<span>EN</span>
|
||||
<div className="relative inline-flex h-5 w-9 items-center rounded-full bg-gray-300 cursor-pointer">
|
||||
<span className="inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm translate-x-0.5" />
|
||||
</div>
|
||||
<span>PT</span>
|
||||
</div>
|
||||
|
||||
{/* Last Viewed Requirement */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-bold text-gray-800 mb-1">Last Viewed Requirement:</h2>
|
||||
<p className="text-sm text-gray-600 mb-1">No requirement accessed yet</p>
|
||||
<a href="#" className="text-sm text-teal-600 hover:underline">
|
||||
View More
|
||||
</a>
|
||||
</div>
|
||||
{/* Divider */}
|
||||
<div className="h-6 w-px bg-gray-300"></div>
|
||||
|
||||
{/* My Requirements */}
|
||||
<div className="mb-8 cursor-pointer" onClick={handleMyRequirementsClick}>
|
||||
<h2 className="text-lg font-bold text-gray-800 mb-1 hover:text-teal-700">My Requirements</h2>
|
||||
<p className="text-sm text-teal-600">
|
||||
View your requirements and their properties.
|
||||
</p>
|
||||
</div>
|
||||
{/* Admin Panel Button - Only visible for admins (role_id=3) */}
|
||||
{user?.role_id === 3 && (
|
||||
<button
|
||||
onClick={() => navigate('/admin')}
|
||||
className="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Admin
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Requirement Report */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-bold text-gray-800 mb-1">Requirement Report</h2>
|
||||
<p className="text-sm text-teal-600">
|
||||
Generate the current status of this projects requirements in PDF format
|
||||
</p>
|
||||
{/* User Info */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-teal-100 rounded-full flex items-center justify-center">
|
||||
<svg className="w-4 h-4 text-teal-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<p className="font-medium text-gray-700">
|
||||
{user?.full_name || user?.preferred_username || 'User'}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">{user?.role || 'user'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
title="Logout"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Right Content - Quick Search Filters */}
|
||||
<div className="flex-1">
|
||||
<h2 className="text-xl font-semibold text-gray-700 mb-6 text-center">
|
||||
Quick Search Filters
|
||||
</h2>
|
||||
{/* Page Content */}
|
||||
<main className="flex-1 p-8">
|
||||
{/* No Project Selected Warning */}
|
||||
{!projectsLoading && !currentProject && (
|
||||
<div className="mb-8 p-4 bg-amber-50 border border-amber-200 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<svg className="w-6 h-6 text-amber-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-amber-800">No Project Selected</h3>
|
||||
<p className="text-sm text-amber-700">
|
||||
Please select a project from the dropdown above or{' '}
|
||||
<button
|
||||
onClick={() => setShowCreateProjectModal(true)}
|
||||
className="underline font-medium hover:text-amber-900"
|
||||
>
|
||||
create a new project
|
||||
</button>
|
||||
{' '}to get started.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick Search Filters Section */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-semibold text-gray-800">
|
||||
Quick Search Filters
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500">
|
||||
Click a category to filter requirements
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Loading State */}
|
||||
{loading && (
|
||||
<div className="flex justify-center items-center min-h-[200px]">
|
||||
<div className="text-gray-500">Loading groups...</div>
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-10 w-10 border-b-2 border-teal-600 mx-auto"></div>
|
||||
<p className="mt-3 text-gray-500">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -355,16 +456,18 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Groups Grid */}
|
||||
{/* Groups Grid with Stats */}
|
||||
{!loading && !error && groups.length > 0 && (
|
||||
<div className="grid grid-cols-3 gap-4 max-w-2xl mx-auto">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{groups.map((group) => {
|
||||
const isHovered = hoveredGroup === group.id
|
||||
const stats = getGroupStats(group.id)
|
||||
const bgColor = isHovered
|
||||
? lightenColor(group.hex_color, 0.2)
|
||||
? lightenColor(group.hex_color, 0.15)
|
||||
: group.hex_color
|
||||
const borderColor = darkenColor(group.hex_color, 0.2)
|
||||
const textColor = getContrastTextColor(group.hex_color)
|
||||
const isLightText = textColor === '#ffffff'
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -372,7 +475,7 @@ export default function DashboardPage() {
|
||||
onClick={() => handleCategoryClick(group.group_name)}
|
||||
onMouseEnter={() => setHoveredGroup(group.id)}
|
||||
onMouseLeave={() => setHoveredGroup(null)}
|
||||
className="flex flex-col items-center justify-center p-6 cursor-pointer transition-colors min-h-[120px] rounded-lg"
|
||||
className="flex flex-col p-4 cursor-pointer transition-all duration-200 rounded-xl shadow-sm hover:shadow-md"
|
||||
style={{
|
||||
backgroundColor: bgColor,
|
||||
borderWidth: '2px',
|
||||
@@ -380,12 +483,44 @@ export default function DashboardPage() {
|
||||
borderColor: borderColor,
|
||||
}}
|
||||
>
|
||||
{/* Group Name */}
|
||||
<span
|
||||
className="text-sm font-semibold text-center"
|
||||
className="text-sm font-semibold mb-3"
|
||||
style={{ color: textColor }}
|
||||
>
|
||||
{group.group_name}
|
||||
</span>
|
||||
|
||||
{/* Stats Row */}
|
||||
{currentProject && (
|
||||
<div className="flex items-center gap-2 mt-auto">
|
||||
<div
|
||||
className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-medium ${
|
||||
isLightText ? 'bg-white/20' : 'bg-black/10'
|
||||
}`}
|
||||
>
|
||||
<svg className="w-3.5 h-3.5" style={{ color: textColor }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span style={{ color: textColor }}>{stats.validated}</span>
|
||||
</div>
|
||||
<div
|
||||
className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-medium ${
|
||||
isLightText ? 'bg-white/20' : 'bg-black/10'
|
||||
}`}
|
||||
>
|
||||
<svg className="w-3.5 h-3.5" style={{ color: textColor }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span style={{ color: textColor }}>{stats.notValidated}</span>
|
||||
</div>
|
||||
<span
|
||||
className={`ml-auto text-xs ${isLightText ? 'text-white/70' : 'text-black/50'}`}
|
||||
>
|
||||
{stats.total} total
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
@@ -399,7 +534,7 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Click outside to close dropdown */}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useAuth, useProject } from '@/hooks'
|
||||
import { useSearchParams, Link, useNavigate } from 'react-router-dom'
|
||||
import { useSearchParams, Link, useNavigate, useLocation } from 'react-router-dom'
|
||||
import { groupService, tagService, requirementService, priorityService } from '@/services'
|
||||
import type { Group } from '@/services/groupService'
|
||||
import type { Tag } from '@/services/tagService'
|
||||
@@ -33,6 +33,7 @@ export default function RequirementsPage() {
|
||||
const { currentProject, isLoading: projectLoading } = useProject()
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
|
||||
// Data state
|
||||
const [groups, setGroups] = useState<Group[]>([])
|
||||
@@ -126,6 +127,15 @@ export default function RequirementsPage() {
|
||||
}
|
||||
}, [searchParams, groups])
|
||||
|
||||
// Open create modal if navigated from dashboard with state
|
||||
useEffect(() => {
|
||||
if (location.state?.openCreateModal && !isAuditor && !projectLoading && currentProject) {
|
||||
setShowCreateModal(true)
|
||||
// Clear the state so it doesn't reopen on refresh
|
||||
navigate(location.pathname, { replace: true, state: {} })
|
||||
}
|
||||
}, [location.state, isAuditor, projectLoading, currentProject, navigate, location.pathname])
|
||||
|
||||
// Fetch deleted requirements when panel is opened
|
||||
const fetchDeletedRequirements = async () => {
|
||||
if (!currentProject) return
|
||||
|
||||
Reference in New Issue
Block a user