Created requirements page frontend

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { Routes, Route } from 'react-router-dom'
 import Layout from '@/components/Layout'
 import HomePage from '@/pages/HomePage'
 import DashboardPage from '@/pages/DashboardPage'
+import RequirementsPage from '@/pages/RequirementsPage'
 import ProtectedRoute from '@/components/ProtectedRoute'
 
 function App() {
@@ -23,6 +24,14 @@ function App() {
           </ProtectedRoute>
         }
       />
+      <Route
+        path="/requirements"
+        element={
+          <ProtectedRoute>
+            <RequirementsPage />
+          </ProtectedRoute>
+        }
+      />
     </Routes>
   )
 }

frontend/src/pages/DashboardPage.tsx

@@ -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">
+            <div className="mb-8 cursor-pointer" onClick={handleMyRequirementsClick}>
-              <h2 className="text-lg font-bold text-gray-800 mb-1">My Requirements</h2>
+              <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>

frontend/src/pages/RequirementsPage.tsx

@@ -0,0 +1,402 @@
+import { useState, useEffect } from 'react'
+import { useAuth } from '@/hooks'
+import { useSearchParams, Link } from 'react-router-dom'
+
+// Types for requirements
+interface Requirement {
+  id: string
+  tag: string
+  title: string
+  validation: string
+  priority: number
+  progress: number
+  group: RequirementGroup
+}
+
+type RequirementGroup = 
+  | 'Data Services' 
+  | 'Integration' 
+  | 'Intelligence' 
+  | 'User Experience' 
+  | 'Management' 
+  | 'Trustworthiness'
+
+// Color mapping for requirement groups
+const groupColors: Record<RequirementGroup, { bg: string; border: string }> = {
+  'Data Services': { bg: 'bg-blue-200', border: 'border-blue-300' },
+  'Integration': { bg: 'bg-amber-200', border: 'border-amber-300' },
+  'Intelligence': { bg: 'bg-purple-200', border: 'border-purple-300' },
+  'User Experience': { bg: 'bg-green-200', border: 'border-green-300' },
+  'Management': { bg: 'bg-red-200', border: 'border-red-300' },
+  'Trustworthiness': { bg: 'bg-teal-600', border: 'border-teal-700' },
+}
+
+// Static mock data
+const mockRequirements: Requirement[] = [
+  {
+    id: '1',
+    tag: 'GSR#7',
+    title: 'Controle e monitoramento em right-time',
+    validation: 'Not Validated',
+    priority: 0,
+    progress: 0,
+    group: 'Trustworthiness',
+  },
+  {
+    id: '2',
+    tag: 'GSR#10',
+    title: 'Interface de software DT-externo bem definida.',
+    validation: 'Not Validated',
+    priority: 1,
+    progress: 0,
+    group: 'Intelligence',
+  },
+  {
+    id: '3',
+    tag: 'GSR#12',
+    title: 'Visualizacao',
+    validation: 'Not Validated',
+    priority: 1,
+    progress: 0,
+    group: 'User Experience',
+  },
+  {
+    id: '4',
+    tag: 'GSR#1',
+    title: 'Estado corrente atualizado',
+    validation: 'Not Validated',
+    priority: 1,
+    progress: 0,
+    group: 'Data Services',
+  },
+  {
+    id: '5',
+    tag: 'GSR#5',
+    title: 'Sincronização de dados em tempo real',
+    validation: 'Not Validated',
+    priority: 2,
+    progress: 25,
+    group: 'Data Services',
+  },
+  {
+    id: '6',
+    tag: 'GSR#8',
+    title: 'Integração com sistemas legados',
+    validation: 'Not Validated',
+    priority: 1,
+    progress: 50,
+    group: 'Integration',
+  },
+  {
+    id: '7',
+    tag: 'GSR#15',
+    title: 'Dashboard de gestão',
+    validation: 'Not Validated',
+    priority: 3,
+    progress: 0,
+    group: 'Management',
+  },
+]
+
+// Caption types
+const captionItems = [
+  { abbr: 'SFR', description: 'Specific Functional Requirement', underline: true },
+  { abbr: 'SNFR', description: 'Specific Non-Functional Requirement', underline: true },
+  { abbr: 'GNFR', description: 'Generic Non-Functional Requirement', underline: true },
+  { abbr: 'GSR', description: 'Generic Service Requirement', underline: true },
+  { abbr: 'GDR', description: 'Generic Data Requirement', underline: true },
+  { abbr: 'GCR', description: 'Generic Connection Requirement', underline: true },
+]
+
+export default function RequirementsPage() {
+  const { user, logout } = useAuth()
+  const [searchParams, setSearchParams] = useSearchParams()
+  
+  // State
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedGroups, setSelectedGroups] = useState<RequirementGroup[]>([])
+  const [orderBy, setOrderBy] = useState<'Date' | 'Priority' | 'Name'>('Date')
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('list')
+  
+  // Initialize filters from URL params
+  useEffect(() => {
+    const groupParam = searchParams.get('group')
+    if (groupParam) {
+      setSelectedGroups([groupParam as RequirementGroup])
+    }
+  }, [searchParams])
+
+  // Filter requirements based on search and selected groups
+  const filteredRequirements = mockRequirements.filter(req => {
+    const matchesSearch = searchQuery === '' || 
+      req.tag.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      req.title.toLowerCase().includes(searchQuery.toLowerCase())
+    
+    const matchesGroup = selectedGroups.length === 0 || 
+      selectedGroups.includes(req.group)
+    
+    return matchesSearch && matchesGroup
+  })
+
+  // Sort requirements
+  const sortedRequirements = [...filteredRequirements].sort((a, b) => {
+    switch (orderBy) {
+      case 'Priority':
+        return b.priority - a.priority
+      case 'Name':
+        return a.title.localeCompare(b.title)
+      default:
+        return 0
+    }
+  })
+
+  const handleGroupToggle = (group: RequirementGroup) => {
+    setSelectedGroups(prev => 
+      prev.includes(group) 
+        ? prev.filter(g => g !== group)
+        : [...prev, group]
+    )
+  }
+
+  const handleClear = () => {
+    setSearchQuery('')
+    setSelectedGroups([])
+    setSearchParams({})
+  }
+
+  const handleSearch = () => {
+    // For now, filtering is automatic - this could trigger an API call later
+  }
+
+  const handleRemove = (id: string) => {
+    // For now, just a placeholder - will connect to backend later
+    console.log('Remove requirement:', id)
+  }
+
+  const handleDetails = (id: string) => {
+    // For now, just a placeholder - will connect to backend later
+    console.log('View details:', id)
+  }
+
+  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 */}
+          <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>
+            <span className="mx-2 text-gray-400">»</span>
+            <span className="font-semibold text-gray-900">Search Requirements</span>
+          </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>
+
+          {/* 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 || 'Ricardo Belo'}{' '}
+                <span className="text-gray-500">(admin)</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>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-7xl mx-auto px-8 py-8">
+        <div className="flex gap-8">
+          {/* Main Panel */}
+          <div className="flex-1">
+            {/* New Requirement Button */}
+            <div className="mb-6">
+              <button className="px-4 py-2 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-50">
+                New Requirement
+              </button>
+            </div>
+
+            {/* Search Bar */}
+            <div className="flex gap-2 mb-6">
+              <input
+                type="text"
+                placeholder="Search for a requirement tag or title"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="flex-1 px-4 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"
+              />
+              <button 
+                onClick={handleSearch}
+                className="px-4 py-2 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-50"
+              >
+                Search
+              </button>
+              <button 
+                onClick={handleClear}
+                className="px-4 py-2 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-50"
+              >
+                Clear
+              </button>
+            </div>
+
+            {/* Filter Group */}
+            <div className="mb-6">
+              <p className="text-sm text-gray-600 mb-3">Filter Group</p>
+              <div className="grid grid-cols-3 gap-x-8 gap-y-2">
+                {(['Data Services', 'Intelligence', 'Management', 'Integration', 'User Experience', 'Trustworthiness'] as RequirementGroup[]).map((group) => (
+                  <label key={group} className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={selectedGroups.includes(group)}
+                      onChange={() => handleGroupToggle(group)}
+                      className="w-4 h-4 rounded border-gray-300 text-teal-600 focus:ring-teal-500"
+                    />
+                    <span className="text-sm text-blue-600 underline">{group}</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            {/* Order By and View Toggle */}
+            <div className="flex items-center justify-between mb-6">
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-gray-600">Order by:</span>
+                <select
+                  value={orderBy}
+                  onChange={(e) => setOrderBy(e.target.value as 'Date' | 'Priority' | 'Name')}
+                  className="px-3 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
+                >
+                  <option value="Date">Date</option>
+                  <option value="Priority">Priority</option>
+                  <option value="Name">Name</option>
+                </select>
+                <button className="px-4 py-1 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-50">
+                  Filter
+                </button>
+              </div>
+              
+              <div className="flex gap-2">
+                <button
+                  onClick={() => setViewMode('grid')}
+                  className={`px-4 py-1 border rounded text-sm font-medium ${
+                    viewMode === 'grid' 
+                      ? 'bg-gray-200 border-gray-400' 
+                      : 'border-gray-400 text-gray-700 hover:bg-gray-50'
+                  }`}
+                >
+                  Grid
+                </button>
+                <button
+                  onClick={() => setViewMode('list')}
+                  className={`px-4 py-1 border rounded text-sm font-medium ${
+                    viewMode === 'list' 
+                      ? 'bg-gray-200 border-gray-400' 
+                      : 'border-gray-400 text-gray-700 hover:bg-gray-50'
+                  }`}
+                >
+                  List
+                </button>
+              </div>
+            </div>
+
+            {/* Requirements List */}
+            <div className="space-y-4">
+              {sortedRequirements.map((req) => {
+                const colors = groupColors[req.group]
+                return (
+                  <div
+                    key={req.id}
+                    className={`flex items-center border ${colors.border} rounded overflow-hidden`}
+                  >
+                    {/* Colored tag section */}
+                    <div className={`${colors.bg} px-4 py-4 min-w-[320px]`}>
+                      <span className="font-bold text-gray-800">
+                        {req.tag} - {req.title}
+                      </span>
+                    </div>
+                    
+                    {/* Validation status */}
+                    <div className="flex-1 px-6 py-4 text-center">
+                      <span className="text-sm text-gray-600">
+                        Validation: {req.validation}
+                      </span>
+                    </div>
+                    
+                    {/* Priority and Progress */}
+                    <div className="px-6 py-4 text-right">
+                      <p className="text-sm text-gray-700">Priority: {req.priority}</p>
+                      <p className="text-sm text-gray-600">{req.progress.toFixed(2)}% Done</p>
+                    </div>
+                    
+                    {/* Action buttons */}
+                    <div className="flex gap-2 px-4 py-4">
+                      <button
+                        onClick={() => handleDetails(req.id)}
+                        className="px-3 py-1 border border-gray-400 rounded text-sm text-gray-700 hover:bg-gray-50"
+                      >
+                        Details
+                      </button>
+                      <button
+                        onClick={() => handleRemove(req.id)}
+                        className="px-3 py-1 border border-gray-400 rounded text-sm text-gray-700 hover:bg-gray-50"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  </div>
+                )
+              })}
+
+              {sortedRequirements.length === 0 && (
+                <div className="text-center py-12 text-gray-500">
+                  No requirements found matching your criteria.
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Right Sidebar - Caption */}
+          <div className="w-64 flex-shrink-0">
+            <div className="border-l border-gray-200 pl-6">
+              <h3 className="font-semibold text-gray-800 mb-4">Caption:</h3>
+              <div className="space-y-2">
+                {captionItems.map((item) => (
+                  <p key={item.abbr} className="text-sm">
+                    <span className="text-blue-600 underline">{item.abbr}</span>
+                    <span className="text-gray-600">: {item.description}</span>
+                  </p>
+                ))}
+              </div>
+              <hr className="my-4 border-gray-300" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/index.ts

@@ -1,2 +1,3 @@
 export { default as HomePage } from './HomePage'
 export { default as DashboardPage } from './DashboardPage'
+export { default as RequirementsPage } from './RequirementsPage'