Mark superseded request versions as completed on Requests page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/StatusBadge.jsx

@@ -6,6 +6,7 @@ const labels = {
   client_approved: 'Client Approved',
   active: 'Active',
   completed: 'Completed',
+  superseded: 'Superseded',
   initial: 'Initial',
   revision: 'Revision',
   amendment: 'Amended',

src/pages/team/Requests.jsx

@@ -98,20 +98,32 @@ export default function Requests() {
           return bMax - aMax;
         });
 
+        // Build a map of max version per task so we can flag superseded groups
+        const maxVersionPerTask = {};
+        Object.values(groupMap).forEach(g => {
+          const p = g.find(s => s.type !== 'amendment') || g[0];
+          const cur = maxVersionPerTask[p.task_id] || 0;
+          if (p.version_number > cur) maxVersionPerTask[p.task_id] = p.version_number;
+        });
+
         return groups.map(group => {
           const primary = group.find(s => s.type !== 'amendment') || group[0];
           const amendments = group.filter(s => s.type === 'amendment');
           const task = tasks.find(t => t.id === primary.task_id);
           const project = projects.find(p => p.id === task?.project_id);
           const company = companies.find(co => co.id === project?.company_id);
+          const isSuperseded = primary.version_number < maxVersionPerTask[primary.task_id];
 
           return (
-            <div key={primary.id} className="request-card">
+            <div key={primary.id} className="request-card" style={{ opacity: isSuperseded ? 0.5 : 1 }}>
               <div className="request-card-header">
                 <div>
                   <div className="request-card-title">
                     {primary.service_type}
                     <StatusBadge status={primary.type} />
+                    {isSuperseded && (
+                      <span style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 500 }}>Superseded</span>
+                    )}
                   </div>
                   <div className="request-card-meta">
                     From <strong>{primary.submitted_by_name}</strong>
@@ -122,7 +134,10 @@ export default function Requests() {
                   </div>
                 </div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                  <StatusBadge status={task?.status || 'not_started'} />
+                  {isSuperseded
+                    ? <span className="badge badge-completed">Completed</span>
+                    : <StatusBadge status={task?.status || 'not_started'} />
+                  }
                   {task && <Link to={`/tasks/${task.id}`} className="btn btn-outline btn-sm">View Job</Link>}
                 </div>
               </div>