Treatment Summary UI #10447
Treatment Summary UI #10447
Conversation
…encounter-overview-design
…encounter-overview-design
…encounter-overview-design
…encounter-overview-design
…encounter-overview-design
…encounter-overview-design
…encounter-overview-design
…work/care_fe into encounter-overview-design
…work/care_fe into treatment-summary-ui
…work/care_fe into treatment-summary-ui
…treatment-summary-ui
…treatment-summary-ui
…ub.com/ohcnetwork/care_fe into treatment-summary-ui
![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
🧹 Nitpick comments (2)
src/components/Facility/ConsultationDetails/QuickAccess.tsx (1)
48-49: Consider using CARE UI's standard heading component.The heading styles could be standardized using CARE UI's heading component if available, to maintain consistency across the application.
-<h3 className="text-lg font-medium text-gray-950 mb-1"> +<Heading level={3} className="mb-1"> {t("departments_and_teams")} +</Heading>src/Utils/request/query.ts (1)
150-187: Consider implementing memory management for large result sets.For large datasets, consider implementing memory management strategies:
- Stream results instead of accumulating them in memory
- Implement windowing or virtual scrolling in the UI
- Add a warning when result set size exceeds a threshold
Here's an example implementation with memory management:
const paginatedQuery = < Route extends ApiRoute<PaginatedResponse<unknown>, unknown>, >( route: Route, options?: ApiCallOptions<Route> & { pageSize?: number; maxPages?: number; + maxResults?: number; + onProgress?: (progress: { loaded: number; total: number }) => void; }, ) => { return async ({ signal }: { signal: AbortSignal }) => { const items: Route["TRes"]["results"] = []; let hasNextPage = true; let page = 0; let count = 0; const pageSize = options?.pageSize ?? RESULTS_PER_PAGE_LIMIT; + const maxResults = options?.maxResults ?? 1000; while (hasNextPage) { const res = await query(route, { ...options, queryParams: { limit: pageSize, offset: page * pageSize, ...options?.queryParams, }, })({ signal }); count = res.count; items.push(...res.results); + options?.onProgress?.({ + loaded: items.length, + total: count, + }); + + if (items.length >= maxResults) { + console.warn( + `Results truncated to ${maxResults} items to prevent memory issues`, + ); + hasNextPage = false; + } if (options?.maxPages && page >= options.maxPages - 1) { hasNextPage = false; } if (items.length >= res.count) { hasNextPage = false; } page++; } return { count, results: items, }; }; };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
public/locale/en.json(6 hunks)src/Utils/request/query.ts(2 hunks)src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx(3 hunks)src/components/Facility/ConsultationDetails/QuickAccess.tsx(1 hunks)src/components/Patient/PatientInfoCard.tsx(1 hunks)src/pages/Encounters/tabs/EncounterUpdatesTab.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/Patient/PatientInfoCard.tsx
- src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Test
- GitHub Check: cypress-run (1)
- GitHub Check: OSSAR-Scan
- GitHub Check: OSSAR-Scan
- GitHub Check: Cloudflare Pages: care-fe
🔇 Additional comments (8)
src/pages/Encounters/tabs/EncounterUpdatesTab.tsx (2)
17-17: LGTM! Mobile-first layout improvement.The flex direction change improves mobile UX by showing the overview section first, while maintaining the side-by-side layout on larger screens.
58-58: LGTM! Optimized layout proportions.Reducing the width of the side overview gives more space to the main content area, which should improve readability and content display.
src/components/Facility/ConsultationDetails/QuickAccess.tsx (1)
15-17: Well-structured component with proper TypeScript and i18n implementation!The component follows best practices with:
- Clear TypeScript interface for props
- Proper use of i18n translations
- Clean functional component implementation
Also applies to: 19-21
public/locale/en.json (2)
336-337: Translation keys added for treatment summary feature.The new translation keys follow consistent naming patterns and provide necessary labels for the treatment summary UI.
Also applies to: 697-698, 917-918, 974-975, 1295-1296
1-2342: Well-organized translation file!The translation file maintains good practices:
- Alphabetically ordered keys for easy lookup
- Consistent snake_case naming
- Clear, descriptive translation values
src/Utils/request/query.ts (3)
3-11: LGTM!The new imports are well-organized and properly support the paginated query functionality.
124-143: LGTM!The documentation is comprehensive and includes clear examples of usage.
144-149: LGTM!The type safety is well-implemented with proper TypeScript generics and constraints.
| return async ({ signal }: { signal: AbortSignal }) => { | ||
| const items: Route["TRes"]["results"] = []; | ||
| let hasNextPage = true; | ||
| let page = 0; | ||
| let count = 0; | ||
|
|
||
| const pageSize = options?.pageSize ?? RESULTS_PER_PAGE_LIMIT; | ||
|
|
||
| while (hasNextPage) { | ||
| const res = await query(route, { | ||
| ...options, | ||
| queryParams: { | ||
| limit: pageSize, | ||
| offset: page * pageSize, | ||
| ...options?.queryParams, | ||
| }, | ||
| })({ signal }); | ||
|
|
||
| count = res.count; | ||
| items.push(...res.results); | ||
|
|
||
| if (options?.maxPages && page >= options.maxPages - 1) { | ||
| hasNextPage = false; | ||
| } | ||
|
|
||
| if (items.length >= res.count) { | ||
| hasNextPage = false; | ||
| } | ||
|
|
||
| page++; | ||
| } | ||
|
|
||
| return { | ||
| count, | ||
| results: items, | ||
| }; | ||
| }; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling and timeout mechanism.
The implementation should handle failed page requests and implement a timeout mechanism for long-running pagination operations.
Consider implementing these improvements:
const paginatedQuery = <
Route extends ApiRoute<PaginatedResponse<unknown>, unknown>,
>(
route: Route,
- options?: ApiCallOptions<Route> & { pageSize?: number; maxPages?: number },
+ options?: ApiCallOptions<Route> & {
+ pageSize?: number;
+ maxPages?: number;
+ timeoutMs?: number;
+ },
) => {
return async ({ signal }: { signal: AbortSignal }) => {
+ const timeoutId = options?.timeoutMs
+ ? setTimeout(() => signal.abort(), options.timeoutMs)
+ : null;
+
const items: Route["TRes"]["results"] = [];
let hasNextPage = true;
let page = 0;
let count = 0;
const pageSize = options?.pageSize ?? RESULTS_PER_PAGE_LIMIT;
- while (hasNextPage) {
- const res = await query(route, {
- ...options,
- queryParams: {
- limit: pageSize,
- offset: page * pageSize,
- ...options?.queryParams,
- },
- })({ signal });
+ try {
+ while (hasNextPage) {
+ try {
+ const res = await query(route, {
+ ...options,
+ queryParams: {
+ limit: pageSize,
+ offset: page * pageSize,
+ ...options?.queryParams,
+ },
+ })({ signal });
count = res.count;
items.push(...res.results);
if (options?.maxPages && page >= options.maxPages - 1) {
hasNextPage = false;
}
if (items.length >= res.count) {
hasNextPage = false;
}
page++;
+ } catch (error) {
+ if (error instanceof HTTPError) {
+ throw error;
+ }
+ // Retry the current page once before giving up
+ await sleep(1000);
+ continue;
+ }
+ }
+ } finally {
+ if (timeoutId !== null) {
+ clearTimeout(timeoutId);
+ }
+ }
return {
count,
results: items,
};
};
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return async ({ signal }: { signal: AbortSignal }) => { | |
| const items: Route["TRes"]["results"] = []; | |
| let hasNextPage = true; | |
| let page = 0; | |
| let count = 0; | |
| const pageSize = options?.pageSize ?? RESULTS_PER_PAGE_LIMIT; | |
| while (hasNextPage) { | |
| const res = await query(route, { | |
| ...options, | |
| queryParams: { | |
| limit: pageSize, | |
| offset: page * pageSize, | |
| ...options?.queryParams, | |
| }, | |
| })({ signal }); | |
| count = res.count; | |
| items.push(...res.results); | |
| if (options?.maxPages && page >= options.maxPages - 1) { | |
| hasNextPage = false; | |
| } | |
| if (items.length >= res.count) { | |
| hasNextPage = false; | |
| } | |
| page++; | |
| } | |
| return { | |
| count, | |
| results: items, | |
| }; | |
| }; | |
| }; | |
| const paginatedQuery = < | |
| Route extends ApiRoute<PaginatedResponse<unknown>, unknown>, | |
| >( | |
| route: Route, | |
| options?: ApiCallOptions<Route> & { | |
| pageSize?: number; | |
| maxPages?: number; | |
| timeoutMs?: number; | |
| }, | |
| ) => { | |
| return async ({ signal }: { signal: AbortSignal }) => { | |
| const timeoutId = options?.timeoutMs | |
| ? setTimeout(() => signal.abort(), options.timeoutMs) | |
| : null; | |
| const items: Route["TRes"]["results"] = []; | |
| let hasNextPage = true; | |
| let page = 0; | |
| let count = 0; | |
| const pageSize = options?.pageSize ?? RESULTS_PER_PAGE_LIMIT; | |
| try { | |
| while (hasNextPage) { | |
| try { | |
| const res = await query(route, { | |
| ...options, | |
| queryParams: { | |
| limit: pageSize, | |
| offset: page * pageSize, | |
| ...options?.queryParams, | |
| }, | |
| })({ signal }); | |
| count = res.count; | |
| items.push(...res.results); | |
| if (options?.maxPages && page >= options.maxPages - 1) { | |
| hasNextPage = false; | |
| } | |
| if (items.length >= res.count) { | |
| hasNextPage = false; | |
| } | |
| page++; | |
| } catch (error) { | |
| if (error instanceof HTTPError) { | |
| throw error; | |
| } | |
| // Retry the current page once before giving up | |
| await sleep(1000); | |
| continue; | |
| } | |
| } | |
| } finally { | |
| if (timeoutId !== null) { | |
| clearTimeout(timeoutId); | |
| } | |
| } | |
| return { | |
| count, | |
| results: items, | |
| }; | |
| }; | |
| }; |
|
Conflicts have been detected against the base branch. Please merge the base branch into your branch.
|
…treatment-summary-ui
…treatment-summary-ui
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
public/locale/en.json(5 hunks)src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx(3 hunks)src/components/Medicine/MedicationsTable.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (3)
src/components/Medicine/MedicationsTable.tsx (2)
56-62: Loading state implementation looks good.The skeleton placeholder provides good visual feedback during loading. This addresses the previous review comment about loading state.
38-41: Props interface is well defined.The component props are properly typed with string types for patientId and encounterId.
public/locale/en.json (1)
336-336: New localization keys are well structured.The added keys follow consistent naming patterns and provide clear translations:
- "admission_source": "Admission Source"
- "department": "Department"
- "encounter_type": "Encounter Type"
- "medications": "Medications"
Also applies to: 702-702, 924-924, 1306-1306
| @@ -60,7 +73,7 @@ export const MedicationsTable = ({ medications }: MedicationsTableProps) => { | |||
| </TableRow> | |||
| </TableHeader> | |||
| <TableBody> | |||
| {medications.map((medication) => { | |||
| {medications?.results.map((medication) => { | |||
There was a problem hiding this comment.
Add null check for medications data.
The medications data access needs a null check to prevent runtime errors when data is undefined.
- {medications?.results.map((medication) => {
+ {medications?.results?.map((medication) => {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {medications?.results.map((medication) => { | |
| {medications?.results?.map((medication) => { |
| const { data: medications, isLoading } = useQuery({ | ||
| queryKey: ["medication_requests", patientId, encounterId], | ||
| queryFn: query(medicationRequestApi.list, { | ||
| pathParams: { patientId }, | ||
| queryParams: { encounter: encounterId, limit: 50, offset: 0 }, | ||
| }), | ||
| }); |
There was a problem hiding this comment.
Add error handling for the query.
The query implementation is missing error handling. Users should be informed when medication data fails to load.
- const { data: medications, isLoading } = useQuery({
+ const { data: medications, isLoading, error } = useQuery({
queryKey: ["medication_requests", patientId, encounterId],
queryFn: query(medicationRequestApi.list, {
pathParams: { patientId },
queryParams: { encounter: encounterId, limit: 50, offset: 0 },
}),
});
+ if (error) {
+ return (
+ <div className="flex h-[200px] items-center justify-center rounded-lg border-2 border-dashed p-4 text-gray-500">
+ Failed to load medications. Please try again.
+ </div>
+ );
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { data: medications, isLoading } = useQuery({ | |
| queryKey: ["medication_requests", patientId, encounterId], | |
| queryFn: query(medicationRequestApi.list, { | |
| pathParams: { patientId }, | |
| queryParams: { encounter: encounterId, limit: 50, offset: 0 }, | |
| }), | |
| }); | |
| const { data: medications, isLoading, error } = useQuery({ | |
| queryKey: ["medication_requests", patientId, encounterId], | |
| queryFn: query(medicationRequestApi.list, { | |
| pathParams: { patientId }, | |
| queryParams: { encounter: encounterId, limit: 50, offset: 0 }, | |
| }), | |
| }); | |
| if (error) { | |
| return ( | |
| <div className="flex h-[200px] items-center justify-center rounded-lg border-2 border-dashed p-4 text-gray-500"> | |
| Failed to load medications. Please try again. | |
| </div> | |
| ); | |
| } |
Co-authored-by: Rithvik Nishad <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/components/Patient/TreatmentSummary.tsx (3)
72-187: Extract repetitive grid layout into a reusable component.The patient details section contains repetitive grid layouts that could be extracted into a reusable component to improve maintainability and reduce code duplication.
+interface DetailRowProps { + label: string; + value: string | null | undefined; + show?: boolean; +} + +const DetailRow = ({ label, value, show = true }: DetailRowProps) => { + if (!show) return null; + return ( + <div className="grid grid-cols-[8rem,0.25rem,1fr] items-center"> + <span className="text-gray-600">{label}</span> + <span className="text-gray-600">:</span> + <span className="font-semibold">{value}</span> + </div> + ); +}; <div className="grid grid-cols-2 gap-x-12 gap-y-6"> <div className="space-y-3"> - <div className="grid grid-cols-[8rem,0.25rem,1fr] items-center"> - <span className="text-gray-600">{t("patient")}</span> - <span className="text-gray-600">:</span> - <span className="font-semibold">{encounter.patient.name}</span> - </div> + <DetailRow label={t("patient")} value={encounter.patient.name} /> {/* Apply similar changes to other rows */} </div> </div>
190-224: Add loading states for medical information sections.The medical information sections could benefit from loading states to improve user experience while data is being fetched.
<div className="space-y-6"> + {/* Allergies */} + <Suspense fallback={<LoadingSpinner />}> <AllergyList patientId={encounter.patient.id} encounterId={encounterId} className="border-none shadow-none" isPrintPreview={true} /> + </Suspense> {/* Apply similar changes to other medical information sections */} </div>
246-250: Enhance footer with additional metadata.Consider adding more metadata to the footer such as document version, page numbers for printing, or facility contact information.
<div className="mt-8 space-y-1 pt-2 text-[10px] text-gray-500 flex justify-between"> <p> {t("generated_on")} {format(new Date(), "PPP 'at' p")} </p> + <p> + {t("page")} 1 / 1 + </p> + <p> + {encounter.facility?.contact_number} + </p> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Patient/TreatmentSummary.tsx(1 hunks)
🧰 Additional context used
🪛 ESLint
src/components/Patient/TreatmentSummary.tsx
[error] 17-17: 'Encounter' is defined but never used. Allowed unused vars must match /^_/u.
(@typescript-eslint/no-unused-vars)
🪛 GitHub Check: cypress-run (1)
src/components/Patient/TreatmentSummary.tsx
[failure] 17-17:
'Encounter' is defined but never used. Allowed unused vars must match /^_/u
🪛 GitHub Check: lint
src/components/Patient/TreatmentSummary.tsx
[failure] 17-17:
'Encounter' is defined but never used. Allowed unused vars must match /^_/u
🪛 GitHub Actions: Lint Code Base
src/components/Patient/TreatmentSummary.tsx
[error] 17-17: 'Encounter' is defined but never used. Allowed unused vars must match /^_/u @typescript-eslint/no-unused-vars
🪛 GitHub Actions: Cypress Tests
src/components/Patient/TreatmentSummary.tsx
[error] 17-17: 'Encounter' is defined but never used. Allowed unused vars must match /^_/u @typescript-eslint/no-unused-vars
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: OSSAR-Scan
🔇 Additional comments (2)
src/components/Patient/TreatmentSummary.tsx (2)
17-17: Ignore unused import warning.The
Encounterimport is correctly used as a type annotation in theuseQueryhook. The static analysis warning can be safely ignored as it's a false positive due to TypeScript type erasure during compilation.🧰 Tools
🪛 ESLint
[error] 17-17: 'Encounter' is defined but never used. Allowed unused vars must match /^_/u.
(@typescript-eslint/no-unused-vars)
🪛 GitHub Check: cypress-run (1)
[failure] 17-17:
'Encounter' is defined but never used. Allowed unused vars must match /^_/u🪛 GitHub Check: lint
[failure] 17-17:
'Encounter' is defined but never used. Allowed unused vars must match /^_/u🪛 GitHub Actions: Lint Code Base
[error] 17-17: 'Encounter' is defined but never used. Allowed unused vars must match /^_/u @typescript-eslint/no-unused-vars
🪛 GitHub Actions: Cypress Tests
[error] 17-17: 'Encounter' is defined but never used. Allowed unused vars must match /^_/u @typescript-eslint/no-unused-vars
30-36: Add error handling for encounter query.The query lacks error handling, which could lead to silent failures.
const { data: encounter } = useQuery({ + onError: (error) => { + console.error("Failed to fetch encounter:", error); + // Consider showing an error toast or inline error message + }, queryKey: ["encounter", encounterId], queryFn: query(api.encounter.get, {
|
Conflicts have been detected against the base branch. Please merge the base branch into your branch.
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/Patient/TreatmentSummary.tsx (1)
71-186: Extract repeated grid structure into a reusable component.The grid structure for detail rows is duplicated multiple times. Consider extracting it into a reusable component to improve maintainability and reduce code duplication.
+interface DetailRowProps { + label: string; + value?: string | null; +} + +const DetailRow = ({ label, value }: DetailRowProps) => ( + <div className="grid grid-cols-[8rem,0.25rem,1fr] items-center"> + <span className="text-gray-600">{label}</span> + <span className="text-gray-600">:</span> + <span className="font-semibold">{value}</span> + </div> +); <div className="grid grid-cols-2 gap-x-12 gap-y-6"> <div className="space-y-3"> - <div className="grid grid-cols-[8rem,0.25rem,1fr] items-center"> - <span className="text-gray-600">{t("patient")}</span> - <span className="text-gray-600">:</span> - <span className="font-semibold">{encounter.patient.name}</span> - </div> + <DetailRow label={t("patient")} value={encounter.patient.name} /> {/* Apply similar changes to other detail rows */} </div> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Patient/TreatmentSummary.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - care-ohc
- GitHub Check: Header rules - care-ohc
- GitHub Check: Pages changed - care-ohc
🔇 Additional comments (3)
src/components/Patient/TreatmentSummary.tsx (3)
1-24: LGTM! Well-organized imports and clear type definitions.The imports are logically grouped, and the props interface is properly typed.
29-35: Add error handling for encounter query.The encounter query lacks error handling, which could lead to silent failures.
46-252: Well-structured print-friendly layout!The layout is well-organized with clear sections and consistent use of print preview mode across components. The spacing and typography choices are appropriate for printing.
| if (!encounter) { | ||
| return ( | ||
| <div className="flex h-[200px] items-center justify-center rounded-lg border-2 border-dashed p-4 text-gray-500"> | ||
| {t("no_patient_record_found")} | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add loading state handling.
The component should handle the loading state to prevent layout shifts and provide feedback to users.
+ const { data: encounter, isLoading } = useQuery({
queryKey: ["encounter", encounterId],
queryFn: query(api.encounter.get, {
pathParams: { id: encounterId },
queryParams: { facility: facilityId },
}),
});
+ if (isLoading) {
+ return (
+ <div className="flex h-[200px] items-center justify-center rounded-lg border-2 border-dashed p-4 text-gray-500">
+ {t("loading")}
+ </div>
+ );
+ }
if (!encounter) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (!encounter) { | |
| return ( | |
| <div className="flex h-[200px] items-center justify-center rounded-lg border-2 border-dashed p-4 text-gray-500"> | |
| {t("no_patient_record_found")} | |
| </div> | |
| ); | |
| } | |
| const { data: encounter, isLoading } = useQuery({ | |
| queryKey: ["encounter", encounterId], | |
| queryFn: query(api.encounter.get, { | |
| pathParams: { id: encounterId }, | |
| queryParams: { facility: facilityId }, | |
| }), | |
| }); | |
| if (isLoading) { | |
| return ( | |
| <div className="flex h-[200px] items-center justify-center rounded-lg border-2 border-dashed p-4 text-gray-500"> | |
| {t("loading")} | |
| </div> | |
| ); | |
| } | |
| if (!encounter) { | |
| return ( | |
| <div className="flex h-[200px] items-center justify-center rounded-lg border-2 border-dashed p-4 text-gray-500"> | |
| {t("no_patient_record_found")} | |
| </div> | |
| ); | |
| } |
…treatment-summary-ui
|
@amjithtitus09 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! 🙌 |
Another issue will be made to simplify and remove as much colours as possible to reduce unnecessary ink usage while printing. Issue - #10480
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Improvements