visual refinements

frontend/src/pages/RequirementDetailPage.tsx

@@ -55,6 +55,17 @@ export default function RequirementDetailPage() {
   const [deletingCommentId, setDeletingCommentId] = useState<number | null>(null)
   const [deletingReplyId, setDeletingReplyId] = useState<number | null>(null)
 
+  // Delete confirmation modal state
+  const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false)
+  const [deleteConfirmData, setDeleteConfirmData] = useState<{
+    type: 'comment' | 'reply' | 'link'
+    id: number
+    parentId?: number
+    title: string
+    message: string
+  } | null>(null)
+  const [deleteConfirmLoading, setDeleteConfirmLoading] = useState(false)
+
   // Edit modal state
   const [showEditModal, setShowEditModal] = useState(false)
   const [editLoading, setEditLoading] = useState(false)
@@ -299,16 +310,23 @@ export default function RequirementDetailPage() {
   }
 
   // Handle deleting a relationship link
-  const handleDeleteLink = async (linkId: number) => {
+  const openDeleteLinkModal = (linkId: number) => {
-    if (!confirm('Are you sure you want to delete this relationship?')) return
+    setDeleteConfirmData({
+      type: 'link',
+      id: linkId,
+      title: 'Delete Relationship',
+      message: 'Are you sure you want to delete this relationship? This action cannot be undone.'
+    })
+    setShowDeleteConfirmModal(true)
+  }
 
+  const executeDeleteLink = async (linkId: number) => {
     try {
       setDeletingLinkId(linkId)
       await relationshipService.deleteLink(linkId)
       setRelationshipLinks(prev => prev.filter(link => link.id !== linkId))
     } catch (err) {
       console.error('Failed to delete link:', err)
-      alert(err instanceof Error ? err.message : 'Failed to delete link')
     } finally {
       setDeletingLinkId(null)
     }
@@ -386,25 +404,41 @@ export default function RequirementDetailPage() {
   }
 
   // Delete a comment
-  const handleDeleteComment = async (commentId: number) => {
+  const openDeleteCommentModal = (commentId: number) => {
-    if (!confirm('Are you sure you want to delete this comment? This will also hide all replies.')) return
+    setDeleteConfirmData({
+      type: 'comment',
+      id: commentId,
+      title: 'Delete Comment',
+      message: 'Are you sure you want to delete this comment? This will also hide all replies.'
+    })
+    setShowDeleteConfirmModal(true)
+  }
 
+  const executeDeleteComment = async (commentId: number) => {
     try {
       setDeletingCommentId(commentId)
       await commentService.deleteComment(commentId)
       setComments(prev => prev.filter(c => c.id !== commentId))
     } catch (err) {
       console.error('Failed to delete comment:', err)
-      alert('Failed to delete comment. Please try again.')
     } finally {
       setDeletingCommentId(null)
     }
   }
 
   // Delete a reply
-  const handleDeleteReply = async (replyId: number, commentId: number) => {
+  const openDeleteReplyModal = (replyId: number, commentId: number) => {
-    if (!confirm('Are you sure you want to delete this reply?')) return
+    setDeleteConfirmData({
+      type: 'reply',
+      id: replyId,
+      parentId: commentId,
+      title: 'Delete Reply',
+      message: 'Are you sure you want to delete this reply?'
+    })
+    setShowDeleteConfirmModal(true)
+  }
 
+  const executeDeleteReply = async (replyId: number, commentId: number) => {
     try {
       setDeletingReplyId(replyId)
       await commentService.deleteReply(replyId)
@@ -415,12 +449,42 @@ export default function RequirementDetailPage() {
       ))
     } catch (err) {
       console.error('Failed to delete reply:', err)
-      alert('Failed to delete reply. Please try again.')
     } finally {
       setDeletingReplyId(null)
     }
   }
 
+  // Handle delete confirmation
+  const handleConfirmDelete = async () => {
+    if (!deleteConfirmData) return
+
+    setDeleteConfirmLoading(true)
+    try {
+      switch (deleteConfirmData.type) {
+        case 'link':
+          await executeDeleteLink(deleteConfirmData.id)
+          break
+        case 'comment':
+          await executeDeleteComment(deleteConfirmData.id)
+          break
+        case 'reply':
+          if (deleteConfirmData.parentId) {
+            await executeDeleteReply(deleteConfirmData.id, deleteConfirmData.parentId)
+          }
+          break
+      }
+    } finally {
+      setDeleteConfirmLoading(false)
+      setShowDeleteConfirmModal(false)
+      setDeleteConfirmData(null)
+    }
+  }
+
+  const closeDeleteConfirmModal = () => {
+    setShowDeleteConfirmModal(false)
+    setDeleteConfirmData(null)
+  }
+
   // Open edit modal and load options
   const openEditModal = async () => {
     if (!requirement) return
@@ -603,13 +667,18 @@ export default function RequirementDetailPage() {
                 {validationStatus}
               </span>
               {requirement.validated_by && (
-                <span className="text-gray-500 ml-2">by @{requirement.validated_by}</span>
+                <span className="text-gray-500 ml-2">
+                  by {requirement.validated_by}
+                  {requirement.validated_at && (
+                    <span> on {new Date(requirement.validated_at).toLocaleDateString()}</span>
+                  )}
+                </span>
               )}
             </p>
             <p className="text-sm text-gray-700 mb-2">
               <span className="font-semibold">Author:</span>{' '}
               {requirement.author_username ? (
-                <span className="text-gray-700">@{requirement.author_username}</span>
+                <span className="text-gray-700">{requirement.author_username}</span>
               ) : (
                 <span className="text-gray-400 italic">Unknown</span>
               )}
@@ -617,7 +686,7 @@ export default function RequirementDetailPage() {
             {requirement.last_editor_username && (
               <p className="text-sm text-gray-700 mb-2">
                 <span className="font-semibold">Last Edited By:</span>{' '}
-                <span className="text-gray-700">@{requirement.last_editor_username}</span>
+                <span className="text-gray-700">{requirement.last_editor_username}</span>
               </p>
             )}
             {requirement.created_at && (
@@ -724,7 +793,7 @@ export default function RequirementDetailPage() {
                         <td className="px-4 py-3 text-sm">
                           {canDeleteLink(link) && (
                             <button
-                              onClick={() => handleDeleteLink(link.id)}
+                              onClick={() => openDeleteLinkModal(link.id)}
                               disabled={deletingLinkId === link.id}
                               className="text-red-600 hover:text-red-800 disabled:opacity-50"
                               title="Delete relationship"
@@ -825,7 +894,7 @@ export default function RequirementDetailPage() {
                         {/* Delete Button */}
                         {canDelete(comment.author_id) && (
                           <button
-                            onClick={() => handleDeleteComment(comment.id)}
+                            onClick={() => openDeleteCommentModal(comment.id)}
                             disabled={deletingCommentId === comment.id}
                             className="p-1 text-gray-400 hover:text-red-600 disabled:opacity-50"
                             title="Delete comment"
@@ -899,7 +968,7 @@ export default function RequirementDetailPage() {
                               {/* Reply Delete Button */}
                               {canDelete(reply.author_id) && (
                                 <button
-                                  onClick={() => handleDeleteReply(reply.id, comment.id)}
+                                  onClick={() => openDeleteReplyModal(reply.id, comment.id)}
                                   disabled={deletingReplyId === reply.id}
                                   className="p-1 text-gray-400 hover:text-red-600 disabled:opacity-50"
                                   title="Delete reply"
@@ -940,7 +1009,7 @@ export default function RequirementDetailPage() {
               </div>
               {requirement.validated_by && (
                 <p className="text-sm text-gray-500 mt-2">
-                  Last validated by @{requirement.validated_by}
+                  Last validated by {requirement.validated_by}
                   {requirement.validated_at && ` on ${new Date(requirement.validated_at).toLocaleDateString()}`}
                 </p>
               )}
@@ -1064,7 +1133,7 @@ export default function RequirementDetailPage() {
                               </span>
                             </td>
                             <td className="px-4 py-3 text-sm text-gray-700">
-                              @{validation.validator_username}
+                              {validation.validator_username}
                             </td>
                             <td className="px-4 py-3 text-sm text-gray-700">
                               {validation.comment || <span className="text-gray-400 italic">No comment</span>}
@@ -1089,7 +1158,7 @@ export default function RequirementDetailPage() {
             <div className="mb-4 p-3 bg-gray-50 border border-gray-200 rounded text-sm">
               <span className="font-medium text-gray-700">Original Author:</span>{' '}
               {requirement.author_username ? (
-                <span className="text-gray-800">@{requirement.author_username}</span>
+                <span className="text-gray-800">{requirement.author_username}</span>
               ) : (
                 <span className="text-gray-400 italic">Unknown</span>
               )}
@@ -1142,7 +1211,7 @@ export default function RequirementDetailPage() {
                       </div>
                       <div className="flex items-center gap-4 text-sm text-gray-500">
                         {historyItem.edited_by_username && (
-                          <span>by @{historyItem.edited_by_username}</span>
+                          <span>by {historyItem.edited_by_username}</span>
                         )}
                         {historyItem.valid_from && historyItem.valid_to && (
                           <span>
@@ -1629,6 +1698,55 @@ export default function RequirementDetailPage() {
           </div>
         </div>
       )}
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteConfirmModal && deleteConfirmData && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
+            {/* Modal 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">{deleteConfirmData.title}</h2>
+              </div>
+              <button
+                onClick={closeDeleteConfirmModal}
+                className="text-gray-400 hover:text-gray-600"
+                disabled={deleteConfirmLoading}
+              >
+                <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>
+
+            {/* Modal Body */}
+            <div className="px-6 py-6">
+              <p className="text-gray-700">{deleteConfirmData.message}</p>
+            </div>
+
+            {/* Modal Footer */}
+            <div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg">
+              <button
+                onClick={closeDeleteConfirmModal}
+                className="px-4 py-2 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-100"
+                disabled={deleteConfirmLoading}
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleConfirmDelete}
+                className="px-4 py-2 bg-red-600 text-white rounded text-sm font-medium hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                disabled={deleteConfirmLoading}
+              >
+                {deleteConfirmLoading ? 'Deleting...' : 'Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

frontend/src/pages/RequirementsPage.tsx

@@ -64,6 +64,14 @@ export default function RequirementsPage() {
   const [deletedRequirements, setDeletedRequirements] = useState<DeletedRequirement[]>([])
   const [deletedLoading, setDeletedLoading] = useState(false)
   
+  // Caption modal state
+  const [showCaptionModal, setShowCaptionModal] = useState(false)
+  
+  // Delete confirmation modal state
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<{ id: number; name: string } | null>(null)
+  const [deleteLoading, setDeleteLoading] = useState(false)
+  
   // Fetch data when project changes
   useEffect(() => {
     const fetchData = async () => {
@@ -188,22 +196,34 @@ export default function RequirementsPage() {
     // Filtering is automatic, but this could trigger a fresh API call
   }
 
-  const handleRemove = async (id: number) => {
+  const openDeleteModal = (id: number, name: string) => {
-    if (!confirm('Are you sure you want to delete this requirement?')) {
+    setDeleteTarget({ id, name })
-      return
+    setShowDeleteModal(true)
   }
 
+  const closeDeleteModal = () => {
+    setShowDeleteModal(false)
+    setDeleteTarget(null)
+  }
+
+  const handleConfirmDelete = async () => {
+    if (!deleteTarget) return
+    
     try {
-      await requirementService.deleteRequirement(id)
+      setDeleteLoading(true)
+      await requirementService.deleteRequirement(deleteTarget.id)
       // Remove from local state
-      setRequirements(prev => prev.filter(r => r.id !== id))
+      setRequirements(prev => prev.filter(r => r.id !== deleteTarget.id))
       // Refresh deleted requirements if panel is open
       if (showDeletedPanel) {
         fetchDeletedRequirements()
       }
+      closeDeleteModal()
     } catch (err) {
       console.error('Failed to delete requirement:', err)
-      alert('Failed to delete requirement. Please try again.')
+      // Keep modal open and show error could be added here
+    } finally {
+      setDeleteLoading(false)
     }
   }
 
@@ -381,9 +401,8 @@ export default function RequirementsPage() {
 
       {/* Main Content */}
       <div className="max-w-7xl mx-auto px-8 py-8">
-        <div className="flex gap-8">
+        {/* Main Panel - Now full width */}
-          {/* Main Panel */}
+        <div>
-          <div className="flex-1">
             {/* New Requirement Button - Hidden for auditors */}
             {!isAuditor && (
               <div className="mb-6 flex gap-2">
@@ -478,7 +497,7 @@ export default function RequirementsPage() {
             </div>
 
             {/* Order By */}
-            <div className="flex items-center mb-6">
+            <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
@@ -494,10 +513,22 @@ export default function RequirementsPage() {
                   Filter
                 </button>
               </div>
+              
+              {/* Caption Button */}
+              <button
+                onClick={() => setShowCaptionModal(true)}
+                className="flex items-center gap-2 px-3 py-1.5 border border-teal-500 rounded text-sm font-medium text-teal-700 hover:bg-teal-50 transition-colors"
+                title="View tag captions"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                Caption
+              </button>
             </div>
 
             {/* Requirements List */}
-            <div className="space-y-4">
+            <div className="space-y-3">
               {sortedRequirements.map((req) => {
                 const tagLabel = req.tag.tag_code
                 const priorityName = req.priority?.priority_name ?? 'None'
@@ -515,26 +546,29 @@ export default function RequirementsPage() {
                         : 'border-gray-300'
                     }`}
                   >
-                    {/* Tag and name section */}
+                    {/* Tag and name section - responsive width */}
-                    <div className="px-4 py-4 min-w-[280px]">
+                    <div className="w-[280px] lg:w-[350px] xl:w-[400px] flex-shrink-0 px-4 py-3">
-                      <div className="flex items-center gap-2">
+                      <div className="flex items-start gap-2">
                         {isDraft && (
                           <span 
-                            className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800 border border-amber-300"
+                            className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800 border border-amber-300 flex-shrink-0"
                             title="This requirement is still in draft and not finalized"
                           >
                             📝 Draft
                           </span>
                         )}
-                        <span className="font-bold text-gray-800">
+                        <span 
+                          className="font-bold text-gray-800 line-clamp-2"
+                          title={`${tagLabel} - ${req.req_name}`}
+                        >
                           {tagLabel} - {req.req_name}
                         </span>
                       </div>
                     </div>
                     
-                    {/* Group chips */}
+                    {/* Group chips - responsive width */}
-                    <div className="flex-1 px-4 py-4">
+                    <div className="w-[180px] lg:w-[200px] flex-shrink-0 px-3 py-3">
-                      <div className="flex items-center gap-2 flex-wrap">
+                      <div className="flex items-center gap-1.5 flex-wrap">
                         {req.groups.length > 0 ? (
                           <>
                             {req.groups.slice(0, 2).map(group => (
@@ -563,43 +597,46 @@ export default function RequirementsPage() {
                       </div>
                     </div>
                     
-                    {/* Validation status */}
+                    {/* Validation status - fixed width */}
-                    <div className="px-4 py-4 text-center">
+                    <div className="w-[140px] lg:w-[160px] flex-shrink-0 px-3 py-3">
-                      <div className="flex items-center justify-center gap-2">
+                      <div className="flex items-center justify-center gap-1.5 flex-wrap">
                         <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${validationStyle.bgColor} ${validationStyle.textColor}`}>
                           {validationStatus}
                         </span>
                         {isStale && (
-                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800" title="Requirement was modified after validation">
+                          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800" title="Requirement was modified after validation">
                             ⚠ Stale
                           </span>
                         )}
                       </div>
                       {req.validated_by && (
-                        <p className="text-xs text-gray-500 mt-1">
+                        <p className="text-xs text-gray-500 mt-1 text-center truncate" title={req.validated_by}>
-                          by @{req.validated_by}
+                          by {req.validated_by}
                         </p>
                       )}
                     </div>
                     
                     {/* Priority and Version */}
-                    <div className="px-4 py-4 text-right">
+                    <div className="w-[120px] lg:w-[140px] flex-shrink-0 px-3 py-3">
-                      <p className="text-sm text-gray-700">Priority: {priorityName}</p>
+                      <p className="text-sm text-gray-700 whitespace-nowrap">Priority: {priorityName}</p>
                       <p className="text-sm text-gray-600">Version: {req.version}</p>
                     </div>
                     
+                    {/* Spacer to push buttons to the right */}
+                    <div className="flex-1 min-w-[20px]"></div>
+                    
                     {/* Action buttons */}
-                    <div className="flex gap-2 px-4 py-4">
+                    <div className="flex-shrink-0 flex gap-2 px-4 py-3 items-center">
                       <button
                         onClick={() => handleDetails(req.id)}
-                        className="px-3 py-1 border border-gray-400 rounded text-sm text-gray-700 hover:bg-gray-50"
+                        className="px-3 py-1.5 border border-gray-400 rounded text-sm text-gray-700 hover:bg-gray-50 whitespace-nowrap"
                       >
                         Details
                       </button>
                       {!isAuditor && (
                         <button
-                          onClick={() => handleRemove(req.id)}
+                          onClick={() => openDeleteModal(req.id, req.req_name)}
-                          className="px-3 py-1 border border-gray-400 rounded text-sm text-gray-700 hover:bg-gray-50"
+                          className="px-3 py-1.5 border border-gray-400 rounded text-sm text-gray-700 hover:bg-gray-50 whitespace-nowrap"
                         >
                           Remove
                         </button>
@@ -616,23 +653,6 @@ export default function RequirementsPage() {
               )}
             </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">
-                {tags.map((tag) => (
-                  <p key={tag.id} className="text-sm">
-                    <span className="text-blue-600 underline">{tag.tag_code}</span>
-                    <span className="text-gray-600">: {tag.tag_description}</span>
-                  </p>
-                ))}
-              </div>
-              <hr className="my-4 border-gray-300" />
-            </div>
-          </div>
-        </div>
         </div>
 
       {/* Deleted Requirements Side Panel */}
@@ -726,7 +746,7 @@ export default function RequirementsPage() {
                       {req.deleted_by_username && (
                         <p>
                           <span className="text-gray-400">Deleted by:</span>{' '}
-                          <span className="font-medium">@{req.deleted_by_username}</span>
+                          <span className="font-medium">{req.deleted_by_username}</span>
                         </p>
                       )}
                     </div>
@@ -751,6 +771,108 @@ export default function RequirementsPage() {
         />
       )}
 
+      {/* Delete Confirmation Modal */}
+      {showDeleteModal && deleteTarget && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
+            {/* Modal 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">Delete Requirement</h2>
+              </div>
+              <button
+                onClick={closeDeleteModal}
+                className="text-gray-400 hover:text-gray-600"
+                disabled={deleteLoading}
+              >
+                <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>
+
+            {/* Modal Body */}
+            <div className="px-6 py-6">
+              <p className="text-gray-700">
+                Are you sure you want to delete the requirement{' '}
+                <span className="font-semibold text-gray-900">"{deleteTarget.name}"</span>?
+              </p>
+              <p className="text-sm text-gray-500 mt-2">
+                This action will move the requirement to the deleted items. You can view deleted requirements from the "Deleted" panel.
+              </p>
+            </div>
+
+            {/* Modal Footer */}
+            <div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg">
+              <button
+                onClick={closeDeleteModal}
+                className="px-4 py-2 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-100"
+                disabled={deleteLoading}
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleConfirmDelete}
+                className="px-4 py-2 bg-red-600 text-white rounded text-sm font-medium hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                disabled={deleteLoading}
+              >
+                {deleteLoading ? 'Deleting...' : 'Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Caption Modal */}
+      {showCaptionModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
+            {/* Modal Header */}
+            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+              <div className="flex items-center gap-2">
+                <svg className="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <h2 className="text-lg font-semibold text-gray-800">Tag Caption</h2>
+              </div>
+              <button
+                onClick={() => setShowCaptionModal(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>
+
+            {/* Modal Body */}
+            <div className="px-6 py-4 max-h-96 overflow-y-auto">
+              <div className="space-y-3">
+                {tags.map((tag) => (
+                  <div key={tag.id} className="flex items-start gap-2">
+                    <span className="text-blue-600 font-medium underline whitespace-nowrap">{tag.tag_code}</span>
+                    <span className="text-gray-600">: {tag.tag_description}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Modal Footer */}
+            <div className="flex justify-end px-6 py-3 border-t border-gray-200 bg-gray-50 rounded-b-lg">
+              <button
+                onClick={() => setShowCaptionModal(false)}
+                className="px-4 py-2 bg-teal-600 text-white rounded text-sm font-medium hover:bg-teal-700"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Create Requirement Modal */}
       {showCreateModal && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">