[ENG-790] feat: enhance prescription print - #16594
Open
abhimanyurajeesh wants to merge 15 commits into
Open
Conversation
|
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughChangesThe print system gains custom footers and row-spanning tables. Prescription previews receive redesigned patient and medication layouts, prescription counters, location details, QR presentation, and updated dosage formatting. English translations and related test assertions are updated. Prescription printing
Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Deploying care-preview with
|
| Latest commit: |
744e32b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d7ee157e.care-preview-a7w.pages.dev |
| Branch Preview URL: | https://eng-790.care-preview-a7w.pages.dev |
Greptile SummaryEnhanced prescription print layouts, medication instruction tables, dosage formatting, footer support, localization, and related Playwright assertions. Confidence Score: 5/5The PR appears safe to merge. No blocking failures remain within the scope of the previous review threads.
|
| Filename | Overview |
|---|---|
| src/CAREUI/misc/PrintPreview.tsx | Adds optional footer rendering to facility and facility-less print layouts, resolving the previously reported missing-footer path. |
| src/components/Common/PrintTable.tsx | Adds customizable table styling and support for row-spanning and full-width rows. |
| src/components/Medicine/utils.ts | Centralizes dosage rounding while omitting decimal portions composed entirely of zeros. |
| src/components/Prescription/PrescriptionPreview.tsx | Redesigns prescription print content, patient details, medication grouping, location display, and footer presentation. |
Reviews (13): Last reviewed commit: "refactor: rename key from '#' to 'hash_t..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Pull request overview
Enhances the prescription print layout and supporting print components to improve readability and add richer print metadata (footer, table styling, and multi-prescription context).
Changes:
- Refined
PrescriptionPreviewprint layout (patient header, numbered meds table, multi-prescription indicator, footer timestamp, and optional IP location line). - Extended
PrintTableto support per-table header/cell/container styling and row-spanning cells. - Added helper
roundDosage()to avoid displaying trailing “.00” in dosage/total-unit formatting.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/Facility/services/pharmacy/PrintDispenseOrder.tsx | Updates PrintTable prop name for cell styling. |
| src/components/Prescription/PrescriptionPreview.tsx | Reworks prescription print UI, table columns, grouping, and adds footer + location path. |
| src/components/Medicine/utils.ts | Adds roundDosage() and applies it to dosage/unit formatting. |
| src/components/Medicine/FormattedDosage.tsx | Adjusts styling to improve highlighted dosage pill spacing. |
| src/components/Common/PrintTable.tsx | Adds cellClassName/headerClassName/tableClassName and rowspan support for grouped rows. |
| src/CAREUI/misc/PrintPreview.tsx | Adds optional footer support to the print layout. |
| public/locale/en.json | Adds i18n keys used by the updated print UI. |
Comments suppressed due to low confidence (1)
src/components/Common/PrintTable.tsx:132
rowSpanis derived viaparseInt(spanVal)without validation. If the value is non-numeric (or 0), React can end up rendering an invalidrowspanattribute. Parse base-10 and only passrowSpanfor finite spans > 1.
const spanVal = row[`_span_${key}`];
const rowSpan = spanVal ? parseInt(spanVal) : undefined;
return (
<TableCell
rowSpan={rowSpan}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/CAREUI/misc/PrintPreview.tsx`:
- Line 390: Move the footer rendering in the PrintPreview component outside the
facility-gated FacilityPrintLayout path so it renders even when facility is
undefined. Preserve the existing footer content and ensure PrescriptionPreview’s
generated footer remains visible on that fallback path.
In `@src/components/Common/PrintTable.tsx`:
- Line 134: Update the base table cell class string in PrintTable to replace the
unsupported wrap-break-words utility with Tailwind v4’s wrap-break-word class,
while preserving the existing whitespace-normal and text-center classes.
In `@src/components/Prescription/PrescriptionPreview.tsx`:
- Around line 119-131: Update the remarks construction in the prescription row
mapping so the row-spanned first row includes the formatted sigs from every
instruction, not only the current di; preserve the medication note and existing
filtering/join behavior while ensuring tapered prescriptions retain all route,
method, and site details.
- Around line 252-257: Update the footer timestamp rendering in
PrescriptionPreview to use the active locale for all three date renderings
instead of fixed format strings. Reuse the existing
translation/date-localization setup and preserve the current labels and layout.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 96d002a5-387c-4594-9fd7-682cafb3dfc4
📒 Files selected for processing (7)
public/locale/en.jsonsrc/CAREUI/misc/PrintPreview.tsxsrc/components/Common/PrintTable.tsxsrc/components/Medicine/FormattedDosage.tsxsrc/components/Medicine/utils.tssrc/components/Prescription/PrescriptionPreview.tsxsrc/pages/Facility/services/pharmacy/PrintDispenseOrder.tsx
🎭 Playwright Test ResultsStatus: ✅ Passed
📊 Detailed results are available in the playwright-final-report artifact. Run: #10498 |
yash-learner
left a comment
yash-learner
left a comment
Member
There was a problem hiding this comment.
Looks like specs are falling because of the new dosage format. please check
Can you also match the styles - font weights and styles of print with the figma design
one example -> medicine name
Figma ->
font-family: font-family/Figtree;
font-weight: font-weight/semibold;
font-style: SemiBold; <- this one
font-size: font-size/10;
leading-trim: NONE;
line-height: line-height/9;
letter-spacing: 0%;
Current
p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] wrap-break-words text-sm print:text-xs wrap-break-word whitespace-break-spaces text-gray-950 text-left font-medium max-w-56 min-w-32
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/components/Prescription/PrescriptionPreview.tsx (2)
36-44: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winDefine
PrescriptionContentprops with an interface.Replace the inline object type with a named
PrescriptionContentPropsinterface to follow the repository’s TypeScript component-prop convention.As per coding guidelines, component props must be defined with TypeScript interfaces.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Prescription/PrescriptionPreview.tsx` around lines 36 - 44, Define a named PrescriptionContentProps interface for the prescription, prescriptionIndex, and totalCount props, then update the PrescriptionContent component to use that interface instead of its inline object type.Source: Coding guidelines
121-132:⚠️ Potential issue | 🟠 MajorPreserve all instruction sigs in row-spanned remarks.
_span_remarksskips later rows, but the first row stores onlyformatSig(di). Multi-instruction prescriptions therefore omit later instruction details from the printed remarks. Aggregate all sigs or remove the remarks rowspan.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Prescription/PrescriptionPreview.tsx` around lines 121 - 132, Update the row construction in PrescriptionPreview so the first row’s row-spanned remarks include sigs from every instruction in a multi-instruction prescription, not only formatSig(di) for the current instruction. Aggregate the instruction sigs for the first row while preserving the existing medication note and non-first-row behavior, or remove _span_remarks if spanning is no longer appropriate.
♻️ Duplicate comments (1)
src/components/Prescription/PrescriptionPreview.tsx (1)
254-258:⚠️ Potential issue | 🟡 MinorLocalize the generated prescription timestamp.
format(new Date(), "PP 'at' p")does not receive the active locale and hardcodes the English"at"literal. Reuse the project’s locale-aware date/time formatting.As per coding guidelines, localized medical timestamps must use localized date/time formatting.
#!/bin/bash set -euo pipefail rg -n 'formatDateTime|date-fns/locale|format\(' src/components src/Utils🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Prescription/PrescriptionPreview.tsx` around lines 254 - 258, Update the timestamp rendering in PrescriptionPreview’s footer to use the project’s existing locale-aware date/time formatting utility, passing the active locale as required. Remove the hardcoded date-fns format string and English “at” literal while preserving the current generated timestamp content.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Prescription/PrescriptionPreview.tsx`:
- Around line 89-92: Update the prescription note markup in PrescriptionPreview
so the block-level Markdown component is not nested inside the existing
paragraph. Replace the paragraph with a suitable block-level wrapper, render the
translated note label in a separate element, and keep Markdown
content={prescription.note} with prose={false} and the existing styling/layout
behavior.
---
Outside diff comments:
In `@src/components/Prescription/PrescriptionPreview.tsx`:
- Around line 36-44: Define a named PrescriptionContentProps interface for the
prescription, prescriptionIndex, and totalCount props, then update the
PrescriptionContent component to use that interface instead of its inline object
type.
- Around line 121-132: Update the row construction in PrescriptionPreview so the
first row’s row-spanned remarks include sigs from every instruction in a
multi-instruction prescription, not only formatSig(di) for the current
instruction. Aggregate the instruction sigs for the first row while preserving
the existing medication note and non-first-row behavior, or remove _span_remarks
if spanning is no longer appropriate.
---
Duplicate comments:
In `@src/components/Prescription/PrescriptionPreview.tsx`:
- Around line 254-258: Update the timestamp rendering in PrescriptionPreview’s
footer to use the project’s existing locale-aware date/time formatting utility,
passing the active locale as required. Remove the hardcoded date-fns format
string and English “at” literal while preserving the current generated timestamp
content.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 4c8207c7-69e2-4715-96ae-85aeca29c4b4
📒 Files selected for processing (3)
src/CAREUI/misc/PrintPreview.tsxsrc/components/Common/PrintTable.tsxsrc/components/Prescription/PrescriptionPreview.tsx
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/components/Prescription/PrescriptionPreview.tsx (2)
127-129: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winLocalize missing-value placeholders.
"-"is rendered directly to users for missing dosage, schedule, and duration values. Replace it with an i18next translation key.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Prescription/PrescriptionPreview.tsx` around lines 127 - 129, Update the dosage, schedule, and duration fallback values in PrescriptionPreview to use the existing i18next translation mechanism instead of the hardcoded "-" placeholder. Add or reuse an appropriate translation key for the localized missing-value label while preserving the current formatted values when present.Source: Coding guidelines
69-72: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winUse a locale-aware timestamp format here.
formatDateTimecurrently forwards this fixedDD MMM YYYY, ddd, hh:mm Apattern directly to Day.js, so month/day names and ordering stay hard-coded instead of following the active locale. Prefer the repository’s localized date/time formatter for this medical timestamp.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Prescription/PrescriptionPreview.tsx` around lines 69 - 72, Update the PrescriptionPreview timestamp rendering around formatDateTime to use the repository’s locale-aware date/time formatter instead of the hard-coded “DD MMM YYYY, ddd, hh:mm A” pattern, while preserving use of prescription.created_date.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/components/Prescription/PrescriptionPreview.tsx`:
- Around line 127-129: Update the dosage, schedule, and duration fallback values
in PrescriptionPreview to use the existing i18next translation mechanism instead
of the hardcoded "-" placeholder. Add or reuse an appropriate translation key
for the localized missing-value label while preserving the current formatted
values when present.
- Around line 69-72: Update the PrescriptionPreview timestamp rendering around
formatDateTime to use the repository’s locale-aware date/time formatter instead
of the hard-coded “DD MMM YYYY, ddd, hh:mm A” pattern, while preserving use of
prescription.created_date.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 3d72d931-a45b-4b8c-aa50-fd87f3c10cc5
📒 Files selected for processing (1)
src/components/Prescription/PrescriptionPreview.tsx
Contributor
Author
intended, discussed with @amjithtitus09 |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (3)
src/components/Prescription/PrescriptionPreview.tsx:265
- The footer date format includes a hard-coded English literal ("at") inside the date-fns format string, which bypasses i18n and will show "at" even in non-English locales. Also, the
|divider is currently a raw text node; making it its own element is clearer and ensures spacing is controlled by flexgap.
footer={
<div className="mt-2 text-xs print:text-[10px] text-gray-900 text-center flex gap-2 justify-center">
<span>{t("computer_generated_prescription")}</span>|
<span>{format(new Date(), "PP 'at' p")}</span>
</div>
src/components/Medicine/utils.ts:11
Decimalis only used as a type in this file (in theroundDosageparameter). Using a value import can unnecessarily keep the import in the emitted JS depending on TS settings; prefer a type-only import here.
import { round } from "@/Utils/decimal";
import Decimal from "decimal.js";
src/components/Prescription/PrescriptionPreview.tsx:123
- Rowspan metadata for the "#" column won’t work: PrintTable looks for
_span_${key}and the header key is "#", but the row data sets_span_num. This means the numbering column won’t actually rowspan andskipCells["#"]will never be populated.
? "true"
: undefined,
_span_num:
idx === 0 && shouldSpan ? String(totalRows) : undefined,
_span_medicine:
idx === 0 && shouldSpan ? String(totalRows) : undefined,
Member
|
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (3)
src/components/Prescription/PrescriptionPreview.tsx:266
- The footer currently renders a raw
|text node inside aflexcontainer, sogap-*won’t apply to it (only to element children). Also, the date format string contains a hardcoded English word ("PP 'at' p"), which won’t localize for non-English locales. Wrap the separator in an element and avoid the hardcoded "at" in the formatted string.
footer={
<div className="mt-2 text-xs print:text-[10px] text-gray-900 text-center flex gap-2 justify-center">
<span>{t("computer_generated_prescription")}</span>|
<span>{format(new Date(), "PP 'at' p")}</span>
</div>
}
src/components/Prescription/PrescriptionPreview.tsx:66
- The
[and]are on their own lines around thex_of_ylabel, which can introduce unintended whitespace in the rendered output (e.g., "[ 1 of 2 ]") depending on how React collapses the text nodes. Keeping the bracketed counter as a single text node avoids formatting differences in print.
<span className="text-sm print:text-xs text-gray-700 font-medium">
[
{t("x_of_y", {
current: prescriptionIndex + 1,
total: totalCount,
src/components/Prescription/PrescriptionPreview.tsx:339
- PR description mentions “smaller QR sizing”, but this change increases the QR size from 70 to 85. Either update the description (if the larger QR is intentional) or adjust the size here to match the intended output.
<QRCodeSVG
value={patient.id}
size={85}
level="Q"
Contributor
Author
this is the issue, naming the key as hash_tag
|
Contributor
Author
|
@amjithtitus09 fix via d6a0290 |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 11 out of 11 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (3)
src/components/Prescription/PrescriptionPreview.tsx:265
- The footer date format includes a hardcoded English word (
'at') inside the date-fns format string, which bypasses i18n and will always render in English. Prefer either removing it or composing the string with translated pieces.
footer={
<div className="mt-2 text-xs print:text-[10px] text-gray-900 text-center flex gap-2 justify-center">
<span>{t("computer_generated_prescription")}</span>|
<span>{format(new Date(), "PP 'at' p")}</span>
</div>
src/components/Medicine/utils.ts:10
Decimalis only used as a TypeScript type in this file. Import it as a type-only import to avoid pulling a runtime dependency into the bundle from this module.
import Decimal from "decimal.js";
src/components/Common/PrintTable.tsx:121
- For
_fullspanrows,colSpan={headers.length - skippedCount}assumes that all row-spanned (skipped) columns are a leftmost prefix. If a rowspan exists in a non-leading column, subtracting the total skipped count will place the spanning cell in the wrong grid position and can break table layout. Consider only allowing prefix-skipped columns for_fullspan, and fall back to a safe layout otherwise.
if (row["_fullspan"]) {
const skippedCount = headers.filter(({ key }) =>
skipCells[key]?.has(index),
).length;
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
amjithtitus09
approved these changes
Jul 29, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 11 out of 11 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (1)
src/components/Medicine/utils.ts:10
Decimalis only used in a type position (roundDosageparameter union). Importing it as a value can unnecessarily keep a runtime import (depending on TS/esbuild settings). Prefer a type-only import here.
import Decimal from "decimal.js";
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 11 out of 11 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (2)
src/components/Medicine/utils.ts:10
Decimalis only used as a type (in theroundDosagesignature). Importing it as a value can introduce an unnecessary runtime dependency/side effects and may prevent the import from being tree-shaken. Prefer a type-only import here.
import Decimal from "decimal.js";
src/components/Prescription/PrescriptionPreview.tsx:339
- PR description (and CodeRabbit summary) mentions smaller QR sizing, but this change increases the QR code size from 70 to 85. Please confirm the intended QR size for the print layout and adjust either the code or the PR description accordingly.
<QRCodeSVG
value={patient.id}
size={85}
level="Q"
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposed Changes
Fixes ENG-790
Tagging: @ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Improvements
Localization
Tests