enhance encounter ui when user does not have perm. to view clinical data #14964
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughRefactors permission handling for encounter pages: removes per-component permission gates and a Changes
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
This PR enhances the encounter UI to show a proper "no permission" state when users lack permission to view clinical data, addressing issue #14963. Instead of hiding tabs or showing empty content, users now see an informative empty state with an icon and description explaining they need administrator access.
Key Changes:
- Removed permission-based query disabling in favor of tab-level visibility control
- Added EmptyState component to overview tab when clinical data access is denied
- Simplified permission checks by consolidating to existing
canReadClinicalDatafrom context
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
src/pages/Encounters/tabs/overview.tsx |
Added EmptyState display when user lacks clinical data permissions |
src/pages/Encounters/EncounterShow.tsx |
Consolidated permission checks using context values instead of computed permissions |
src/pages/Encounters/tabs/plots.tsx |
Removed redundant canAccess prop, relying on tab visibility control |
src/pages/Encounters/tabs/observations.tsx |
Removed enabled flag from query, relying on tab visibility control |
src/components/Common/Charts/ObservationChart.tsx |
Removed canAccess prop from ObservationVisualizer component |
public/locale/en.json |
Added internationalized strings for no permission message |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
src/pages/Encounters/EncounterShow.tsx (1)
147-153: Resolve the inconsistent permission checks in the responses tab.The
EncounterResponsesTabreceivescanAccess={canReadClinicalData || canReadSelectedEncounter}, but the tab's visibility is gated by onlycanReadClinicalData. This creates a mismatch: the tab won't display for users with justcanReadSelectedEncounterpermission (visibility gate blocks it), yet the component's query guard allows data access with that permission alone (redundant).Either align the visibility gate to match the permission prop—
visible: canReadClinicalData || canReadSelectedEncounter—or simplify the component to use onlycanReadClinicalDatalike other clinical tabs.src/pages/Encounters/tabs/observations.tsx (1)
73-96: Parent component controls access; error handling for permission denied can be improved.The observations tab visibility is properly controlled by
canReadClinicalDatain the parent EncounterShow component (line 136), and an access check with redirect is in place (lines 111-115). The query is not unconditional—it only renders within a guarded parent component that enforces permissions.However, if API permissions deny access during the request, the global error handler will show a generic "something went wrong" message rather than a specific permission denied message. Consider adding an explicit 403 handler to
errorHandler.tsor usingonErrorcallback on the query for better UX when permissions are denied at runtime.src/pages/Encounters/tabs/plots.tsx (1)
24-70: Consider addingenabled: canReadClinicalDatato the plots-config query for consistency and add permission-aware error handling.The plots configuration (
/config/plots.json) is a static public resource that doesn't require permission checks. However,overview.tsxusesenabled: canReadClinicalDatafor the same query—apply the same conditional toplots.tsxfor consistency.The actual patient data fetching in
ObservationVisualizeris properly protected: it usesquery(observationApi.analyse)which enforces API-level permission checks and will fail with a 403 error if the user lackscanViewClinicalDatapermission. The parent component (EncounterShow.tsx) already controls tab visibility and redirects unauthorized users.However, if a user bypasses the parent control and directly accesses the plots tab, the permission error from
observationApi.analysewill be displayed as a generic error message. Consider adding a specific error boundary or permission check inObservationVisualizerto display a clearer permission denied message.src/pages/Encounters/tabs/overview.tsx (1)
44-102: Excellent implementation of permission-based UI!The conditional rendering correctly implements the feature requirements:
- Properly gates clinical data display based on
canReadClinicalDatapermission- Maintains consistent layout structure between both branches
- Uses translated strings following i18n best practices
- EmptyState pattern aligns with similar implementations in other encounter tabs
The permission check is also consistently applied to data fetching (line 36), preventing unnecessary API calls when the user lacks access.
Optional enhancement for E2E testing:
Consider adding
data-cyattributes to the EmptyState wrapper for easier test targeting:Suggested enhancement
- ) : ( - <div className="flex-1 xl:pr-3 flex items-center justify-center"> + ) : ( + <div className="flex-1 xl:pr-3 flex items-center justify-center" data-cy="clinical-data-access-denied"> <EmptyState
📜 Review details
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (6)
public/locale/en.jsonsrc/components/Common/Charts/ObservationChart.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsxsrc/pages/Encounters/tabs/plots.tsx
💤 Files with no reviewable changes (1)
- src/components/Common/Charts/ObservationChart.tsx
🧰 Additional context used
📓 Path-based instructions (13)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types in TypeScript
Avoid explicitanytype in TypeScript
Use proper nullability annotations in TypeScript types
Use dedicated error handlers and TypeScript strict null checks
**/*.{ts,tsx}: Use TypeScript for all new code
Prefer interfaces over types for object definitions in TypeScript
Avoid usinganytype; use proper type definitions in TypeScript
Use type inference where possible in TypeScript
Use TanStack Query for API data management
Prefer React Context for global state management
**/*.{ts,tsx}: Use TanStack Query with thequeryandmutateutilities from@/Utils/request/
Use appropriate query keys following the resource pattern for TanStack Query
Leverage TanStack Query built-in features for pagination and debouncing
Implement proper error handling using the global error handler for TanStack Query operations
UseuseQueryhook withqueryKeyandqueryFnparameters, wherequeryFnwraps the API route with thequery()utility
UseuseMutationhook withmutationFnparameter wrapping API routes with themutate()utility, and implementonSuccesscallbacks to invalidate related queries
Support path parameters in TanStack Query using thepathParamsoption in query/mutate utilities
Support query parameters in TanStack Query using thequeryParamsoption in query/mutate utilities
Use thesilent: trueoption to suppress global error notifications when custom error handling is needed
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types
Avoid explicitanytypes and maint...
Files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names
**/*.{ts,tsx,js,jsx}: Use path aliases@/*for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names
Files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
Use declarative JSX
Files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{ts,tsx}: Use strict TypeScript configuration for medical data safety in all TypeScript source files
All literal strings must use i18next for multi-language support in healthcare interfaces
Use comprehensive error boundaries and user-friendly error messages for medical workflow debugging without exposing PHI
Follow ESLint configured rules for React hooks, accessibility, and code quality
Use @tanstack/react-query for server state management in API client code
Localize date and time formats for medical timestamps using locale-aware formatting functions
Use date-fns for date handling and manipulation with locale awareness for medical timestamps
Files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
src/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Prettier for consistent code formatting across the healthcare application
Files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
src/pages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use raviger for application routing in page components and route definitions
src/pages/**/*.{ts,tsx}: Keep page components insrc/pages/organized by feature
Use descriptive file names that reflect the page purpose
Export page components as default exports
Co-locate page-specific components and utilities with page components
Useravigerrouter for navigation (existing dependency)
Implement proper route parameters and query string handling
Handle navigation guards and authentication checks in page components
Implement proper loading states and error boundaries in page components
Use semantic HTML structure for accessibility in page components
Use@tanstack/react-queryfor API state management in page components (existing dependency)
Implement proper loading, error, and success states for data fetching
Handle pagination and infinite scroll patterns appropriately
Cache data appropriately in page components based on usage patterns
Use controlled components for form inputs in page components
Implement proper form validation withzodschemas in page components
Handle form submission states (loading, success, error) in page components
Use React hooks for local page state
Minimize unnecessary re-renders in page components
Implement proper authentication checks in page components
Handle different user roles and permissions in page components
Redirect to login when authentication is required in page components
Show appropriate UI based on user permissions in page components
Set appropriate page titles and meta descriptions in page components
Handle OpenGraph and Twitter card meta tags in page components
Implement structured data where applicable in page components
Implement code splitting for large page components
Use lazy loading for heavy components within page components
Optimize bundle size with proper imports in page components
Handle image optimization and lazy loading in page components
Implement comprehensive error boundaries in page components
Handle API e...
Files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{tsx,ts}: Use React 19.1.1 features and patterns following React 19 Documentation for healthcare application development
Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Use framer-motion for animations in healthcare UI interfaces
Files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
src/**/*.{tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Tailwind CSS 4.1.3 utility classes with custom healthcare-specific design system for styling
Files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Use 2-space indentation
Files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxpublic/locale/en.jsonsrc/pages/Encounters/tabs/overview.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
**/*.tsx: Use functional components with proper type definitions in React
One component per file is preferred
Prefer default exports for React components
Follow the component naming pattern:ComponentName.tsxfor React components
Use Tailwind CSS for styling
Use Shadcn UI components when available
Use local state for component-specific data
Use PascalCase for component file names (e.g.,AuthWizard.tsx)
Files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/04-ui-components.mdc)
**/*.{tsx,ts}: Use Shadcn UI components as the primary component library
Follow the component documentation for proper usage
Customize components using Tailwind CSS
UsenavigateanduseRedirectfrom raviger for navigation and redirects
Use Tailwind's responsive classes and follow mobile-first approach
Implement proper ARIA attributes for accessibility
Ensure keyboard navigation works in components
Define component props using TypeScript interfaces
Use translation keys fromsrc/Locale/for internationalization
Support RTL languages in components
Use proper date/time formatting for multiple language support
Files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
**/*.{ts,tsx,js,jsx,json,css,scss,html}
📄 CodeRabbit inference engine (AGENTS.md)
Use 2-space indentation
Files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxpublic/locale/en.jsonsrc/pages/Encounters/tabs/overview.tsx
public/locale/**/*.json
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use i18n Locale files with English Locale files in
public/locale/en.json- non-English languages managed via Crowdin only
Files:
public/locale/en.json
🧠 Learnings (55)
📓 Common learnings
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Implement PermissionContext with medical role-based permissions (Doctor, Nurse, Admin, Pharmacist) including patient data access control with dynamic permission checking and facility-level permissions for multi-facility healthcare systems
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/*.{ts,tsx} : Medical permission checking should verify user has required permission, is assigned to patient, or has emergency override status
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Create PermissionContext type with userPermissions array, canAccessPatient method, canPrescribeMedication boolean, and emergencyOverride boolean properties, along with a usePermissions hook that throws an error if used outside PermissionProvider
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/Permissions.tsx : Implement role-based access control for medical staff with Doctor, Nurse, and Admin roles in Permissions.tsx
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Implement emergency override permissions in PermissionContext for critical care situations with proper permission checking mechanisms
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/Permissions.tsx : Support emergency override permissions for critical care situations in Permissions.tsx
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Show appropriate UI based on user permissions in page components
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Handle patient data with appropriate privacy considerations in healthcare page components
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Use standard medical component interface patterns with medicalContext, accessibility properties (ariaLabel, screenReaderText), clinical validation callbacks (onValidationError), and medical data properties (patientId, facilityId)
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12882
File: public/locale/en.json:3356-3356
Timestamp: 2025-08-15T19:51:24.937Z
Learning: The redesigned clinical information components (AllergyTable, DiagnosisTable, SymptomTable) in care_fe use dynamic i18n lookups like `t(allergy.verification_status)`, `t(diagnosis.verification_status)`, and `t(symptom.verification_status)`. This means all possible verification status values (including "presumed", "confirmed", "unconfirmed", "refuted", "entered_in_error") need corresponding translation keys in the locale files, even if they're not directly referenced with explicit t() calls in the codebase.
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Implement PermissionContext with medical role-based permissions (Doctor, Nurse, Admin, Pharmacist) including patient data access control with dynamic permission checking and facility-level permissions for multi-facility healthcare systems
Applied to files:
src/pages/Encounters/EncounterShow.tsxpublic/locale/en.jsonsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:50:54.683Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/*.{ts,tsx} : Medical permission checking should verify user has required permission, is assigned to patient, or has emergency override status
Applied to files:
src/pages/Encounters/EncounterShow.tsxpublic/locale/en.json
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Create PermissionContext type with userPermissions array, canAccessPatient method, canPrescribeMedication boolean, and emergencyOverride boolean properties, along with a usePermissions hook that throws an error if used outside PermissionProvider
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:54.683Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/Permissions.tsx : Support emergency override permissions for critical care situations in Permissions.tsx
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Show appropriate UI based on user permissions in page components
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Handle patient data with appropriate privacy considerations in healthcare page components
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Implement emergency override permissions in PermissionContext for critical care situations with proper permission checking mechanisms
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:50:54.683Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/Permissions.tsx : Implement role-based access control for medical staff with Doctor, Nurse, and Admin roles in Permissions.tsx
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:54.683Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/Permissions.tsx : Use dynamic permission checking with getPermissions() function in Permissions.tsx
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:51:41.208Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/lib.instructions.md:0-0
Timestamp: 2025-11-25T13:51:41.208Z
Learning: Applies to src/lib/**/*.{ts,tsx} : Maintain audit trails for medical data access
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `date-fns` with locale support for formatting medical timestamps
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Custom React hooks for healthcare workflows must follow hooks.instructions.md
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{ts,tsx} : Use date-fns for date handling and manipulation with locale awareness for medical timestamps
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/ShortcutContext.tsx : Implement ShortcutContext with medical workflow keyboard shortcuts for rapid clinical actions and emergency protocol shortcuts for rapid response scenarios, including accessibility shortcuts for clinical environments
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{tsx,ts} : Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use healthcare-specific CAREUI custom components (Calendar, WeekdayCheckbox, Zoom) from `@/CAREUI/`
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:54:35.875Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursor/rules/04-ui-components.mdc:0-0
Timestamp: 2025-11-25T13:54:35.875Z
Learning: Applies to **/*.{tsx,ts} : Use `navigate` and `useRedirect` from raviger for navigation and redirects
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:52:33.081Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/providers.instructions.md:0-0
Timestamp: 2025-11-25T13:52:33.081Z
Learning: Applies to src/Providers/**/*HistoryAPIProvider*{.ts,.tsx} : HistoryAPIProvider should manage navigation history for clinical workflows
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/observations.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PatientContext.tsx : Implement Patient Context for current patient selection and medical alerts
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Use standard medical component interface patterns with medicalContext, accessibility properties (ariaLabel, screenReaderText), clinical validation callbacks (onValidationError), and medical data properties (patientId, facilityId)
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `PatientHoverCard` for patient info overlays
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsx
📚 Learning: 2024-11-13T11:33:22.403Z
Learnt from: sainak
Repo: ohcnetwork/care_fe PR: 9079
File: src/components/Facility/ConsultationDetails/ConsultationNursingTab.tsx:93-117
Timestamp: 2024-11-13T11:33:22.403Z
Learning: In `src/components/Facility/ConsultationDetails/ConsultationNursingTab.tsx`, the parent component manages the loading state, so child components like `NursingPlot` should not implement their own loading indicators.
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/observations.tsx
📚 Learning: 2025-08-15T19:51:24.937Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12882
File: public/locale/en.json:3356-3356
Timestamp: 2025-08-15T19:51:24.937Z
Learning: In the AllergyTable component and related redesigned components (SymptomTable, DiagnosisTable) in `src/components/Patient/allergy/AllergyTable.tsx`, dynamic i18n lookups are used like `t(allergy.verification_status)` where the verification_status field can contain values like "presumed", "confirmed", "unconfirmed", etc. These require corresponding translation keys in the locale files.
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `PatientRead` type from `@/types/emr/patient/patient` for patient data handling
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use Badge components to display patient status, facility capacity, medication dosage with color variants
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:53:20.837Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/emr/patient/**/*.{ts,tsx} : EMR-specific interface patterns should include: id, name, blood_group (optional), instance_tags, geo_organization, instance_identifiers, created_by, and year_of_birth fields for patient types
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2024-12-17T11:11:44.657Z
Learnt from: UdaySagar-Git
Repo: ohcnetwork/care_fe PR: 9298
File: src/components/Files/FileUpload.tsx:447-447
Timestamp: 2024-12-17T11:11:44.657Z
Learning: In `FileUpload.tsx`, `PATIENT_NOTES` files are not currently archivable because archives are not displayed in the UI, similar to `DISCHARGE_SUMMARY` files.
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2024-12-17T05:44:33.531Z
Learnt from: UdaySagar-Git
Repo: ohcnetwork/care_fe PR: 9298
File: src/components/Files/FileUpload.tsx:392-393
Timestamp: 2024-12-17T05:44:33.531Z
Learning: In the `FileUpload` component (`src/components/Files/FileUpload.tsx`), `PATIENT_NOTES` files should be archivable; therefore, the `archivable` prop should include `PATIENT_NOTES`.
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Ensure keyboard navigation is supported for clinical workflows and emergency situations
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/components/**/*.{ts,tsx} : Include medical use cases, accessibility notes, and WCAG compliance documentation in component documentation
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Add ARIA labels for critical medical data (patient names, vital signs, medication alerts)
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Implement comprehensive screen reader support - All medical data must be accessible via assistive technology with proper ARIA labels for medical context and urgency
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-08-15T19:51:24.937Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12882
File: public/locale/en.json:3356-3356
Timestamp: 2025-08-15T19:51:24.937Z
Learning: The redesigned clinical information components (AllergyTable, DiagnosisTable, SymptomTable) in care_fe use dynamic i18n lookups like `t(allergy.verification_status)`, `t(diagnosis.verification_status)`, and `t(symptom.verification_status)`. This means all possible verification status values (including "presumed", "confirmed", "unconfirmed", "refuted", "entered_in_error") need corresponding translation keys in the locale files, even if they're not directly referenced with explicit t() calls in the codebase.
Applied to files:
src/pages/Encounters/EncounterShow.tsxpublic/locale/en.json
📚 Learning: 2025-12-17T19:47:58.152Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14821
File: src/components/Location/LocationNavigation.tsx:161-163
Timestamp: 2025-12-17T19:47:58.152Z
Learning: To ensure the remove-unused-i18n.js cleanup script detects i18n keys, avoid wrapping keys inside a ternary expression passed directly to t(). Instead, call t() separately in each branch of a conditional, e.g. condition ? t("key1") : t("key2"), or compute the key in a variable before passing to t(). For LocationNavigation.tsx (and similar TSX files in the repo), prefer explicit separate i18n calls per branch or a shared precomputed key to guarantee all keys are statically detectable by the script.
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-12-22T10:16:36.690Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 14804
File: src/pages/Facility/services/pharmacy/DispensesView.tsx:117-135
Timestamp: 2025-12-22T10:16:36.690Z
Learning: In the care_fe repository, prefer the native HTML title attribute for simple tooltips over using shadcn/ui Tooltip components. Use Tooltip components only when the tooltip requires richer content, interactivity, or accessibility enhancements that cannot be achieved with a plain title. For simple cases, add a title attribute to the element (e.g., <span title="...">). If a Tooltip is used, ensure it is accessible and necessary, and avoid duplicating content available in the title attribute.
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Integrate CAREUI components cleanly with healthcare data sources and support live data updates for critical medical information
Applied to files:
src/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/AuditContext.tsx : Implement Audit Context for HIPAA compliance and data access logging
Applied to files:
src/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/{Utils,types,providers}/**/*.{ts,tsx} : Document medical data flows, validation requirements, and healthcare workflows with clinical reasoning in API and utility code comments
Applied to files:
src/pages/Encounters/tabs/plots.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `tanstack/react-query` for server state management with facility data and patient records
Applied to files:
src/pages/Encounters/tabs/plots.tsxsrc/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Integrate CAREUI components with React Query for real-time data from medical API endpoints
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Use `tanstack/react-query` for API state management in page components (existing dependency)
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-12-05T19:05:40.922Z
Learnt from: pratyush07-hub
Repo: ohcnetwork/care_fe PR: 14651
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:252-257
Timestamp: 2025-12-05T19:05:40.922Z
Learning: In healthcare components handling discharge status (like EncounterQuestion.tsx), maintainers implement defense-in-depth by adding early-return guards in change handlers (e.g., `if (isDischarged) return;`) even when the UI control is also disabled, to ensure business-critical immutability rules are enforced at multiple layers and protect against edge cases like browser extensions or unexpected UI library behavior.
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-10-12T04:44:19.609Z
Learnt from: GSMPRANEETH
Repo: ohcnetwork/care_fe PR: 13940
File: src/components/ui/filter-tabs.tsx:16-20
Timestamp: 2025-10-12T04:44:19.609Z
Learning: In the `filter-tabs` component (src/components/ui/filter-tabs.tsx), the `FilterTabOption` type uses object-only format `{ value: string; label?: string; icon?: ReactNode }` rather than a union with string, as all consumers are updated to use the object format for consistency and to support icons/labels.
Applied to files:
src/pages/Encounters/tabs/observations.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use consistent medical term translations for healthcare terminology in i18n
Applied to files:
src/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Use `i18next` for text translations in page components (existing dependency)
Applied to files:
src/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{ts,tsx} : All literal strings must use i18next for multi-language support in healthcare interfaces
Applied to files:
src/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/*.{ts,tsx} : Include proper error boundaries for medical data in context implementations
Applied to files:
src/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Handle emergency and critical care scenarios appropriately in healthcare page components
Applied to files:
src/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-01-14T05:04:43.093Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9838
File: src/components/Questionnaire/QuestionnaireForm.tsx:100-105
Timestamp: 2025-01-14T05:04:43.093Z
Learning: The QuestionnaireForm component in care_fe uses raviger's useNavigationPrompt hook for handling navigation prompts, replacing a previous custom hook implementation.
Applied to files:
src/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Ensure full compatibility with react-hook-form for medical data collection in CAREUI components
Applied to files:
src/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : CAREUI components should integrate seamlessly with shadcn/ui components - Accept shadcn/ui components as children when appropriate, follow established patterns from shadcn/ui for props and styling, and support customization through standard React patterns
Applied to files:
src/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:52:33.081Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/providers.instructions.md:0-0
Timestamp: 2025-11-25T13:52:33.081Z
Learning: Applies to src/Providers/**/*.{ts,tsx} : Integrate with tanstack/react-query for server state management in providers
Applied to files:
src/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Maintain proper heading hierarchy for screen reader support in medical records display
Applied to files:
src/pages/Encounters/tabs/overview.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/EmergencyContext.tsx : Implement Emergency Context for critical care protocols and rapid response
Applied to files:
src/pages/Encounters/tabs/overview.tsx
🧬 Code graph analysis (3)
src/pages/Encounters/tabs/plots.tsx (1)
src/pages/Encounters/utils/EncounterProvider.tsx (1)
useEncounter(290-296)
src/pages/Encounters/tabs/observations.tsx (1)
src/pages/Encounters/utils/EncounterProvider.tsx (1)
useEncounter(290-296)
src/pages/Encounters/tabs/overview.tsx (2)
src/pages/Encounters/tabs/consents.tsx (1)
EmptyState(29-48)src/pages/Encounters/tabs/overview/summary-panel-details-tab/empty-state.tsx (1)
EmptyState(3-8)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build
- GitHub Check: CodeQL-Build
- GitHub Check: Test
🔇 Additional comments (4)
src/pages/Encounters/EncounterShow.tsx (2)
74-76: LGTM! Clean permission model refactor.The introduction of two separate permission booleans (
canReadClinicalDataandcanReadSelectedEncounter) provides clear separation between clinical data access and basic encounter access. The combinedcanAccessflag appropriately allows either permission type.Also applies to: 95-95
131-131: LGTM! Consistent tab visibility control.Tab visibility is now properly gated by
canReadClinicalData, centralizing permission checks at the parent level rather than in individual tab components. This aligns well with the PR objective to enhance UI for users without clinical data permissions.Also applies to: 136-136, 141-141, 146-146, 157-157, 162-162, 175-175, 180-180
public/locale/en.json (1)
3330-3331: New clinical-data permission strings look consistent and clearThe key names follow existing naming conventions, and the messages are concise, accurate, and aligned with other permission-denied copy in this file. No changes needed.
src/pages/Encounters/tabs/overview.tsx (1)
3-4: LGTM! Clean integration of i18n and permission-denied UI.The imports and translation hook are properly set up. ShieldAlert is semantically appropriate for permission denial, and the i18n integration follows the project's established patterns.
Also applies to: 6-6, 23-23
🎭 Playwright Test ResultsStatus: ✅ Passed
📊 Detailed results are available in the playwright-final-report artifact. Run: #4260 |
Jacobjeevan
left a comment
Jacobjeevan
left a comment
There was a problem hiding this comment.
Hmm, we should also handle direct urls, redirect to overview if user doesn't have access 🤔
…x/enhance-ui-when-no-perm-to-view-encounter-clinical-data
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| ); | ||
|
|
||
| useEffect(() => { | ||
| // escape from currentTab if it's visible is false |
There was a problem hiding this comment.
Corrected spelling of 'escape' to 'redirect' in the comment. The code redirects the user to the first tab, rather than 'escaping' from the current tab.
| // escape from currentTab if it's visible is false | |
| // redirect from currentTab to the first tab if it's not visible |
| useEffect(() => { | ||
| // escape from currentTab if it's visible is false | ||
| if (currentTab && tabs[currentTab].visible === false) { | ||
| onTabChange(allTabKeys[0]); |
There was a problem hiding this comment.
The effect should only redirect to the first tab if that tab is visible. Currently, it redirects to allTabKeys[0] without checking if that tab is visible, which could result in redirecting to another invisible tab. Consider finding the first visible tab instead: const firstVisibleTab = allTabKeys.find(key => tabs[key].visible !== false); if (firstVisibleTab) onTabChange(firstVisibleTab);
| onTabChange(allTabKeys[0]); | |
| const firstVisibleTab = allTabKeys.find( | |
| (key) => tabs[key].visible !== false, | |
| ); | |
| if (firstVisibleTab) { | |
| onTabChange(firstVisibleTab); | |
| } |
| ); | ||
|
|
||
| useEffect(() => { | ||
| // escape from currentTab if it's visible is false |
There was a problem hiding this comment.
Corrected grammar: 'if it's visible' should be 'if its visibility'.
| // escape from currentTab if it's visible is false | |
| // escape from currentTab if its visibility is false |
There was a problem hiding this comment.
Actionable comments posted: 1
Fix all issues with AI Agents 🤖
In @src/components/ui/nav-tabs.tsx:
- Around line 87-92: The useEffect that guards against selecting a non-visible
tab (useEffect referencing currentTab, tabs, allTabKeys, onTabChange) should
stop depending on allTabKeys (it's derived from tabs) to avoid firing every
render; update the dependency array to [currentTab, tabs, onTabChange] (or
better, derive a visibility map inside this component and depend on that), and
fix the inline comment to read "if its visible property is false" or "if it is
not visible"; also add a brief comment noting that if the parent recreates tabs
each render it should memoize tabs with useMemo.
♻️ Duplicate comments (1)
src/pages/Encounters/tabs/observations.tsx (1)
71-96: Add permission-denied UI state for users without clinical data access.The removal of
canReadClinicalDatafrom the query's enabled condition means this tab now fetches observations unconditionally. However, the component lacks a dedicated UI state to inform users when access is denied due to insufficient permissions. Currently, if the API returns an empty result due to authorization restrictions, users see the generic "no_observations" message (line 118), which is confusing in a healthcare context where clear communication of access restrictions is critical for compliance and user experience.According to the PR objectives and AI summary, other tabs in this PR display an
EmptyStatewith translated denial messages whencanReadClinicalDatais false. This tab should follow the same pattern.Recommended implementation
Add a permission check before the loading state:
export const EncounterObservationsTab = () => { const { t } = useTranslation(); - const { selectedEncounterId: encounterId, patientId } = useEncounter(); + const { selectedEncounterId: encounterId, patientId, canReadClinicalData } = useEncounter(); const { ref, inView } = useInView(); + if (!canReadClinicalData) { + return ( + <Card className="p-6"> + <EmptyState + icon={<ShieldAlert className="text-gray-400" />} + title={t("access_denied")} + description={t("you_do_not_have_permission_to_view_clinical_data")} + /> + </Card> + ); + } + const { data, fetchNextPage, hasNextPage, isLoading, isFetchingNextPage } =Note: Ensure
EmptyStateandShieldAlertare imported, and the i18n keys match those added elsewhere in this PR.
📜 Review details
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
public/locale/en.jsonsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/tabs/observations.tsx
🧰 Additional context used
📓 Path-based instructions (15)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types in TypeScript
Avoid explicitanytype in TypeScript
Use proper nullability annotations in TypeScript types
Use dedicated error handlers and TypeScript strict null checks
**/*.{ts,tsx}: Use TypeScript for all new code
Prefer interfaces over types for object definitions in TypeScript
Avoid usinganytype; use proper type definitions in TypeScript
Use type inference where possible in TypeScript
Use TanStack Query for API data management
Prefer React Context for global state management
**/*.{ts,tsx}: Use TanStack Query with thequeryandmutateutilities from@/Utils/request/
Use appropriate query keys following the resource pattern for TanStack Query
Leverage TanStack Query built-in features for pagination and debouncing
Implement proper error handling using the global error handler for TanStack Query operations
UseuseQueryhook withqueryKeyandqueryFnparameters, wherequeryFnwraps the API route with thequery()utility
UseuseMutationhook withmutationFnparameter wrapping API routes with themutate()utility, and implementonSuccesscallbacks to invalidate related queries
Support path parameters in TanStack Query using thepathParamsoption in query/mutate utilities
Support query parameters in TanStack Query using thequeryParamsoption in query/mutate utilities
Use thesilent: trueoption to suppress global error notifications when custom error handling is needed
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types
Avoid explicitanytypes and maint...
Files:
src/pages/Encounters/tabs/observations.tsxsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names
**/*.{ts,tsx,js,jsx}: Use path aliases@/*for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names
Files:
src/pages/Encounters/tabs/observations.tsxsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
Use declarative JSX
Files:
src/pages/Encounters/tabs/observations.tsxsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{ts,tsx}: Use strict TypeScript configuration for medical data safety in all TypeScript source files
All literal strings must use i18next for multi-language support in healthcare interfaces
Use comprehensive error boundaries and user-friendly error messages for medical workflow debugging without exposing PHI
Follow ESLint configured rules for React hooks, accessibility, and code quality
Use @tanstack/react-query for server state management in API client code
Localize date and time formats for medical timestamps using locale-aware formatting functions
Use date-fns for date handling and manipulation with locale awareness for medical timestamps
Files:
src/pages/Encounters/tabs/observations.tsxsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
src/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Prettier for consistent code formatting across the healthcare application
Files:
src/pages/Encounters/tabs/observations.tsxsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
src/pages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use raviger for application routing in page components and route definitions
src/pages/**/*.{ts,tsx}: Keep page components insrc/pages/organized by feature
Use descriptive file names that reflect the page purpose
Export page components as default exports
Co-locate page-specific components and utilities with page components
Useravigerrouter for navigation (existing dependency)
Implement proper route parameters and query string handling
Handle navigation guards and authentication checks in page components
Implement proper loading states and error boundaries in page components
Use semantic HTML structure for accessibility in page components
Use@tanstack/react-queryfor API state management in page components (existing dependency)
Implement proper loading, error, and success states for data fetching
Handle pagination and infinite scroll patterns appropriately
Cache data appropriately in page components based on usage patterns
Use controlled components for form inputs in page components
Implement proper form validation withzodschemas in page components
Handle form submission states (loading, success, error) in page components
Use React hooks for local page state
Minimize unnecessary re-renders in page components
Implement proper authentication checks in page components
Handle different user roles and permissions in page components
Redirect to login when authentication is required in page components
Show appropriate UI based on user permissions in page components
Set appropriate page titles and meta descriptions in page components
Handle OpenGraph and Twitter card meta tags in page components
Implement structured data where applicable in page components
Implement code splitting for large page components
Use lazy loading for heavy components within page components
Optimize bundle size with proper imports in page components
Handle image optimization and lazy loading in page components
Implement comprehensive error boundaries in page components
Handle API e...
Files:
src/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/EncounterShow.tsx
src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{tsx,ts}: Use React 19.1.1 features and patterns following React 19 Documentation for healthcare application development
Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Use framer-motion for animations in healthcare UI interfaces
Files:
src/pages/Encounters/tabs/observations.tsxsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
src/**/*.{tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Tailwind CSS 4.1.3 utility classes with custom healthcare-specific design system for styling
Files:
src/pages/Encounters/tabs/observations.tsxsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Use 2-space indentation
Files:
src/pages/Encounters/tabs/observations.tsxpublic/locale/en.jsonsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
**/*.tsx: Use functional components with proper type definitions in React
One component per file is preferred
Prefer default exports for React components
Follow the component naming pattern:ComponentName.tsxfor React components
Use Tailwind CSS for styling
Use Shadcn UI components when available
Use local state for component-specific data
Use PascalCase for component file names (e.g.,AuthWizard.tsx)
Files:
src/pages/Encounters/tabs/observations.tsxsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/04-ui-components.mdc)
**/*.{tsx,ts}: Use Shadcn UI components as the primary component library
Follow the component documentation for proper usage
Customize components using Tailwind CSS
UsenavigateanduseRedirectfrom raviger for navigation and redirects
Use Tailwind's responsive classes and follow mobile-first approach
Implement proper ARIA attributes for accessibility
Ensure keyboard navigation works in components
Define component props using TypeScript interfaces
Use translation keys fromsrc/Locale/for internationalization
Support RTL languages in components
Use proper date/time formatting for multiple language support
Files:
src/pages/Encounters/tabs/observations.tsxsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
**/*.{ts,tsx,js,jsx,json,css,scss,html}
📄 CodeRabbit inference engine (AGENTS.md)
Use 2-space indentation
Files:
src/pages/Encounters/tabs/observations.tsxpublic/locale/en.jsonsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
public/locale/**/*.json
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use i18n Locale files with English Locale files in
public/locale/en.json- non-English languages managed via Crowdin only
Files:
public/locale/en.json
src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/components/**/*.{ts,tsx}: Implement WCAG 2.1 AA accessibility compliance in medical applications with screen reader compatibility and keyboard navigation
Include medical use cases, accessibility notes, and WCAG compliance documentation in component documentation
Follow established React component patterns and folder structure organized by feature and domain
src/components/**/*.{ts,tsx}: Use path aliases:@/components/,@/types/,@/lib/,@/pages/for imports
Follow import order: External packages →@/components/ui/→@/components/→@/CAREUI/→@/types/→@/lib/→ relative imports
Use named exports fromlucide-reactfor icons (e.g.,import { SettingsIcon } from "lucide-react")
ImportuseTranslationfromreact-i18nextfor internationalization
Use React 19.1.1 hooks pattern - Functional components only
Always define TypeScript Props interfaces (e.g., PatientInfoCardProps) for component props
Use handle prefix for event handlers (e.g., handleSubmit, handleTagsUpdate, handlePatientSelect)
Use shadcn/ui components as primary UI system (Button, Card, Badge, etc.) from@/components/ui/
Use healthcare-specific CAREUI custom components (Calendar, WeekdayCheckbox, Zoom) from@/CAREUI/
UsebuttonVariantsfrom@/components/ui/buttonwith CVA patterns for button styling
Follow<Card><CardHeader>pattern for consistent card layouts
UsePatientReadtype from@/types/emr/patient/patientfor patient data handling
ImplementTagAssignmentSheetwithTagEntityTypefor patient/facility tags
UsePatientHoverCardfor patient info overlays
Use Badge components to display patient status, facility capacity, medication dosage with color variants
Usecva()from class variance authority for variant-based component styling
Usecn()from@/lib/utilsfor conditional class composition
Follow Tailwind CSS 4.1.3 color system: primary-700, gray-900, red-500 pattern with dark mode variants
Use Tailwind shadow system: shadow-sm, shadow-xs for el...
Files:
src/components/ui/nav-tabs.tsx
src/components/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/01-project-structure.mdc)
ShadCN UI components should be placed in src/components/ui/ directory
Files:
src/components/ui/nav-tabs.tsx
🧠 Learnings (56)
📓 Common learnings
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Implement PermissionContext with medical role-based permissions (Doctor, Nurse, Admin, Pharmacist) including patient data access control with dynamic permission checking and facility-level permissions for multi-facility healthcare systems
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/Permissions.tsx : Implement role-based access control for medical staff with Doctor, Nurse, and Admin roles in Permissions.tsx
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/*.{ts,tsx} : Medical permission checking should verify user has required permission, is assigned to patient, or has emergency override status
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Implement emergency override permissions in PermissionContext for critical care situations with proper permission checking mechanisms
Learnt from: pratyush07-hub
Repo: ohcnetwork/care_fe PR: 14651
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:252-257
Timestamp: 2025-12-05T19:05:40.922Z
Learning: In healthcare components handling discharge status (like EncounterQuestion.tsx), maintainers implement defense-in-depth by adding early-return guards in change handlers (e.g., `if (isDischarged) return;`) even when the UI control is also disabled, to ensure business-critical immutability rules are enforced at multiple layers and protect against edge cases like browser extensions or unexpected UI library behavior.
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Implement comprehensive screen reader support - All medical data must be accessible via assistive technology with proper ARIA labels for medical context and urgency
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Handle patient data with appropriate privacy considerations in healthcare page components
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Create PermissionContext type with userPermissions array, canAccessPatient method, canPrescribeMedication boolean, and emergencyOverride boolean properties, along with a usePermissions hook that throws an error if used outside PermissionProvider
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/Permissions.tsx : Support emergency override permissions for critical care situations in Permissions.tsx
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Show appropriate UI based on user permissions in page components
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Handle different user roles and permissions in page components
📚 Learning: 2025-11-25T13:51:41.208Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/lib.instructions.md:0-0
Timestamp: 2025-11-25T13:51:41.208Z
Learning: Applies to src/lib/**/*.{ts,tsx} : Maintain audit trails for medical data access
Applied to files:
src/pages/Encounters/tabs/observations.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Handle patient data with appropriate privacy considerations in healthcare page components
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `tanstack/react-query` for server state management with facility data and patient records
Applied to files:
src/pages/Encounters/tabs/observations.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Integrate CAREUI components cleanly with healthcare data sources and support live data updates for critical medical information
Applied to files:
src/pages/Encounters/tabs/observations.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/{Utils,types,providers}/**/*.{ts,tsx} : Document medical data flows, validation requirements, and healthcare workflows with clinical reasoning in API and utility code comments
Applied to files:
src/pages/Encounters/tabs/observations.tsx
📚 Learning: 2025-12-05T19:05:40.922Z
Learnt from: pratyush07-hub
Repo: ohcnetwork/care_fe PR: 14651
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:252-257
Timestamp: 2025-12-05T19:05:40.922Z
Learning: In healthcare components handling discharge status (like EncounterQuestion.tsx), maintainers implement defense-in-depth by adding early-return guards in change handlers (e.g., `if (isDischarged) return;`) even when the UI control is also disabled, to ensure business-critical immutability rules are enforced at multiple layers and protect against edge cases like browser extensions or unexpected UI library behavior.
Applied to files:
src/pages/Encounters/tabs/observations.tsx
📚 Learning: 2025-11-25T13:52:33.081Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/providers.instructions.md:0-0
Timestamp: 2025-11-25T13:52:33.081Z
Learning: Applies to src/Providers/**/*HistoryAPIProvider*{.ts,.tsx} : HistoryAPIProvider should manage navigation history for clinical workflows
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Integrate CAREUI components with React Query for real-time data from medical API endpoints
Applied to files:
src/pages/Encounters/tabs/observations.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `PatientRead` type from `@/types/emr/patient/patient` for patient data handling
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/AuditContext.tsx : Implement Audit Context for HIPAA compliance and data access logging
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:54.683Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/*.{ts,tsx} : Medical permission checking should verify user has required permission, is assigned to patient, or has emergency override status
Applied to files:
src/pages/Encounters/tabs/observations.tsxpublic/locale/en.jsonsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2024-11-14T10:28:32.680Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: cypress/pageobject/Users/ManageUserPage.ts:181-188
Timestamp: 2024-11-14T10:28:32.680Z
Learning: In the Cypress tests for user management (`cypress/pageobject/Users/ManageUserPage.ts`), the method `verifyDoctorQualification()` is intended to verify qualifications specifically for the Doctor role.
Applied to files:
src/pages/Encounters/tabs/observations.tsx
📚 Learning: 2024-11-18T10:48:08.500Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9145
File: cypress/e2e/patient_spec/PatientConsultationCreation.cy.ts:93-94
Timestamp: 2024-11-18T10:48:08.500Z
Learning: In `cypress/e2e/patient_spec/PatientConsultationCreation.cy.ts`, bed capacity verification assertions after patient admission are already being performed elsewhere, so adding them here is unnecessary.
Applied to files:
src/pages/Encounters/tabs/observations.tsx
📚 Learning: 2026-01-02T12:19:39.931Z
Learnt from: SiddanthNayak
Repo: ohcnetwork/care_fe PR: 14906
File: tests/facility/overview/overview.spec.ts:6-39
Timestamp: 2026-01-02T12:19:39.931Z
Learning: In tests/facility/overview/overview.spec.ts (and likely other facility tests), the appointments and encounters pages dynamically add extra filters or query parameters to the URL, so URL assertions should use `.toContain()` rather than exact matches with `.toHaveURL()` to accommodate these dynamic additions.
Applied to files:
src/pages/Encounters/tabs/observations.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PatientContext.tsx : Implement Patient Context for current patient selection and medical alerts
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2024-11-13T11:33:22.403Z
Learnt from: sainak
Repo: ohcnetwork/care_fe PR: 9079
File: src/components/Facility/ConsultationDetails/ConsultationNursingTab.tsx:93-117
Timestamp: 2024-11-13T11:33:22.403Z
Learning: In `src/components/Facility/ConsultationDetails/ConsultationNursingTab.tsx`, the parent component manages the loading state, so child components like `NursingPlot` should not implement their own loading indicators.
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `PatientHoverCard` for patient info overlays
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Custom React hooks for healthcare workflows must follow hooks.instructions.md
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-08-15T19:51:24.937Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12882
File: public/locale/en.json:3356-3356
Timestamp: 2025-08-15T19:51:24.937Z
Learning: In the AllergyTable component and related redesigned components (SymptomTable, DiagnosisTable) in `src/components/Patient/allergy/AllergyTable.tsx`, dynamic i18n lookups are used like `t(allergy.verification_status)` where the verification_status field can contain values like "presumed", "confirmed", "unconfirmed", etc. These require corresponding translation keys in the locale files.
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-12-17T19:47:58.152Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14821
File: src/components/Location/LocationNavigation.tsx:161-163
Timestamp: 2025-12-17T19:47:58.152Z
Learning: To ensure the remove-unused-i18n.js cleanup script detects i18n keys, avoid wrapping keys inside a ternary expression passed directly to t(). Instead, call t() separately in each branch of a conditional, e.g. condition ? t("key1") : t("key2"), or compute the key in a variable before passing to t(). For LocationNavigation.tsx (and similar TSX files in the repo), prefer explicit separate i18n calls per branch or a shared precomputed key to guarantee all keys are statically detectable by the script.
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-12-22T10:16:36.690Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 14804
File: src/pages/Facility/services/pharmacy/DispensesView.tsx:117-135
Timestamp: 2025-12-22T10:16:36.690Z
Learning: In the care_fe repository, prefer the native HTML title attribute for simple tooltips over using shadcn/ui Tooltip components. Use Tooltip components only when the tooltip requires richer content, interactivity, or accessibility enhancements that cannot be achieved with a plain title. For simple cases, add a title attribute to the element (e.g., <span title="...">). If a Tooltip is used, ensure it is accessible and necessary, and avoid duplicating content available in the title attribute.
Applied to files:
src/pages/Encounters/tabs/observations.tsxsrc/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Implement PermissionContext with medical role-based permissions (Doctor, Nurse, Admin, Pharmacist) including patient data access control with dynamic permission checking and facility-level permissions for multi-facility healthcare systems
Applied to files:
public/locale/en.jsonsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-08-15T19:51:24.937Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12882
File: public/locale/en.json:3356-3356
Timestamp: 2025-08-15T19:51:24.937Z
Learning: The redesigned clinical information components (AllergyTable, DiagnosisTable, SymptomTable) in care_fe use dynamic i18n lookups like `t(allergy.verification_status)`, `t(diagnosis.verification_status)`, and `t(symptom.verification_status)`. This means all possible verification status values (including "presumed", "confirmed", "unconfirmed", "refuted", "entered_in_error") need corresponding translation keys in the locale files, even if they're not directly referenced with explicit t() calls in the codebase.
Applied to files:
public/locale/en.jsonsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-01-15T04:16:14.978Z
Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 9956
File: src/pages/Patient/index.tsx:71-71
Timestamp: 2025-01-15T04:16:14.978Z
Learning: In this project, new translation strings must only be added to the English locale (en.json) through pull requests. Translations for other languages (ta.json, mr.json, ml.json, hi.json, kn.json, etc.) are managed through Crowdin (https://crowdin.com/project/ohccarefe) and should not be modified directly in PRs.
Applied to files:
public/locale/en.json
📚 Learning: 2025-10-12T06:10:56.702Z
Learnt from: GSMPRANEETH
Repo: ohcnetwork/care_fe PR: 13940
File: src/components/ui/filter-tabs.tsx:54-88
Timestamp: 2025-10-12T06:10:56.702Z
Learning: In the FilterTabs component (src/components/ui/filter-tabs.tsx), the `options` prop is always static in the codebase. All consumers pass options derived from TypeScript enums (e.g., PrescriptionStatus, Status) or static arrays that don't change at runtime. No useEffect is needed to sync options state because options never change after the initial render.
Applied to files:
src/components/ui/nav-tabs.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Use React hooks for local page state
Applied to files:
src/components/ui/nav-tabs.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use React 19.1.1 hooks pattern - Functional components only
Applied to files:
src/components/ui/nav-tabs.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `useState` for UI state and `useCallback` for event handlers
Applied to files:
src/components/ui/nav-tabs.tsx
📚 Learning: 2025-10-12T04:44:19.609Z
Learnt from: GSMPRANEETH
Repo: ohcnetwork/care_fe PR: 13940
File: src/components/ui/filter-tabs.tsx:16-20
Timestamp: 2025-10-12T04:44:19.609Z
Learning: In the `filter-tabs` component (src/components/ui/filter-tabs.tsx), the `FilterTabOption` type uses object-only format `{ value: string; label?: string; icon?: ReactNode }` rather than a union with string, as all consumers are updated to use the object format for consistency and to support icons/labels.
Applied to files:
src/components/ui/nav-tabs.tsx
📚 Learning: 2024-11-25T09:21:37.265Z
Learnt from: sarvesh-official
Repo: ohcnetwork/care_fe PR: 9196
File: src/hooks/useFileManager.tsx:76-76
Timestamp: 2024-11-25T09:21:37.265Z
Learning: In the React TypeScript file `src/hooks/useFileManager.tsx`, resetting `currentIndex` in a `useEffect` when `uploadedFiles` changes will reset the current index every time and can cause uncontrolled issues. It's better to manage `currentIndex` without automatically resetting it upon `uploadedFiles` changes to avoid unexpected behavior.
Applied to files:
src/components/ui/nav-tabs.tsx
📚 Learning: 2025-11-25T13:52:33.081Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/providers.instructions.md:0-0
Timestamp: 2025-11-25T13:52:33.081Z
Learning: Applies to src/Providers/**/*.{ts,tsx} : Use React hooks for local provider state management
Applied to files:
src/components/ui/nav-tabs.tsx
📚 Learning: 2025-11-25T13:54:09.978Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursor/rules/02-coding-standards.mdc:0-0
Timestamp: 2025-11-25T13:54:09.978Z
Learning: Applies to **/*.tsx : Use functional components with proper type definitions in React
Applied to files:
src/components/ui/nav-tabs.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Use `tanstack/react-query` for API state management in page components (existing dependency)
Applied to files:
src/components/ui/nav-tabs.tsx
📚 Learning: 2025-11-25T13:54:35.875Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursor/rules/04-ui-components.mdc:0-0
Timestamp: 2025-11-25T13:54:35.875Z
Learning: Applies to **/*.{tsx,ts} : Use `navigate` and `useRedirect` from raviger for navigation and redirects
Applied to files:
src/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/ShortcutContext.tsx : Implement ShortcutContext with medical workflow keyboard shortcuts for rapid clinical actions and emergency protocol shortcuts for rapid response scenarios, including accessibility shortcuts for clinical environments
Applied to files:
src/components/ui/nav-tabs.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:54:35.875Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursor/rules/04-ui-components.mdc:0-0
Timestamp: 2025-11-25T13:54:35.875Z
Learning: Applies to **/*.{tsx,ts} : Ensure keyboard navigation works in components
Applied to files:
src/components/ui/nav-tabs.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Create PermissionContext type with userPermissions array, canAccessPatient method, canPrescribeMedication boolean, and emergencyOverride boolean properties, along with a usePermissions hook that throws an error if used outside PermissionProvider
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Show appropriate UI based on user permissions in page components
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:54.683Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/Permissions.tsx : Support emergency override permissions for critical care situations in Permissions.tsx
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Implement emergency override permissions in PermissionContext for critical care situations with proper permission checking mechanisms
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:54.683Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/Permissions.tsx : Implement role-based access control for medical staff with Doctor, Nurse, and Admin roles in Permissions.tsx
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:54.683Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/Permissions.tsx : Use dynamic permission checking with getPermissions() function in Permissions.tsx
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `date-fns` with locale support for formatting medical timestamps
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{ts,tsx} : Use date-fns for date handling and manipulation with locale awareness for medical timestamps
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{tsx,ts} : Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use healthcare-specific CAREUI custom components (Calendar, WeekdayCheckbox, Zoom) from `@/CAREUI/`
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Use standard medical component interface patterns with medicalContext, accessibility properties (ariaLabel, screenReaderText), clinical validation callbacks (onValidationError), and medical data properties (patientId, facilityId)
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use Badge components to display patient status, facility capacity, medication dosage with color variants
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:53:20.837Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/emr/patient/**/*.{ts,tsx} : EMR-specific interface patterns should include: id, name, blood_group (optional), instance_tags, geo_organization, instance_identifiers, created_by, and year_of_birth fields for patient types
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2024-12-17T11:11:44.657Z
Learnt from: UdaySagar-Git
Repo: ohcnetwork/care_fe PR: 9298
File: src/components/Files/FileUpload.tsx:447-447
Timestamp: 2024-12-17T11:11:44.657Z
Learning: In `FileUpload.tsx`, `PATIENT_NOTES` files are not currently archivable because archives are not displayed in the UI, similar to `DISCHARGE_SUMMARY` files.
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2024-12-17T05:44:33.531Z
Learnt from: UdaySagar-Git
Repo: ohcnetwork/care_fe PR: 9298
File: src/components/Files/FileUpload.tsx:392-393
Timestamp: 2024-12-17T05:44:33.531Z
Learning: In the `FileUpload` component (`src/components/Files/FileUpload.tsx`), `PATIENT_NOTES` files should be archivable; therefore, the `archivable` prop should include `PATIENT_NOTES`.
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Ensure keyboard navigation is supported for clinical workflows and emergency situations
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/components/**/*.{ts,tsx} : Include medical use cases, accessibility notes, and WCAG compliance documentation in component documentation
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Add ARIA labels for critical medical data (patient names, vital signs, medication alerts)
Applied to files:
src/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Implement comprehensive screen reader support - All medical data must be accessible via assistive technology with proper ARIA labels for medical context and urgency
Applied to files:
src/pages/Encounters/EncounterShow.tsx
🧬 Code graph analysis (2)
src/pages/Encounters/tabs/observations.tsx (1)
src/pages/Encounters/utils/EncounterProvider.tsx (1)
useEncounter(290-296)
src/pages/Encounters/EncounterShow.tsx (2)
src/pages/Encounters/tabs/medicines.tsx (1)
EncounterMedicinesTab(3-5)src/pages/Encounters/tabs/files.tsx (1)
EncounterFilesTab(6-21)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
- GitHub Check: Redirect rules - care-ohc
- GitHub Check: Header rules - care-ohc
- GitHub Check: Pages changed - care-ohc
- GitHub Check: build
- GitHub Check: Test
- GitHub Check: CodeQL-Build
- GitHub Check: OSSAR-Scan
🔇 Additional comments (5)
public/locale/en.json (1)
3335-3336: LGTM for new clinical-data permission messagesThe new keys are well‑named, the copy is clear and consistent with existing permission/“no_*” messages, and they follow the en.json‑only i18n guideline and formatting conventions.
src/pages/Encounters/EncounterShow.tsx (4)
75-76: LGTM! New permission flags integrated correctly.The addition of
canReadClinicalDataandcanReadSelectedEncounterfrom theuseEncounterhook provides clear, declarative permission gates that align with the PR's objective to enhance UI for users without clinical data access.
132-183: Tab visibility properly gates clinical data based on permissions.The implementation correctly restricts visibility of clinical data tabs (plots, observations, medicines, responses, files, notes, service_requests, diagnostic_reports) using
canReadClinicalData, while intentionally keeping basic encounter tabs (updates, devices, consents) always visible. This provides a graceful degraded experience for users with limited permissions.Based on learnings: Shows appropriate UI based on user permissions in page components.
96-96: Permission model is correctly implemented with appropriate EmptyState handling.The split permission design is intentional:
canAccessuses OR logic to allow page entry with either permission, while individual tabs restrict visibility tocanReadClinicalData. Users withcanReadSelectedEncounteronly can view the "updates", "devices", and "consents" tabs. The overview tab properly handles the permission case by rendering an EmptyState with the i18n keyno_permission_to_view_clinical_dataand icon, so no blank page occurs.Likely an incorrect or invalid review comment.
145-155: Clarify whether tab components should individually check permissions or rely on parent visibility control.The
EncounterResponsesTabreceives acanAccessprop that gates its API queries, while other clinical data tabs (Observations, Medicines) rely solely on parent-level visibility control viacanReadClinicalData. This inconsistency arises becauseEncounterResponsesTabneeds to checkcanReadClinicalData || canReadSelectedEncounter, but its visibility is controlled by onlycanReadClinicalData.Review the intended permission model: either all tabs should extract and apply permission checks independently (like Files does with
canWriteSelectedEncounter), or all should rely on parent visibility control with the understanding that the parent's permission check is sufficient.
| useEffect(() => { | ||
| // escape from currentTab if it's visible is false | ||
| if (currentTab && tabs[currentTab].visible === false) { | ||
| onTabChange(allTabKeys[0]); | ||
| } | ||
| }, [currentTab, allTabKeys, tabs, onTabChange]); |
There was a problem hiding this comment.
Optimize useEffect dependencies to prevent unnecessary re-renders.
This effect's dependency array includes both tabs (an object likely recreated on each parent render) and allTabKeys (derived from tabs at line 80), causing the effect to fire on every render even when tab visibility hasn't changed. In a healthcare UI where performance is critical, this can cause unnecessary re-renders.
Additionally, the comment on line 88 contains a grammatical error: "it's visible is false" should read "if it is not visible" or "if its visible property is false."
Recommended fix
Remove allTabKeys from the dependency array (it's derived from tabs) and add a comment explaining the dependency choice:
useEffect(() => {
- // escape from currentTab if it's visible is false
+ // Switch to first visible tab if current tab becomes invisible
if (currentTab && tabs[currentTab].visible === false) {
onTabChange(allTabKeys[0]);
}
- }, [currentTab, allTabKeys, tabs, onTabChange]);
+ }, [currentTab, tabs, onTabChange]);Additional consideration: If tabs is recreated on every parent render, consider asking the parent to memoize it with useMemo, or derive a visibility map inside this component and use that in the dependency array instead.
🤖 Prompt for AI Agents
In @src/components/ui/nav-tabs.tsx around lines 87-92, The useEffect that guards
against selecting a non-visible tab (useEffect referencing currentTab, tabs,
allTabKeys, onTabChange) should stop depending on allTabKeys (it's derived from
tabs) to avoid firing every render; update the dependency array to [currentTab,
tabs, onTabChange] (or better, derive a visibility map inside this component and
depend on that), and fix the inline comment to read "if its visible property is
false" or "if it is not visible"; also add a brief comment noting that if the
parent recreates tabs each render it should memoize tabs with useMemo.
Proposed Changes
Tagging: @ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.