Referral letter preview desktop

[modamaan]

Proposed Changes

Referral letter preview desktop and responsive

• Fixes Fix: referral letter responsiveness #8884

Before

After

@ohcnetwork/care-fe-code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

Summary by CodeRabbit

Release Notes

• New Features

  • Enhanced print functionality for referral letters with improved layout and visual appeal.
  • Introduced a new UI card system, including components for headers, titles, descriptions, content, and footers.

• Improvements

  • QR code rendering updated for better presentation using QRCodeSVG.
  • Patient information now displayed in a structured grid layout.

• User Interface

  • Minor adjustments to print mode toggle and button layout for improved usability.

[netlify]

✅ Deploy Preview for care-ohc ready!

Name	Link
🔨 Latest commit	c28d09d
🔍 Latest deploy log	https://app.netlify.com/sites/care-ohc/deploys/674f23d722fb9b0008e140a6
😎 Deploy Preview	https://deploy-preview-8954--care-ohc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[modamaan]

@bodhish should i update anything?

[modamaan]

[modamaan]

@rithviknishad can you check

[nihal467]

@modamaan

• the close and print buttons in the mobile responsive view is not properly aligned

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)

src/components/Shifting/ShiftDetails.tsx (1)

299-303: Consider responsive QR code sizing

The QR code has a fixed size of 120px which might not scale well on smaller screens.

Consider making the QR code size responsive:

-size={120}
+size={window.innerWidth < 640 ? 80 : 120}
+className="mt-4 sm:mt-0 max-w-full"

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 890161a and f04a1e8.

📒 Files selected for processing (1)

• src/components/Shifting/ShiftDetails.tsx (3 hunks)

🧰 Additional context used

📓 Learnings (1)

src/components/Shifting/ShiftDetails.tsx (1)

Learnt from: modamaan
PR: ohcnetwork/care_fe#8954
File: src/components/Shifting/ShiftDetails.tsx:432-433
Timestamp: 2024-11-12T10:23:10.322Z
Learning: In `src/components/Shifting/ShiftDetails.tsx`, the `print` button is inside the `PrintPreview` component and the `close` button is outside, so aligning them with flexbox within the same container isn't feasible.

🔇 Additional comments (4)

src/components/Shifting/ShiftDetails.tsx (4)

10-12: LGTM! Clean import additions

The new imports for PrintPreview and Card components are properly organized and correctly sourced from their respective paths.

---

279-437: Well-structured print preview implementation

The print preview implementation is well-organized with:

• Semantic HTML structure using Card components
• Consistent use of translation functions
• Clear visual hierarchy
• Proper spacing and typography

---

448-448: LGTM! Clean print mode implementation

The print mode toggle is implemented correctly with proper conditional rendering.

---

372-374: ⚠️ Potential issue

Add null check for consultation date

The date formatting could throw an error if the consultation object is undefined.

Apply this diff to add a null check:

-{formatDateTime(
-  consultation.encounter_date || consultation.created_date,
-) || "-"}
+{consultation
+  ? formatDateTime(
+      consultation.encounter_date || consultation.created_date
+    )
+  : "-"}

Likely invalid or redundant comment.

[rithviknishad]

We do not have a shadow with border in other print previews used in care. Let's keep the design consistent with other usages too.

Existing Prescriptions Print	Referral Letter Print

[modamaan]

@rithviknishad what change should I make, please ?

[github-actions]

@modamaan Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