From d36a56c4c9fddcd7639391f4b18468d8875a4d9e Mon Sep 17 00:00:00 2001
From: robbond <rob@rdbsolutions.co.uk>
Date: Fri, 17 Apr 2026 09:05:28 +0100
Subject: [PATCH] refactor(representations): decompose representation flow
 shell into form stage and timetable panel (Slice R4, behaviour-preserving)

---
 components/case/representation/index.js       | 72 +++++--------------
 .../shell/RepresentationFlowFormStage.js      | 50 +++++++++++++
 .../shell/RepresentationTimetablePanel.js     | 49 +++++++++++++
 context/representations-refactor-tracker.md   | 18 +++++
 4 files changed, 134 insertions(+), 55 deletions(-)
 create mode 100644 components/case/representation/shell/RepresentationFlowFormStage.js
 create mode 100644 components/case/representation/shell/RepresentationTimetablePanel.js

diff --git a/components/case/representation/index.js b/components/case/representation/index.js
index 19273a89..239b4f5a 100644
--- a/components/case/representation/index.js
+++ b/components/case/representation/index.js
@@ -33,6 +33,7 @@ import RepLPACapacitySelection from "./representationLPACapacitySelection";
 import RepLandOwner from "./representationLandowner";
 import RepresentationProgress_enforcement from "./representationProgress/representationProgress_enforcement";
 import RepresentationProgress_s78 from "./representationProgress/representationProgress_s78";
+import RepresentationFlowFormStage from "./shell/RepresentationFlowFormStage";
 import {
     getQuestionnaireNextSection,
     resolveJourneyStageFlags,
@@ -1206,61 +1207,22 @@ let MakeRepresentation = (props) => {
                         docsOffline={docsOffline}
                     />
                 ) : (
-                    <>
-                        <h1 className="govuk-heading-l">
-                            {appealIsConsultation
-                                ? t(
-                                      "myrepresentations:make-a-consultation-on-label"
-                                  )
-                                : t(
-                                      "myrepresentations:make-a-representation-on-label"
-                                  )}{" "}
-                            {currentView.caseReference.currentReference}{" "}
-                        </h1>
-                        <div id="rep-form">
-                            <div className="govuk-grid-column-three-quarters wgForm">
-                                {whichControl()}
-                            </div>
-
-                            <div className="govuk-grid-column-one-quarter">
-                                <div className="card">
-                                    <div className="card-body">
-                                        <h2 className="govuk-heading-s">
-                                            {t(
-                                                "myrepresentations:timetable-title"
-                                            )}
-                                        </h2>
-                                        <div className="govuk-summary-list">
-                                            <div className="govuk-body-s">
-                                                {appealIsLocalImpact
-                                                    ? t(
-                                                          "myrepresentations:local-impact-report"
-                                                      )
-                                                    : t(
-                                                          "myrepresentations:questionnaire-due-label"
-                                                      )}
-                                                :{" "}
-                                                <span className="govuk-body-s">
-                                                    {renderDueDate()}
-                                                </span>
-                                            </div>
-
-                                            {!appealIsConsultation &&
-                                                renderStatementsDue()}
-
-                                            {renderMarineImpact()}
-
-                                            {renderConsultationClose()}
-
-                                            {renderFinalCommentsDue()}
-                                        </div>
-                                    </div>
-                                </div>
-
-                                {isQuestionnaire && whichProgress()}
-                            </div>
-                        </div>
-                    </>
+                    <RepresentationFlowFormStage
+                        t={t}
+                        appealIsConsultation={appealIsConsultation}
+                        currentReference={
+                            currentView.caseReference.currentReference
+                        }
+                        whichControl={whichControl}
+                        appealIsLocalImpact={appealIsLocalImpact}
+                        renderDueDate={renderDueDate}
+                        renderStatementsDue={renderStatementsDue}
+                        renderMarineImpact={renderMarineImpact}
+                        renderConsultationClose={renderConsultationClose}
+                        renderFinalCommentsDue={renderFinalCommentsDue}
+                        isQuestionnaire={isQuestionnaire}
+                        whichProgress={whichProgress}
+                    />
                 )}
             </form>
         </div>
