Treatment Summary UI Enhancement #10563
Conversation
WalkthroughThe changes update the visual styling in several patient components, focusing on the handling of the Changes
Possibly related PRs
Suggested labels
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
src/components/Patient/MedicationStatementList.tsx (1)
179-179: 🛠️ Refactor suggestionRemove inconsistent border styling.
The Card component still has
border-nonewhich conflicts with the parent component's border styling in TreatmentSummary.- <Card className={cn("border-none rounded-sm", className)}> + <Card className={cn("rounded-sm", className)}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/components/Patient/MedicationStatementList.tsx(2 hunks)src/components/Patient/TreatmentSummary.tsx(3 hunks)src/components/Patient/allergy/list.tsx(3 hunks)src/components/Patient/diagnosis/list.tsx(3 hunks)src/components/Patient/symptoms/list.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (5)
src/components/Patient/TreatmentSummary.tsx (1)
194-230: LGTM! Consistent border styling across components.The border styling changes are consistent across all components (AllergyList, SymptomsList, DiagnosisList, MedicationStatementList), improving the visual consistency of the treatment summary.
src/components/Patient/diagnosis/list.tsx (1)
142-142: LGTM! Consistent Card styling.The Card styling changes align with other components, maintaining visual consistency.
src/components/Patient/symptoms/list.tsx (1)
140-140: LGTM! Consistent Card styling.The Card styling changes align with other components, maintaining visual consistency.
src/components/Patient/allergy/list.tsx (2)
98-98: LGTM! Consistent className prop forwarding.The
classNameprop is now consistently forwarded toAllergyListLayoutacross all rendering paths (loading, empty, and main states), improving the component's styling flexibility.Also applies to: 122-122
310-310: LGTM! Enhanced Card styling with proper className composition.The styling changes:
- Add consistent padding with
p-2- Apply subtle border radius with
rounded-sm- Maintain className extensibility through proper composition with the
cn()utility
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
|
Don't need colors for the badges here: 
Modify the filteredMedications length check to display no medications recorded, and the table row styling as well when there's data: 
cc: @amjithtitus09 |
Is this done @AdityaJ2305 ? |
|
@amjithtitus09 
LMK your thoughts |
|
@amjithtitus09 Done with the changes . Ready for review 🙂 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/components/Patient/diagnosis/DiagnosisTable.tsx (1)
74-104: Consider extracting the badge styling logic.The badge styling logic is duplicated across multiple badges. Consider extracting it into a reusable helper function or component.
+const getBadgeClassName = (isPrintPreview: boolean, styles: string) => + isPrintPreview ? "" : `whitespace-nowrap ${styles}`; <Badge variant="outline" - className={ - isPrintPreview - ? "" - : `whitespace-nowrap ${ - DIAGNOSIS_CLINICAL_STATUS_STYLES[ - diagnosis.clinical_status - ] - }` - } + className={getBadgeClassName( + isPrintPreview, + DIAGNOSIS_CLINICAL_STATUS_STYLES[diagnosis.clinical_status] + )} >src/components/Patient/symptoms/SymptomTable.tsx (1)
75-87: Consider sharing badge styling logic between components.The badge styling implementation is identical to DiagnosisTable.tsx. Consider:
- Creating a shared helper function for badge styling
- Creating a shared styled badge component
This would improve maintainability and ensure consistent behavior across components.
// src/components/Common/PrintAwareBadge.tsx interface PrintAwareBadgeProps { isPrintPreview?: boolean; styles: string; children: React.ReactNode; } export function PrintAwareBadge({ isPrintPreview = false, styles, children, ...props }: PrintAwareBadgeProps) { return ( <Badge variant="outline" className={isPrintPreview ? "" : `whitespace-nowrap ${styles}`} {...props} > {children} </Badge> ); }Usage:
-<Badge - variant="outline" - className={ - isPrintPreview - ? "" - : `whitespace-nowrap ${ - SYMPTOM_SEVERITY_STYLES[symptom.severity] - }` - } -> +<PrintAwareBadge + isPrintPreview={isPrintPreview} + styles={SYMPTOM_SEVERITY_STYLES[symptom.severity]} +> {t(symptom.severity)} -</Badge> +</PrintAwareBadge>Also applies to: 89-101, 103-117
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/components/Patient/MedicationStatementList.tsx(2 hunks)src/components/Patient/allergy/list.tsx(4 hunks)src/components/Patient/diagnosis/DiagnosisTable.tsx(1 hunks)src/components/Patient/diagnosis/list.tsx(3 hunks)src/components/Patient/symptoms/SymptomTable.tsx(1 hunks)src/components/Patient/symptoms/list.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/components/Patient/diagnosis/list.tsx
- src/components/Patient/MedicationStatementList.tsx
- src/components/Patient/symptoms/list.tsx
- src/components/Patient/allergy/list.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: cypress-run (1)
- GitHub Check: OSSAR-Scan
🔇 Additional comments (3)
src/components/Patient/diagnosis/DiagnosisTable.tsx (2)
74-88: LGTM! Clinical status badge styling implementation.The conditional styling based on
isPrintPreviewaligns with the PR objectives and reviewer feedback about badge colors.
90-104: LGTM! Verification status badge styling implementation.The conditional styling based on
isPrintPreviewaligns with the PR objectives and reviewer feedback about badge colors.src/components/Patient/symptoms/SymptomTable.tsx (1)
75-117: Verify badge styling behavior in print preview.The changes align with the PR objectives and reviewer feedback. However, let's verify the print preview appearance matches the expected design.
✅ Verification successful
🌐 Web query:
What is the recommended way to test print preview in React applications?💡 Result:
To test print preview functionality in React applications effectively, developers should combine specific testing strategies and leverage the react-to-print library's features. Here's a structured approach:
1. Component Inspection with React Testing Library
- Use screen.debug() to inspect rendered components:
test('verify printable content', () => { render(<PrintableComponent />); screen.debug(undefined, Infinity); // Shows full component structure[10] });- This exposes hidden elements wrapped in
<div style={{ display: "none" }}>that are only visible during printing[3][6].2. State Synchronization Testing
- Test asynchronous state handling required for printing:
test('state updates before printing', async () => { const { getByText } = render(<PrintButton />); fireEvent.click(getByText('Print')); await waitFor(() => expect(screen.getByTestId('print-content')).toBeVisible()); });- Ensures components properly use Promises to wait for DOM updates[2][3][7].
3. Print Iframe Preservation
- Enable preserveAfterPrint flag during testing:
<ReactToPrint preserveAfterPrint={true} content={() => componentRef.current} />- Allows post-print inspection of generated iframe content[7].
4. CSS Media Query Verification
Test print-specific styles using:
@media print { .no-print { display: none; } }Validate styles with tools like:
expect(getComputedStyle(element).display).toBe('none');5. Browser Print Dialog Mocking
Mock window.print() in tests:
const printMock = jest.spyOn(window, 'print').mockImplementation(); // ... test execution ... expect(printMock).toHaveBeenCalled();Key Considerations
Aspect Implementation Source Hidden Components Use display: nonewrapper[3][7] Async State Promise resolution in onBeforePrint[2][3][7] Style Isolation Dedicated @media print CSS [1][4] Debugging preserveAfterPrint + screen.debug [7][10] For comprehensive testing, combine visual inspection of preserved print iframes with state/behavior assertions to ensure all printable elements render correctly while non-essential UI remains hidden[1][3][7].
Citations:
- 1: https://blog.bytescrum.com/mastering-react-print-a-comprehensive-guide
- 2: https://buaiscia.github.io/blog/tips/printing-developer-journey-react-to-print
- 3: https://github.com/MatthewHerbst/react-to-print
- 4: https://www.dhiwise.com/post/boosting-efficiency-optimizing-your-react-to-print-workflow
- 5: https://dev.to/ebereplenty/printing-in-react-made-easy-with-react-to-print-4b3k
- 6: https://www.browserstack.com/guide/react-testing-library-debug-method
- 7: https://www.npmjs.com/package/react-to-print
- 8: https://blog.logrocket.com/using-react-to-print-generate-printable-document/
- 9: https://supportcenter.devexpress.com/ticket/details/t1052262/react-print-report-without-preview-doesn-t-work
- 10: https://javascript.plainenglish.io/how-to-print-the-entire-component-using-screen-debug-in-react-testing-library-330db38d3e78?gi=cf5c55e36588
Print Preview Badge Styling: Behavior Verified
- The conditional logic using
isPrintPreviewcorrectly bypasses the addition of extra style classes in print preview mode.- The code omits badge-specific styling when printing, which is in line with the expected design.
- Recommended testing approaches (e.g., with React Testing Library and react-to-print) support verifying that print-specific rendering omits non-print styles.
|
In the right direction but few more changes needed here. There is still bg colour, and coloured labels. Also border needs to be consistent for all tables. Check if there's shadow for the questionnaire responses at the bottom. |
amjithtitus09
added
work-in-progress
and removed
question
|
@amjithtitus09n, Let me know ur input I just want to confirm if I’ve understood the requirements correctly:
|
|
@amjithtitus09 (2) This one should also be an option |
@AdityaJ2305 Let's go with this itself. Got @aravindm4's opinion as well |
|
@AdityaJ2305 Round the borders, otherwise looks good |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/Common/PrintTable.tsx (1)
24-64: Consider enhancing error handling and empty states.While the implementation is solid, consider these improvements:
- Add explicit handling for empty rows
- Consider adding aria-label for better screen reader support
- Add prop for custom empty state message
export default function PrintTable({ headers, rows }: GenericTableProps) { return ( - <div className="overflow-hidden rounded-lg border border-gray"> + <div + className="overflow-hidden rounded-lg border border-gray" + aria-label="Print friendly table" + > <Table className="w-full"> <TableHeader> <TableRow className="bg-transparent hover:bg-transparent divide-x divide-gray border-b-gray"> {headers.map(({ key, title }, index) => ( <TableHead className={cn( index == 0 && "first:rounded-l-md", "h-auto py-1 pl-2 pr-2 text-black text-center", )} key={key} > {title} </TableHead> ))} </TableRow> </TableHeader> <TableBody> - {!!rows && + {!!rows?.length ? ( rows.map((row, index) => ( <TableRow key={index} className="bg-transparent hover:bg-transparent divide-x divide-gray" > {headers.map(({ key }) => ( <TableCell className="max-w-[200px] break-words whitespace-normal text-center" key={key} > {row[key] || "-"} </TableCell> ))} </TableRow> ))} + ) : ( + <TableRow> + <TableCell + colSpan={headers.length} + className="text-center text-gray-500" + > + No data available + </TableCell> + </TableRow> + )} </TableBody> </Table> </div> ); }src/components/Patient/allergy/list.tsx (1)
139-142: Consider simplifying table row styling.The table row styling could be simplified while maintaining the requested changes.
-className={cn( - "rounded-md overflow-hidden bg-gray-50", - allergy.verification_status === "entered_in_error" && "opacity-50", -)} +className={cn( + "bg-gray-50", + allergy.verification_status === "entered_in_error" && "opacity-50" +)}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
public/locale/en.json(1 hunks)src/components/Common/PrintTable.tsx(1 hunks)src/components/Patient/TreatmentSummary.tsx(3 hunks)src/components/Patient/allergy/list.tsx(9 hunks)src/components/Patient/symptoms/SymptomTable.tsx(2 hunks)src/components/Patient/symptoms/list.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/components/Patient/symptoms/list.tsx
- src/components/Patient/TreatmentSummary.tsx
- src/components/Patient/symptoms/SymptomTable.tsx
- public/locale/en.json
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (3)
src/components/Common/PrintTable.tsx (1)
12-22: LGTM! Well-structured type definitions.The type definitions are clear and properly typed, with good use of optional properties.
src/components/Patient/allergy/list.tsx (2)
223-241: LGTM! Clean implementation of print preview mode.Good use of the new PrintTable component with well-structured data transformation.
328-334: LGTM! Proper conditional styling for print preview.Good use of the
cnutility for conditional class application based onisPrintPreview.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/Patient/diagnosis/DiagnosisTable.tsx (1)
40-61: Consider extracting table configuration for better maintainability.While the print preview implementation looks good, consider extracting the headers and row transformation logic into separate constants/functions to improve readability and maintainability.
+const DIAGNOSIS_TABLE_HEADERS = [ + { key: "diagnosis", title: t("diagnosis") }, + { key: "status", title: t("status") }, + { key: "verification", title: t("verification") }, + { key: "onset", title: t("onset") }, + { key: "notes", title: t("notes") }, + { key: "logged_by", title: t("logged_by") }, +]; + +const transformDiagnosisToRow = (diagnosis: Diagnosis) => ({ + diagnosis: diagnosis.code.display, + status: t(diagnosis.clinical_status), + verification: t(diagnosis.verification_status), + onset: diagnosis.onset?.onset_datetime + ? new Date(diagnosis.onset.onset_datetime).toLocaleDateString() + : undefined, + notes: diagnosis.note, + logged_by: formatName(diagnosis.created_by), +}); {isPrintPreview ? ( <PrintTable - headers={[ - { key: "diagnosis", title: t("diagnosis") }, - { key: "status", title: t("status") }, - { key: "verification", title: t("verification") }, - { key: "onset", title: t("onset") }, - { key: "notes", title: t("notes") }, - { key: "logged_by", title: t("logged_by") }, - ]} - rows={diagnoses.map((diagnosis) => ({ - diagnosis: diagnosis.code.display, - status: t(diagnosis.clinical_status), - verification: t(diagnosis.verification_status), - onset: diagnosis.onset?.onset_datetime - ? new Date(diagnosis.onset.onset_datetime).toLocaleDateString() - : undefined, - notes: diagnosis.note, - logged_by: formatName(diagnosis.created_by), - }))} + headers={DIAGNOSIS_TABLE_HEADERS} + rows={diagnoses.map(transformDiagnosisToRow)} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/Patient/diagnosis/DiagnosisTable.tsx(2 hunks)src/components/Patient/diagnosis/list.tsx(3 hunks)src/components/Patient/symptoms/list.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/Patient/symptoms/list.tsx
- src/components/Patient/diagnosis/list.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Test
- GitHub Check: cypress-run (1)
🔇 Additional comments (1)
src/components/Patient/diagnosis/DiagnosisTable.tsx (1)
20-22: LGTM! Well-structured imports and interface changes.The addition of
PrintTablecomponent andformatNameutility, along with theisPrintPreviewprop, provides a clean foundation for implementing the print preview functionality.Also applies to: 29-32
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/components/Patient/MedicationStatementList.tsx(7 hunks)src/components/Patient/diagnosis/DiagnosisTable.tsx(3 hunks)src/components/Patient/diagnosis/list.tsx(6 hunks)src/components/Patient/symptoms/SymptomTable.tsx(3 hunks)src/components/Patient/symptoms/list.tsx(6 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/components/Patient/diagnosis/list.tsx
- src/components/Patient/symptoms/SymptomTable.tsx
- src/components/Patient/diagnosis/DiagnosisTable.tsx
- src/components/Patient/MedicationStatementList.tsx
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Redirect rules - care-ohc
- GitHub Check: Header rules - care-ohc
- GitHub Check: Pages changed - care-ohc
- GitHub Check: Test
- GitHub Check: cypress-run (1)
🔇 Additional comments (3)
src/components/Patient/symptoms/list.tsx (3)
14-17: LGTM! Clean import additions.The new imports for
PrintTableandformatNameare properly organized and align with the component's enhanced functionality.
96-115: LGTM! Clean print preview implementation.The
PrintTableimplementation provides a well-structured print-friendly view of symptoms data with appropriate column headers and data formatting.
168-174:❓ Verification inconclusive
Verify complete removal of shadows in print preview mode.
The current implementation removes shadows using
shadow-none, but per amjithtitus09's feedback, please verify that all shadows are removed, including those in questionnaire responses.Run this script to check for any remaining shadow styles:
🏁 Script executed:
#!/bin/bash # Search for shadow-related styles in the component and its dependencies rg -i '(shadow|elevation)' src/components/Patient/symptoms/Length of output: 155
Print Preview Shadow Removal Verification
The search output confirms that the only shadow-related style in the
src/components/Patient/symptoms/list.tsxcomponent is"shadow-none border-none", which correctly removes shadows in print preview mode. However, per amjithtitus09’s feedback, please verify that any components handling questionnaire responses also have all shadows removed in print preview mode.
- Confirm that all relevant questionnaire response components apply similar shadow removal styles.
- Ensure no residual shadow or elevation classes are present in those components.
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/components/Patient/MedicationStatementList.tsx (1)
62-69:⚠️ Potential issueRemove badge color styles as requested.
Based on the PR feedback from Jacobjeevan and amjithtitus09, the badge colors should be removed.
Apply this diff to remove the color styles:
- <Badge - variant="outline" - className={`whitespace-nowrap capitalize ${ - MEDICATION_STATEMENT_STATUS_STYLES[statement.status] - }`} - > + <Badge variant="outline" className="whitespace-nowrap capitalize"> {statement.status} </Badge>
🧹 Nitpick comments (2)
src/components/Patient/MedicationStatementList.tsx (2)
246-260: Consider accessibility improvements for the "View All" button.While the implementation is functional, the button's styling might have accessibility issues:
- Using both
underlineand low contrasttext-gray-500might affect readability- The
xssize might make it difficult to click on mobile devicesConsider this improvement:
- <Button - variant="ghost" - size="xs" - onClick={() => setShowEnteredInError(true)} - className="text-xs underline text-gray-500" - > + <Button + variant="link" + size="sm" + onClick={() => setShowEnteredInError(true)} + className="text-sm text-primary hover:text-primary/80" + > {t("view_all")} </Button>
293-296: Remove unnecessary whitespace in title.There's an unnecessary whitespace character that should be removed.
Apply this diff:
<CardTitle> - {" "} {t("ongoing_medications")} ({medicationsCount && medicationsCount}) </CardTitle>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Patient/MedicationStatementList.tsx(7 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Test
- GitHub Check: cypress-run (1)
- GitHub Check: OSSAR-Scan
🔇 Additional comments (4)
src/components/Patient/MedicationStatementList.tsx (4)
2-2: LGTM! Clean refactoring of imports and props.The removal of
isPrintPreviewfromMedicationRowPropsand the addition of necessary imports align well with the architectural changes to handle print preview at a higher level.Also applies to: 27-27, 43-46
78-96: LGTM! Consistent note display implementation.The Popover implementation for notes provides a consistent user experience across all states.
169-198: LGTM! Clean print view implementation.The
PrintTableimplementation provides a clean, print-friendly view of the medication data.
267-308: LGTM! Clean layout component implementation.The new
MedicationStatementListLayoutcomponent effectively encapsulates the layout logic and print-specific styling.
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
src/components/Medicine/MedicationsTable.tsx (1)
118-157: 🛠️ Refactor suggestionUse shared data transformation function for consistency.
After extracting the shared data transformation logic, update the regular table implementation to use it as well.
- const instruction = medication.dosage_instruction[0]; - const frequency = getFrequencyDisplay(instruction?.timing); - const dosage = formatDosage(instruction); - const duration = instruction?.timing?.repeat?.bounds_duration; - const remarks = formatSig(instruction); - const notes = medication.note; + const { + medicine, + dosage, + frequency, + duration, + instructions, + } = transformMedicationData(medication); const isInactive = INACTIVE_MEDICATION_STATUSES.includes( medication.status as (typeof INACTIVE_MEDICATION_STATUSES)[number], ); return ( <TableRow key={medication.id} className={`divide-x font-medium ${isInactive ? "bg-gray-100" : ""}`} > - <TableCell className="py-2 px-3"> - {medication.medication?.display} - </TableCell> - <TableCell className="py-2 px-3">{dosage}</TableCell> - <TableCell className="py-2 px-3"> - {instruction?.as_needed_boolean - ? `${t("as_needed_prn")} (${instruction?.as_needed_for?.display})` - : frequency?.meaning} - {instruction?.additional_instruction?.[0]?.display && ( - <div className="text-sm text-gray-600"> - {instruction.additional_instruction[0].display} - </div> - )} - </TableCell> - <TableCell className="py-2 px-3"> - {duration ? `${duration.value} ${duration.unit}` : "-"} - </TableCell> - <TableCell className="py-2 px-3"> - {remarks || "-"} - {notes ? ` (${t("note")}: ${notes})` : ""} - </TableCell> + <TableCell className="py-2 px-3">{medicine}</TableCell> + <TableCell className="py-2 px-3">{dosage}</TableCell> + <TableCell className="py-2 px-3">{frequency}</TableCell> + <TableCell className="py-2 px-3">{duration}</TableCell> + <TableCell className="py-2 px-3">{instructions}</TableCell> </TableRow> );
🧹 Nitpick comments (1)
src/components/Medicine/MedicationsTable.tsx (1)
67-73: Enhance empty state styling for better consistency.The empty state implementation aligns with the PR feedback. However, consider matching the styling with the table's border and rounded corners for visual consistency.
- <CardContent className="p-2"> + <CardContent className="border rounded-lg p-4"> <p className="text-gray-500">{t("no_medication_recorded")}</p> </CardContent>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/Medicine/MedicationsTable.tsx(4 hunks)src/components/Patient/TreatmentSummary.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/Patient/TreatmentSummary.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (2)
src/components/Medicine/MedicationsTable.tsx (2)
4-4: LGTM! Interface and imports updated correctly.The changes appropriately introduce the print preview functionality by adding the necessary imports and updating the component interface.
Also applies to: 15-15, 40-44, 46-50
75-105: LGTM! Print preview implementation meets requirements.The print preview implementation correctly handles all necessary data fields and aligns with the PR objectives to enhance the Treatment Summary UI.
|
@amjithtitus09 , Ready for review and testing |
rithviknishad
added
needs testing
needs review
and removed
question
| <CardTitle>{t("medications")}</CardTitle> | ||
| </CardHeader> | ||
| <CardContent className="px-0 py-0"> | ||
| <MedicationsTable |
There was a problem hiding this comment.
Isn't it better to fetch the data and call the PrintTable here directly for all the lists?
Proposed Changes
PrintTablecomp to creat table for print purpose specificMedicationstatementLayout@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Summary by CodeRabbit
New Features
PrintTablecomponent for improved print-friendly displays.MedicationStatementList,AllergyList,DiagnosisList, andSymptomsListcomponents to conditionally render tables based on print preview mode.MedicationsTableto show a message when no medication records are present.TreatmentSummarycomponent to a card-based layout for better visual organization.Style