fixed deletion of requirements and added modal to see deleted requirements

frontend/src/pages/RequirementsPage.tsx

@@ -6,6 +6,7 @@ import type { Group } from '@/services/groupService'
 import type { Tag } from '@/services/tagService'
 import type { Priority } from '@/services/priorityService'
 import type { Requirement, RequirementCreateRequest } from '@/services/requirementService'
+import type { DeletedRequirement } from '@/types'
 
 // Get validation status color
 const getValidationStatusStyle = (status: string): { bgColor: string; textColor: string } => {
@@ -58,6 +59,11 @@ export default function RequirementsPage() {
   const [newReqPriorityId, setNewReqPriorityId] = useState<number | ''>('')
   const [newReqGroupIds, setNewReqGroupIds] = useState<number[]>([])
   
+  // Deleted requirements state
+  const [showDeletedPanel, setShowDeletedPanel] = useState(false)
+  const [deletedRequirements, setDeletedRequirements] = useState<DeletedRequirement[]>([])
+  const [deletedLoading, setDeletedLoading] = useState(false)
+  
   // Fetch data when project changes
   useEffect(() => {
     const fetchData = async () => {
@@ -112,6 +118,29 @@ export default function RequirementsPage() {
     }
   }, [searchParams, groups])
 
+  // Fetch deleted requirements when panel is opened
+  const fetchDeletedRequirements = async () => {
+    if (!currentProject) return
+    
+    try {
+      setDeletedLoading(true)
+      const deleted = await requirementService.getDeletedRequirements(currentProject.id)
+      setDeletedRequirements(deleted)
+    } catch (err) {
+      console.error('Failed to fetch deleted requirements:', err)
+    } finally {
+      setDeletedLoading(false)
+    }
+  }
+
+  const toggleDeletedPanel = () => {
+    const newState = !showDeletedPanel
+    setShowDeletedPanel(newState)
+    if (newState) {
+      fetchDeletedRequirements()
+    }
+  }
+
   // Filter requirements based on search and selected groups
   const filteredRequirements = requirements.filter(req => {
     const matchesSearch = searchQuery === '' || 
@@ -168,6 +197,10 @@ export default function RequirementsPage() {
       await requirementService.deleteRequirement(id)
       // Remove from local state
       setRequirements(prev => prev.filter(r => r.id !== id))
+      // Refresh deleted requirements if panel is open
+      if (showDeletedPanel) {
+        fetchDeletedRequirements()
+      }
     } catch (err) {
       console.error('Failed to delete requirement:', err)
       alert('Failed to delete requirement. Please try again.')
@@ -353,13 +386,53 @@ export default function RequirementsPage() {
           <div className="flex-1">
             {/* New Requirement Button - Hidden for auditors */}
             {!isAuditor && (
-              <div className="mb-6">
+              <div className="mb-6 flex gap-2">
                 <button 
                   onClick={openCreateModal}
                   className="px-4 py-2 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-50"
                 >
                   New Requirement
                 </button>
+                <button 
+                  onClick={toggleDeletedPanel}
+                  className={`px-4 py-2 border rounded text-sm font-medium flex items-center gap-2 ${
+                    showDeletedPanel 
+                      ? 'border-red-400 text-red-700 bg-red-50' 
+                      : 'border-gray-400 text-gray-700 hover:bg-gray-50'
+                  }`}
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                  </svg>
+                  Deleted
+                  {deletedRequirements.length > 0 && (
+                    <span className="bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full">
+                      {deletedRequirements.length}
+                    </span>
+                  )}
+                </button>
+              </div>
+            )}
+            {isAuditor && (
+              <div className="mb-6">
+                <button 
+                  onClick={toggleDeletedPanel}
+                  className={`px-4 py-2 border rounded text-sm font-medium flex items-center gap-2 ${
+                    showDeletedPanel 
+                      ? 'border-red-400 text-red-700 bg-red-50' 
+                      : 'border-gray-400 text-gray-700 hover:bg-gray-50'
+                  }`}
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                  </svg>
+                  Deleted
+                  {deletedRequirements.length > 0 && (
+                    <span className="bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full">
+                      {deletedRequirements.length}
+                    </span>
+                  )}
+                </button>
               </div>
             )}
 
@@ -562,6 +635,122 @@ export default function RequirementsPage() {
         </div>
       </div>
 
+      {/* Deleted Requirements Side Panel */}
+      {showDeletedPanel && (
+        <div className="fixed inset-y-0 right-0 w-96 bg-white shadow-xl z-40 flex flex-col">
+          {/* Panel Header */}
+          <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 bg-red-50">
+            <div className="flex items-center gap-2">
+              <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+              <h2 className="text-lg font-semibold text-gray-800">Deleted Requirements</h2>
+            </div>
+            <button
+              onClick={() => setShowDeletedPanel(false)}
+              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>
+
+          {/* Panel Content */}
+          <div className="flex-1 overflow-y-auto p-4">
+            {deletedLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-red-600"></div>
+              </div>
+            ) : deletedRequirements.length === 0 ? (
+              <div className="text-center py-8 text-gray-500">
+                <svg className="w-12 h-12 text-gray-300 mx-auto mb-3" 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>
+                <p>No deleted requirements found.</p>
+                <p className="text-sm mt-1">Deleted requirements will appear here.</p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {deletedRequirements.map((req) => (
+                  <div
+                    key={req.history_id}
+                    className="p-4 border border-gray-200 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
+                  >
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          <span className="text-xs font-medium text-gray-500 bg-gray-200 px-2 py-0.5 rounded">
+                            {req.tag_code || 'N/A'}
+                          </span>
+                          <span className="text-xs text-gray-400">
+                            v{req.version || 1}
+                          </span>
+                        </div>
+                        <h4 className="font-medium text-gray-800 truncate">
+                          {req.req_name || 'Unnamed Requirement'}
+                        </h4>
+                        {req.req_desc && (
+                          <p className="text-sm text-gray-500 mt-1 line-clamp-2">
+                            {req.req_desc}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                    
+                    <div className="mt-3 pt-3 border-t border-gray-200 text-xs text-gray-500 space-y-1">
+                      {req.priority_name && (
+                        <p>
+                          <span className="text-gray-400">Priority:</span>{' '}
+                          <span className="font-medium">{req.priority_name}</span>
+                        </p>
+                      )}
+                      <p>
+                        <span className="text-gray-400">Original ID:</span>{' '}
+                        <span className="font-medium">#{req.original_req_id}</span>
+                      </p>
+                      {req.deleted_at && (
+                        <p>
+                          <span className="text-gray-400">Deleted:</span>{' '}
+                          <span className="font-medium">
+                            {new Date(req.deleted_at).toLocaleDateString('en-US', {
+                              year: 'numeric',
+                              month: 'short',
+                              day: 'numeric',
+                              hour: '2-digit',
+                              minute: '2-digit'
+                            })}
+                          </span>
+                        </p>
+                      )}
+                      {req.deleted_by_username && (
+                        <p>
+                          <span className="text-gray-400">Deleted by:</span>{' '}
+                          <span className="font-medium">@{req.deleted_by_username}</span>
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Panel Footer */}
+          <div className="px-6 py-3 border-t border-gray-200 bg-gray-50 text-xs text-gray-500">
+            <p>💡 Deleted requirements are preserved in history for auditing purposes.</p>
+          </div>
+        </div>
+      )}
+
+      {/* Overlay when panel is open */}
+      {showDeletedPanel && (
+        <div 
+          className="fixed inset-0 bg-black bg-opacity-20 z-30"
+          onClick={() => setShowDeletedPanel(false)}
+        />
+      )}
+
       {/* Create Requirement Modal */}
       {showCreateModal && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">

frontend/src/services/requirementService.ts

@@ -1,7 +1,7 @@
 import { Group } from './groupService'
 import { Tag } from './tagService'
 import { Priority } from './priorityService'
-import type { RequirementHistory, RequirementStatus } from '@/types'
+import type { RequirementHistory, RequirementStatus, DeletedRequirement } from '@/types'
 
 const API_BASE_URL = '/api'
 
@@ -242,6 +242,32 @@ class RequirementService {
       throw error
     }
   }
+
+  /**
+   * Get all deleted requirements for a project.
+   * Returns requirements that exist in history but have been deleted.
+   */
+  async getDeletedRequirements(projectId: number): Promise<DeletedRequirement[]> {
+    try {
+      const response = await fetch(`${API_BASE_URL}/projects/${projectId}/deleted-requirements`, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const deletedRequirements: DeletedRequirement[] = await response.json()
+      return deletedRequirements
+    } catch (error) {
+      console.error('Failed to fetch deleted requirements:', error)
+      throw error
+    }
+  }
 }
 
 export const requirementService = new RequirementService()

frontend/src/types/index.ts

@@ -72,3 +72,16 @@ export interface RequirementHistory {
   valid_from: string | null
   valid_to: string | null
 }
+
+// Deleted Requirement types
+export interface DeletedRequirement {
+  history_id: number
+  original_req_id: number
+  version: number | null
+  req_name: string | null
+  req_desc: string | null
+  tag_code: string | null
+  priority_name: string | null
+  deleted_by_username: string | null
+  deleted_at: string | null
+}