---
type: redmine-readme
project: Endress + Hauser
subject: Wizard Review, Approval and Print Preview redesign
story_key: dc-wizard-review-approval-ui
generated_at: 2026-10-16T16:56:59+05:30
story_type: feature
attachments:
  - file: dc-wizard-review-approval-ui_20261016-1656__dc_review_page_redesign_v2.html
    description: Review page design supplied by the user on 11 Sep 2026
---

# Wizard Review, Approval and Print Preview redesign

> Review and Approval screens show full names and addresses, the real print format and clear actions.

## 1. Summary
Early feedback on the wizard was that the layout needed too much scrolling, IDs appeared instead of names, buttons repeated, and the print preview did not match the print format the team already uses. This feature rebuilt Review and Approval as icon-labelled cards with full Company, Ship To and Dispatch From addresses, one action area, and a Print Preview that loads the real Delivery Challan print format (Inward or Outward) and refetches on every expand. It follows a design HTML the user supplied on 11 Sep. Card hover is black, as requested. Committed in `eb17760`, with alignment work on 15 Sep.

## 2. Requirement
| # | Requirement | Source | Status |
|---|---|---|---|
| R1 | Fix address alignment and excessive scrolling | User, 10 Sep | Done |
| R2 | Show names, not IDs, on Review, Created and Approval | User, 10 Sep | Done |
| R3 | Remove repeated buttons; rename the stage to "Approval" | User, 10 Sep | Done |
| R4 | Print Preview uses the existing Delivery Challan print format, Inward or Outward | User, 10 Sep | Done |
| R5 | Print Preview and Download PDF after approval in every step; address changes show without a refresh | User, 10 Sep | Done |
| R6 | Hovering a Start card highlights it in black | User, 11 Sep | Done |
| R7 | Redesign the preview per the supplied HTML, with print options and full Ship To and Company addresses | User, 11 Sep | Done |
| R8 | Fields not aligned, too much space | User, 15 Sep | Done |

## 3. Decisions
| Decision | Options considered | Why this one | Date |
|---|---|---|---|
| Print Preview refetches on every expand | Cache the first render | Address changes were showing only after a page refresh | 2026-09-10 |
| Hover and selected card state use black, not blue | Keep blue | Matches the grayscale design; user asked for black | 2026-09-11 |
| Follow the supplied `dc_review_page_redesign_v2` HTML | Own layout | User asked for it; the file is attached to this ticket | 2026-09-11 |

## 4. Logic & Workflow
1. Review shows entry-mode and E-Way Bill badges, then cards for each section with full addresses.
2. Approval shows actions first (Approve, Reject, Cancel), then the read-only summary, then Print Preview.
3. Print Preview loads the real print format for the document's direction and can download a PDF.
4. Edit links on Review return to Review with "Save & Return to Review".

## 5. Files & Components Changed
| File / DocType / Fixture | Type | Change | Purpose |
|---|---|---|---|
| canofy_custom_eh/canofy_custom_eh/page/delivery_challan_wizard/delivery_challan_wizard.js | Page JS | Changed | Review and Approval rendering |
| canofy_custom_eh/public/js/dc_wizard_common.js | Shared JS | Changed | Cards, preview helpers |
| canofy_custom_eh/public/css/dc_wizard.css | CSS | Changed | Card layout, hover state, alignment |

## 6. Configuration & Deployment
No settings. Build assets and clear cache.

## 7. Testing
| Test | Data / Site | Expected | Actual | Status |
|---|---|---|---|---|
| Review cards, addresses, totals, badges | E2E suite, 5 Oct | TC-051 to TC-058 and TC-059 to TC-061 pass | Pass | PASS |
| Approval layout and Print Preview | E2E suite, 5 Oct | TC-066, TC-068 pass | Pass | PASS |
| Card hover highlight | E2E suite, 5 Oct | TC-005 passes | Pass | PASS |

## 8. Known Limitations & Open Items
- The design HTML is attached as supplied; the final page differs where the user gave later feedback (alignment, hover colour).

## 9. Status
| Item | Value |
|---|---|
| Branch | claude/delivery-challan-wizard-bcb464 |
| Commits | `eb17760`; alignment follow-up Not confirmed (`9c93020` CSS change is a likely match) |
| PR | Not confirmed |
| Version | Not confirmed |
| Deployed to | Local dev site only |

## 10. References
- Related: `dc-wizard-guided-flow`, `dc-print-format-changes`