From 4c916316e3c094eafc7051ba8068f2b268ccf377 Mon Sep 17 00:00:00 2001
From: gulimabr <gulimabr@gmail.com>
Date: Mon, 1 Dec 2025 10:06:48 -0300
Subject: [PATCH] Remove view mode toggle and simplify filtering logic on the
 Req page

---
 frontend/src/pages/RequirementsPage.tsx | 37 ++++---------------------
 1 file changed, 6 insertions(+), 31 deletions(-)

diff --git a/frontend/src/pages/RequirementsPage.tsx b/frontend/src/pages/RequirementsPage.tsx
index e400120..385f2ce 100644
--- a/frontend/src/pages/RequirementsPage.tsx
+++ b/frontend/src/pages/RequirementsPage.tsx
@@ -39,7 +39,6 @@ export default function RequirementsPage() {
   const [searchQuery, setSearchQuery] = useState('')
   const [selectedGroups, setSelectedGroups] = useState<number[]>([])
   const [orderBy, setOrderBy] = useState<'Date' | 'Priority' | 'Name'>('Date')
-  const [viewMode, setViewMode] = useState<'grid' | 'list'>('list')
   
   // Modal state
   const [showCreateModal, setShowCreateModal] = useState(false)
@@ -96,9 +95,8 @@ export default function RequirementsPage() {
 
   // Filter requirements based on search and selected groups
   const filteredRequirements = requirements.filter(req => {
-    const tagLabel = `${req.tag.tag_code}#${req.id}`
     const matchesSearch = searchQuery === '' || 
-      tagLabel.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      req.tag.tag_code.toLowerCase().includes(searchQuery.toLowerCase()) ||
       req.req_name.toLowerCase().includes(searchQuery.toLowerCase())
     
     const matchesGroup = selectedGroups.length === 0 || 
@@ -368,8 +366,8 @@ export default function RequirementsPage() {
               </div>
             </div>
 
-            {/* Order By and View Toggle */}
-            <div className="flex items-center justify-between mb-6">
+            {/* Order By */}
+            <div className="flex items-center mb-6">
               <div className="flex items-center gap-2">
                 <span className="text-sm text-gray-600">Order by:</span>
                 <select
@@ -385,29 +383,6 @@ export default function RequirementsPage() {
                   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 */}
@@ -415,8 +390,8 @@ export default function RequirementsPage() {
               {sortedRequirements.map((req) => {
                 const primaryColor = getRequirementColor(req)
                 const bgColor = lightenColor(primaryColor, 60)
-                const tagLabel = `${req.tag.tag_code}#${req.id}`
-                const priorityNum = req.priority?.priority_num ?? 0
+                const tagLabel = req.tag.tag_code
+                const priorityName = req.priority?.priority_name ?? 'None'
                 const validationStatus = req.validation_status || 'Not Validated'
                 
                 return (
@@ -444,7 +419,7 @@ export default function RequirementsPage() {
                     
                     {/* Priority and Version */}
                     <div className="px-6 py-4 text-right">
-                      <p className="text-sm text-gray-700">Priority: {priorityNum}</p>
+                      <p className="text-sm text-gray-700">Priority: {priorityName}</p>
                       <p className="text-sm text-gray-600">Version: {req.version}</p>
                     </div>