galima/periodic-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created requirements page frontend

Browse Source
This commit is contained in:
gulimabr
2025-11-28 15:24:13 -03:00
parent 5da54393ff
commit b5381ae376
4 changed files with 448 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/pages/DashboardPage.tsx
View File

@@ -1,4 +1,5 @@
import { useAuth } from '@/hooks'
import { useNavigate } from 'react-router-dom'
// Icons as components for cleaner code
const DataServicesIcon = () => (
@@ -76,6 +77,15 @@ const TrustworthinessIcon = () => (
export default function DashboardPage() {
const { user, logout } = useAuth()
const navigate = useNavigate()
const handleCategoryClick = (group: string) => {
navigate(`/requirements?group=${encodeURIComponent(group)}`)
}
const handleMyRequirementsClick = () => {
navigate('/requirements')
}
return (
<div className="min-h-screen bg-white">
@@ -162,8 +172,8 @@ export default function DashboardPage() {
</div>
{/* My Requirements */}
<div className="mb-8">
<h2 className="text-lg font-bold text-gray-800 mb-1">My Requirements</h2>
<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>
@@ -188,7 +198,10 @@ export default function DashboardPage() {
<div className="grid grid-cols-4 gap-0 max-w-2xl mx-auto">
{/* Row 1 */}
{/* Data Services - spans 2 rows */}
<div className="row-span-2 bg-blue-200 border border-blue-300 flex flex-col items-center justify-center p-4 cursor-pointer hover:bg-blue-300 transition-colors min-h-[200px]">
<div
onClick={() => handleCategoryClick('Data Services')}
className="row-span-2 bg-blue-200 border border-blue-300 flex flex-col items-center justify-center p-4 cursor-pointer hover:bg-blue-300 transition-colors min-h-[200px]"
>
<div className="text-blue-800">
<DataServicesIcon />
</div>
@@ -196,7 +209,10 @@ export default function DashboardPage() {
</div>
{/* Integration - 1 row */}
<div className="bg-amber-200 border border-amber-300 flex flex-col items-center justify-center p-4 cursor-pointer hover:bg-amber-300 transition-colors min-h-[100px]">
<div
onClick={() => handleCategoryClick('Integration')}
className="bg-amber-200 border border-amber-300 flex flex-col items-center justify-center p-4 cursor-pointer hover:bg-amber-300 transition-colors min-h-[100px]"
>
<div className="text-amber-800">
<IntegrationIcon />
</div>
@@ -204,7 +220,10 @@ export default function DashboardPage() {
</div>
{/* Intelligence - spans 2 rows */}
<div className="row-span-2 bg-purple-200 border border-purple-300 flex flex-col items-center justify-center p-4 cursor-pointer hover:bg-purple-300 transition-colors min-h-[200px]">
<div
onClick={() => handleCategoryClick('Intelligence')}
className="row-span-2 bg-purple-200 border border-purple-300 flex flex-col items-center justify-center p-4 cursor-pointer hover:bg-purple-300 transition-colors min-h-[200px]"
>
<div className="text-purple-800">
<IntelligenceIcon />
</div>
@@ -212,7 +231,10 @@ export default function DashboardPage() {
</div>
{/* User Experience - spans 2 rows */}
<div className="row-span-2 bg-green-200 border border-green-300 flex flex-col items-center justify-center p-4 cursor-pointer hover:bg-green-300 transition-colors min-h-[200px]">
<div
onClick={() => handleCategoryClick('User Experience')}
className="row-span-2 bg-green-200 border border-green-300 flex flex-col items-center justify-center p-4 cursor-pointer hover:bg-green-300 transition-colors min-h-[200px]"
>
<div className="text-green-800">
<UserExperienceIcon />
</div>
@@ -221,7 +243,10 @@ export default function DashboardPage() {
{/* Row 2 - Management and Trustworthiness */}
{/* Management - 1 row, spans 1 col */}
<div className="bg-red-200 border border-red-300 flex flex-col items-center justify-center p-4 cursor-pointer hover:bg-red-300 transition-colors min-h-[100px]">
<div
onClick={() => handleCategoryClick('Management')}
className="bg-red-200 border border-red-300 flex flex-col items-center justify-center p-4 cursor-pointer hover:bg-red-300 transition-colors min-h-[100px]"
>
<div className="text-red-800">
<ManagementIcon />
</div>
@@ -229,7 +254,10 @@ export default function DashboardPage() {
</div>
{/* Trustworthiness - 1 row */}
<div className="bg-green-100 border border-green-300 flex flex-col items-center justify-center p-4 cursor-pointer hover:bg-green-200 transition-colors min-h-[100px]">
<div
onClick={() => handleCategoryClick('Trustworthiness')}
className="bg-green-100 border border-green-300 flex flex-col items-center justify-center p-4 cursor-pointer hover:bg-green-200 transition-colors min-h-[100px]"
>
<div className="text-red-400">
<TrustworthinessIcon />
</div>