diff --git a/components/case/representation/shell/RepresentationFlowFormStage.js b/components/case/representation/shell/RepresentationFlowFormStage.js
new file mode 100644
index 00000000..24a1c423
--- /dev/null
+++ b/components/case/representation/shell/RepresentationFlowFormStage.js
@@ -0,0 +1,50 @@
+import RepresentationTimetablePanel from "./RepresentationTimetablePanel";
+
+const RepresentationFlowFormStage = ({
+    t,
+    appealIsConsultation,
+    currentReference,
+    whichControl,
+    appealIsLocalImpact,
+    renderDueDate,
+    renderStatementsDue,
+    renderMarineImpact,
+    renderConsultationClose,
+    renderFinalCommentsDue,
+    isQuestionnaire,
+    whichProgress
+}) => {
+    return (
+        <>
+            <h1 className="govuk-heading-l">
+                {appealIsConsultation
+                    ? t("myrepresentations:make-a-consultation-on-label")
+                    : t(
+                          "myrepresentations:make-a-representation-on-label"
+                      )}{" "}
+                {currentReference}{" "}
+            </h1>
+
+            <div id="rep-form">
+                <div className="govuk-grid-column-three-quarters wgForm">
+                    {whichControl()}
+                </div>
+
+                <RepresentationTimetablePanel
+                    t={t}
+                    appealIsConsultation={appealIsConsultation}
+                    appealIsLocalImpact={appealIsLocalImpact}
+                    renderDueDate={renderDueDate}
+                    renderStatementsDue={renderStatementsDue}
+                    renderMarineImpact={renderMarineImpact}
+                    renderConsultationClose={renderConsultationClose}
+                    renderFinalCommentsDue={renderFinalCommentsDue}
+                    isQuestionnaire={isQuestionnaire}
+                    whichProgress={whichProgress}
+                />
+            </div>
+        </>
+    );
+};
+
+export default RepresentationFlowFormStage;
diff --git a/components/case/representation/shell/RepresentationTimetablePanel.js b/components/case/representation/shell/RepresentationTimetablePanel.js
new file mode 100644
index 00000000..b9169690
--- /dev/null
+++ b/components/case/representation/shell/RepresentationTimetablePanel.js
@@ -0,0 +1,49 @@
+const RepresentationTimetablePanel = ({
+    t,
+    appealIsConsultation,
+    appealIsLocalImpact,
+    renderDueDate,
+    renderStatementsDue,
+    renderMarineImpact,
+    renderConsultationClose,
+    renderFinalCommentsDue,
+    isQuestionnaire,
+    whichProgress
+}) => {
+    return (
+        <div className="govuk-grid-column-one-quarter">
+            <div className="card">
+                <div className="card-body">
+                    <h2 className="govuk-heading-s">
+                        {t("myrepresentations:timetable-title")}
+                    </h2>
+                    <div className="govuk-summary-list">
+                        <div className="govuk-body-s">
+                            {appealIsLocalImpact
+                                ? t("myrepresentations:local-impact-report")
+                                : t(
+                                      "myrepresentations:questionnaire-due-label"
+                                  )}
+                            :{" "}
+                            <span className="govuk-body-s">
+                                {renderDueDate()}
+                            </span>
+                        </div>
+
+                        {!appealIsConsultation && renderStatementsDue()}
+
+                        {renderMarineImpact()}
+
+                        {renderConsultationClose()}
+
+                        {renderFinalCommentsDue()}
+                    </div>
+                </div>
+            </div>
+
+            {isQuestionnaire && whichProgress()}
+        </div>
+    );
+};
+
+export default RepresentationTimetablePanel;
diff --git a/context/representations-refactor-tracker.md b/context/representations-refactor-tracker.md
index 6cbc548b..d2890539 100644
--- a/context/representations-refactor-tracker.md
+++ b/context/representations-refactor-tracker.md
@@ -45,6 +45,24 @@ Status: COMPLETE
 
 Notes: Completed in prior refactor slice work; no additional changes required in this closeout.
 
+**Completion notes (this slice):**
+
+- Implemented on feature branch created from `refactor`: `rep-slice-r4-flow-shell`.
+- Extracted render-shell structure from `components/case/representation/index.js` into:
+    - `components/case/representation/shell/RepresentationFlowFormStage.js`
+    - `components/case/representation/shell/RepresentationTimetablePanel.js`
+- Kept `index.js` as orchestration owner (no side-effect migration):
+    - `onHandleSubmit` unchanged in location/ownership
+    - `updateRepresentation` unchanged in location/ownership
+    - upload/PDF/email sequencing unchanged
+    - stage-resolution/questionnaire decisions remain in `index.js`
+- Preserved explicit prop passing; no grouped-prop/view-model abstraction introduced in this slice.
+- Validation evidence:
+    - `npm run lint` completed (warnings only, no new errors).
+    - `npm run test:reps` completed: **6 passed**.
+    - Manual APP/IP/Agent/LPA checks: **passed**.
+    - Manual EN/CY parity checks: **passed**.
+
 ---
 
 ### Slice R5 — Representation Elements Normalisation