From 92ab0601aec999db7bec4412c0a228849b7a4fd0 Mon Sep 17 00:00:00 2001
From: Krao Hasanee <kraohasanee@Kraos-MacBook-Pro.local>
Date: Fri, 27 Mar 2026 00:18:28 -0400
Subject: [PATCH] Group amendments inside their parent version box in timeline

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/client/RequestDetail.jsx | 49 +++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/pages/client/RequestDetail.jsx b/src/pages/client/RequestDetail.jsx
index e5ff26d..47b9d65 100755
--- a/src/pages/client/RequestDetail.jsx
+++ b/src/pages/client/RequestDetail.jsx
@@ -305,35 +305,50 @@ export default function RequestDetail() {
 
       <div className="card-title">Version History</div>
       <div className="version-timeline">
-        {submissions.map(sub => {
-          const delivery = sub.delivery;
+        {Object.values(
+          submissions.reduce((groups, sub) => {
+            const key = sub.version_number;
+            if (!groups[key]) groups[key] = [];
+            groups[key].push(sub);
+            return groups;
+          }, {})
+        ).map(group => {
+          const primary = group.find(s => s.type !== 'amendment') || group[0];
+          const amendments = group.filter(s => s.type === 'amendment');
+          const delivery = primary.delivery;
           return (
-            <div key={sub.id} className="version-item">
-              {sub.type === 'amendment' && (
-                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 8, letterSpacing: 0.5 }}>
-                  Amended Request
-                </div>
-              )}
+            <div key={primary.id} className="version-item">
               <div className="version-header">
                 <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                  {sub.type !== 'amendment' && (
-                    <div className="version-number">{vLabel(sub.version_number - 1)}</div>
-                  )}
-                  <StatusBadge status={sub.type} />
+                  <div className="version-number">{vLabel(primary.version_number - 1)}</div>
+                  <StatusBadge status={primary.type} />
                 </div>
                 <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>
-                  {sub.submitted_by_name && <span>{sub.submitted_by_name} · </span>}
-                  {new Date(sub.submitted_at).toLocaleDateString()}
+                  {primary.submitted_by_name && <span>{primary.submitted_by_name} · </span>}
+                  {new Date(primary.submitted_at).toLocaleDateString()}
                 </div>
               </div>
               <div className="detail-grid">
-                <div className="detail-item"><label>Service</label><p>{sub.service_type}</p></div>
-                <div className="detail-item"><label>Deadline</label><p>{sub.deadline || '—'}</p></div>
+                <div className="detail-item"><label>Service</label><p>{primary.service_type}</p></div>
+                <div className="detail-item"><label>Deadline</label><p>{primary.deadline || '—'}</p></div>
               </div>
               <div className="detail-item">
                 <label>Description</label>
-                <p style={{ marginTop: 4, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap' }}>{sub.description}</p>
+                <p style={{ marginTop: 4, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap' }}>{primary.description}</p>
               </div>
+
+              {amendments.map(amendment => (
+                <div key={amendment.id} style={{ marginTop: 12, padding: '12px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+                  <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 8, letterSpacing: 0.5 }}>
+                    Amended Request
+                  </div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 6 }}>
+                    {amendment.submitted_by_name} · {new Date(amendment.submitted_at).toLocaleDateString()}
+                  </div>
+                  <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', margin: 0 }}>{amendment.description}</p>
+                </div>
+              ))}
+
               {delivery && delivery.files && delivery.files.length > 0 && (
                 <div style={{ marginTop: 12, padding: '10px 14px', background: '#f0fdf4', borderRadius: 8, border: '1px solid #bbf7d0' }}>
                   <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', color: '#16a34a', marginBottom: 8 }}>