Care Plan #10231
Care Plan #10231
Conversation
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis pull request introduces a comprehensive implementation of a Care Plan feature in the application. The changes span multiple files, adding localization support, creating a new route, developing a dedicated Care Plan component, introducing a new encounter tab, and defining TypeScript interfaces and dummy data for care plans. The implementation enables users to view, manage, and interact with care plans within the context of patient encounters. Changes
Sequence DiagramsequenceDiagram
participant User
participant EncounterShow
participant EncounterCarePlanTab
participant CarePlanAPI
participant CarePlan
User->>EncounterShow: Navigate to Encounter
EncounterShow->>EncounterCarePlanTab: Load Care Plan Tab
EncounterCarePlanTab->>CarePlanAPI: Fetch Care Plans
CarePlanAPI-->>EncounterCarePlanTab: Return Care Plans
EncounterCarePlanTab->>User: Display Care Plan List
User->>CarePlan: Select Specific Care Plan
CarePlan->>CarePlanAPI: Retrieve Care Plan Details
CarePlanAPI-->>CarePlan: Return Detailed Care Plan
CarePlan->>User: Display Care Plan Details
Possibly related PRs
Suggested Labels
Suggested Reviewers
Poem
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. |
CARE
|
||||||||||||||||||||||||||||||||||
| Project |
CARE
|
| Branch Review |
care-plan
|
| Run status |
|
| Run duration | 04m 15s |
| Commit |
|
| Committer | Shivank Kacker |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
1
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
5
|
| View all changes introduced in this branch ↗︎ | |
Tests for review
cypress/e2e/patient_spec/patient_encounter.cy.ts • 1 failed test
| Test | Artifacts | |
|---|---|---|
| Patient Encounter Questionnaire > Create a new ABG questionnaire and verify the values |
Test Replay
Screenshots
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (6)
src/types/emr/careplan/careplan.ts (2)
19-23: Consider adding JSDoc comments for better documentation.The
Codeinterface appears to represent a FHIR CodeableConcept. Adding JSDoc comments would improve code documentation.+/** + * Represents a FHIR CodeableConcept + * @property code - The code value + * @property display - Human readable display text + * @property system - The coding system (e.g., SNOMED CT, LOINC) + */ interface Code { code: string; display: string; system: string; }
25-37: Consider adding validation for date fields and required fields documentation.The interface could benefit from:
- Date validation to ensure end_date is after start_date
- Documentation for required vs optional fields
+/** + * Represents a Care Plan following FHIR resource structure + * @extends BaseModel + */ export interface CarePlan extends BaseModel { status: (typeof CARE_PLAN_STATUS)[number]; intent: (typeof CARE_PLAN_INTENT)[number]; - title: string; - description: string; - start_date: string; - end_date: string; + /** Required. The title of the care plan */ + title: string; + /** Required. Detailed description of the care plan */ + description: string; + /** Required. ISO 8601 date string for plan start */ + start_date: string; + /** Required. ISO 8601 date string for plan end. Must be after start_date */ + end_date: string; patient: string; encounter: string; custodian: string; addresses: Code[]; notes?: string; }src/pages/Encounters/tabs/EncounterCarePlanTab.tsx (1)
28-38: Refactor status logic into a separate component or utility function.The status determination logic is complex and could be more maintainable as a separate component.
+const CarePlanStatus = ({ careplan }) => { + const getStatus = () => { + if (dayjs(careplan.end_date).isBefore(dayjs())) { + return { text: "Completed", className: "text-gray-500" }; + } + if (dayjs(careplan.start_date).isAfter(dayjs())) { + return { text: "Upcoming", className: "text-blue-500" }; + } + return { + text: "Active", + className: "text-red-500 flex items-center gap-1", + indicator: true, + }; + }; + + const status = getStatus(); + return ( + <div className={status.className}> + {status.indicator && ( + <div className="bg-red-500 w-2 aspect-square rounded-full inline-block" /> + )} + {status.text} + </div> + ); +};src/pages/CarePlan/CarePlan.tsx (2)
18-22: Props should be typed using an interface.Define a dedicated interface for the component props to improve code maintainability and documentation.
+interface CarePlanProps { + facilityId: string; + encounterId: string; + careplanId: string; +} -export default function CarePlan(props: { - facilityId: string; - encounterId: string; - careplanId: string; -}) { +export default function CarePlan(props: CarePlanProps) {
41-50: Improve status indicator accessibility.The status indicators should have proper ARIA labels and consistent styling.
- {dayjs(careplan?.end_date).isBefore(dayjs()) ? ( - "Completed" - ) : dayjs(careplan?.start_date).isAfter(dayjs()) ? ( - <span className="text-blue-500">Upcoming</span> - ) : ( - <div className="text-red-500 flex items-center gap-1"> - <div className="bg-red-500 w-2 aspect-square rounded-full inline-block" /> - Active - </div> - )} + <div role="status" aria-label={`Care plan status: ${getStatusText()}`}> + {dayjs(careplan?.end_date).isBefore(dayjs()) ? ( + <span className="text-gray-500">Completed</span> + ) : dayjs(careplan?.start_date).isAfter(dayjs()) ? ( + <span className="text-blue-500">Upcoming</span> + ) : ( + <div className="text-red-500 flex items-center gap-1"> + <div className="bg-red-500 w-2 aspect-square rounded-full inline-block" aria-hidden="true" /> + Active + </div> + )} + </div>src/types/emr/careplan/careplanApi.ts (1)
115-124: Improve pagination implementation.The mock pagination response doesn't accurately reflect real-world scenarios.
export const DummyCarePlanGet: () => Promise< PaginatedResponse<CarePlan> > = async () => { return { - count: 1, + count: dummyCarePlans.length, next: "", previous: "", results: dummyCarePlans, }; };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
public/locale/en.json(2 hunks)src/Routers/routes/ConsultationRoutes.tsx(2 hunks)src/pages/CarePlan/CarePlan.tsx(1 hunks)src/pages/Encounters/EncounterShow.tsx(2 hunks)src/pages/Encounters/tabs/EncounterCarePlanTab.tsx(1 hunks)src/types/emr/careplan/careplan.ts(1 hunks)src/types/emr/careplan/careplanApi.ts(1 hunks)tailwind.config.js(1 hunks)
🔇 Additional comments (6)
src/types/emr/careplan/careplan.ts (2)
3-9: LGTM! Well-defined status values aligned with FHIR standards.The care plan statuses follow the FHIR CarePlan resource specification.
11-17: LGTM! Well-defined intent values aligned with FHIR standards.The care plan intents follow the FHIR CarePlan resource specification.
src/Routers/routes/ConsultationRoutes.tsx (1)
79-89: LGTM! Route implementation follows existing patterns.The care plan route is well-structured and consistent with other routes in the file.
tailwind.config.js (1)
118-118: LGTM! Optimization for Tailwind content scanning.Excluding node_modules from content scanning is a good optimization.
src/pages/Encounters/EncounterShow.tsx (1)
39-39: LGTM! Tab integration is correct.The care plan tab is properly integrated into the existing tab system.
public/locale/en.json (1)
51-51: LGTM! Translations are complete.Both the tab label and general care plan translations are properly added.
Also applies to: 495-495
| <span className="text-sm font-semibold">3/4 Goals Complete</span> | ||
| <div className="bg-gray-200 rounded-full h-1 overflow-hidden mt-2"> | ||
| <div className="bg-primary-500 rounded-full w-3/4 h-full" /> | ||
| </div> |
There was a problem hiding this comment.
Replace hardcoded progress values with actual data.
The progress bar shows hardcoded values ("3/4 Goals Complete") which should come from the care plan data.
- <span className="text-sm font-semibold">3/4 Goals Complete</span>
- <div className="bg-gray-200 rounded-full h-1 overflow-hidden mt-2">
- <div className="bg-primary-500 rounded-full w-3/4 h-full" />
+ <span className="text-sm font-semibold">
+ {careplan.completed_goals}/{careplan.total_goals} Goals Complete
+ </span>
+ <div className="bg-gray-200 rounded-full h-1 overflow-hidden mt-2">
+ <div
+ className="bg-primary-500 rounded-full h-full"
+ style={{
+ width: `${(careplan.completed_goals / careplan.total_goals) * 100}%`
+ }}
+ />Committable suggestion skipped: line range outside the PR's diff.
| const { data: carePlans } = useQuery({ | ||
| queryKey: ["patient", patient.id, "care-plans"], | ||
| queryFn: DummyCarePlanGet, | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling and loading states for data fetching.
The query implementation is missing error handling and loading states.
- const { data: carePlans } = useQuery({
+ const { data: carePlans, isLoading, error } = useQuery({
queryKey: ["patient", patient.id, "care-plans"],
queryFn: DummyCarePlanGet,
});
+
+ if (isLoading) {
+ return <div className="animate-pulse">Loading care plans...</div>;
+ }
+
+ if (error) {
+ return <div className="text-red-500">Error loading care plans: {error.message}</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: carePlans } = useQuery({ | |
| queryKey: ["patient", patient.id, "care-plans"], | |
| queryFn: DummyCarePlanGet, | |
| }); | |
| const { data: carePlans, isLoading, error } = useQuery({ | |
| queryKey: ["patient", patient.id, "care-plans"], | |
| queryFn: DummyCarePlanGet, | |
| }); | |
| if (isLoading) { | |
| return <div className="animate-pulse">Loading care plans...</div>; | |
| } | |
| if (error) { | |
| return <div className="text-red-500">Error loading care plans: {error.message}</div>; | |
| } |
src/pages/CarePlan/CarePlan.tsx
Outdated
| const planQuery = useQuery({ | ||
| queryKey: ["care-plan", props.careplanId], | ||
| queryFn: () => DummyCarePlanRetrieve(props.careplanId), | ||
| }); |
There was a problem hiding this comment.
Add error handling to the query.
The query should handle error states to provide feedback to users when data fetching fails.
const planQuery = useQuery({
queryKey: ["care-plan", props.careplanId],
queryFn: () => DummyCarePlanRetrieve(props.careplanId),
+ onError: (error) => {
+ // Handle error state
+ }
});
+if (planQuery.isError) {
+ return <div>Error loading care plan data</div>;
+}
+if (planQuery.isLoading) {
+ return <div>Loading...</div>;
+}Committable suggestion skipped: line range outside the PR's diff.
src/pages/CarePlan/CarePlan.tsx
Outdated
| {careplan?.addresses.map((code, i) => ( | ||
| <TableRow key={i}> | ||
| <TableCell>{code.code}</TableCell> | ||
| <TableCell>{code.display}</TableCell> | ||
| </TableRow> | ||
| ))} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add key based on unique identifier instead of index.
Using array index as key can lead to rendering issues. Use a unique identifier from the address object.
- {careplan?.addresses.map((code, i) => (
- <TableRow key={i}>
+ {careplan?.addresses.map((code) => (
+ <TableRow key={`${code.code}-${code.system}`}>📝 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.
| {careplan?.addresses.map((code, i) => ( | |
| <TableRow key={i}> | |
| <TableCell>{code.code}</TableCell> | |
| <TableCell>{code.display}</TableCell> | |
| </TableRow> | |
| ))} | |
| {careplan?.addresses.map((code) => ( | |
| <TableRow key={`${code.code}-${code.system}`}> | |
| <TableCell>{code.code}</TableCell> | |
| <TableCell>{code.display}</TableCell> | |
| </TableRow> | |
| ))} |
| <div className="md:w-[200px] w-full flex flex-col gap-2"> | ||
| <Button className="w-full" variant={"primary"}> | ||
| Update | ||
| </Button> | ||
| <Button className="w-full" variant={"primary"}> | ||
| Prescribe Medication | ||
| </Button> | ||
| <Button className="w-full" variant={"primary"}> | ||
| Order Lab Test | ||
| </Button> | ||
| <Button className="w-full" variant={"primary"}> | ||
| Record Task | ||
| </Button> | ||
| <Button className="w-full" variant={"primary"}> | ||
| Print Plan | ||
| </Button> | ||
| </div> |
There was a problem hiding this comment.
Implement action handlers for buttons.
The action buttons are currently non-functional. Implement handlers for each action.
<div className="md:w-[200px] w-full flex flex-col gap-2">
- <Button className="w-full" variant={"primary"}>
+ <Button
+ className="w-full"
+ variant={"primary"}
+ onClick={() => handleUpdate()}
+ >
Update
</Button>
- <Button className="w-full" variant={"primary"}>
+ <Button
+ className="w-full"
+ variant={"primary"}
+ onClick={() => handlePrescribeMedication()}
+ >
Prescribe Medication
</Button>
// Similar changes for other buttonsCommittable suggestion skipped: line range outside the PR's diff.
| export const DummyCarePlanRetrieve: ( | ||
| id: string, | ||
| ) => Promise<CarePlan | undefined> = async (id: string) => { | ||
| return dummyCarePlans.find((cp) => cp.id === id); | ||
| }; |
There was a problem hiding this comment.
Add error handling to DummyCarePlanRetrieve.
The function should handle the case when no care plan is found.
export const DummyCarePlanRetrieve: (
id: string,
) => Promise<CarePlan | undefined> = async (id: string) => {
- return dummyCarePlans.find((cp) => cp.id === id);
+ const plan = dummyCarePlans.find((cp) => cp.id === id);
+ if (!plan) {
+ throw new Error(`Care plan with id ${id} not found`);
+ }
+ return plan;
};📝 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.
| export const DummyCarePlanRetrieve: ( | |
| id: string, | |
| ) => Promise<CarePlan | undefined> = async (id: string) => { | |
| return dummyCarePlans.find((cp) => cp.id === id); | |
| }; | |
| export const DummyCarePlanRetrieve: ( | |
| id: string, | |
| ) => Promise<CarePlan | undefined> = async (id: string) => { | |
| const plan = dummyCarePlans.find((cp) => cp.id === id); | |
| if (!plan) { | |
| throw new Error(`Care plan with id ${id} not found`); | |
| } | |
| return plan; | |
| }; |
| const dummyCarePlans: CarePlan[] = [ | ||
| { | ||
| id: "12345", | ||
| created_date: "2025-01-28T10:30:00Z", | ||
| modified_date: "2025-01-28T10:45:00Z", | ||
| status: "active", | ||
| intent: "plan", | ||
| title: "Chronic Condition Management Plan", | ||
| description: | ||
| "A care plan designed to manage the patient's chronic diabetes condition with regular check-ups and medication adherence.", | ||
| start_date: "2025-01-01", | ||
| end_date: "2025-12-31", | ||
| patient: "patient-001", | ||
| encounter: "encounter-456", | ||
| custodian: "Dr. John Doe", | ||
| addresses: [ | ||
| { | ||
| code: "E11", | ||
| display: "Type 2 diabetes mellitus without complications", | ||
| system: "ICD-10", | ||
| }, | ||
| { | ||
| code: "R73.03", | ||
| display: "Prediabetes", | ||
| system: "ICD-10", | ||
| }, | ||
| ], | ||
| notes: | ||
| "Patient to follow up every three months with the care team. Adherence to medication and diet plan is critical for achieving desired outcomes.", | ||
| created_by: dummyUser, | ||
| updated_by: dummyUser, | ||
| }, | ||
| { | ||
| id: "12345", | ||
| created_date: "2025-01-28T10:30:00Z", | ||
| modified_date: "2025-01-28T10:45:00Z", | ||
| status: "active", | ||
| intent: "plan", | ||
| title: "Chronic Condition Management Plan", | ||
| description: | ||
| "A care plan designed to manage the patient's chronic diabetes condition with regular check-ups and medication adherence.", | ||
| start_date: "2025-01-01", | ||
| end_date: "2025-1-21", | ||
| patient: "patient-001", | ||
| encounter: "encounter-456", | ||
| custodian: "Dr. John Doe", | ||
| addresses: [ | ||
| { | ||
| code: "E11", | ||
| display: "Type 2 diabetes mellitus without complications", | ||
| system: "ICD-10", | ||
| }, | ||
| { | ||
| code: "R73.03", | ||
| display: "Prediabetes", | ||
| system: "ICD-10", | ||
| }, | ||
| ], | ||
| notes: | ||
| "Patient to follow up every three months with the care team. Adherence to medication and diet plan is critical for achieving desired outcomes.", | ||
| created_by: dummyUser, | ||
| updated_by: dummyUser, | ||
| }, | ||
| { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid duplicate dummy data.
The dummy care plans array contains identical objects. This can lead to confusion in testing.
const dummyCarePlans: CarePlan[] = [
{
id: "12345",
// ... first plan
},
- {
- id: "12345", // Same ID
- // ... duplicate plan
- },
- {
- id: "12345", // Same ID
- // ... duplicate plan
- },
+ {
+ id: "67890",
+ // ... second plan with different data
+ },
+ {
+ id: "11121",
+ // ... third plan with different data
+ },
];Committable suggestion skipped: line range outside the PR's diff.
Deploying care-fe with
|
| Latest commit: |
882ea6b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://4a47e129.care-fe.pages.dev |
| Branch Preview URL: | https://care-plan.care-fe.pages.dev |
|
👋 Hi, @shivankacker, |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Release Notes
New Features
Localization
Routing
Documentation