Added breadcrumbs #14975
Added breadcrumbs #14975
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. WalkthroughAdds a new Changes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Repository UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (2)
🧰 Additional context used📓 Path-based instructions (14)**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursorrules)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (.cursorrules)
Files:
**/*.{tsx,jsx}📄 CodeRabbit inference engine (.cursorrules)
Files:
src/**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/components/**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{ts,tsx,css}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{tsx,ts}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{tsx,css}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/*📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.tsx📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
Files:
**/*.{tsx,ts}📄 CodeRabbit inference engine (.cursor/rules/04-ui-components.mdc)
Files:
**/*.{ts,tsx,js,jsx,json,css,scss,html}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.ts📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
Files:
**/*.spec.ts📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
Files:
🧠 Learnings (53)📓 Common learnings📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-25T13:54:09.978ZApplied to files:
📚 Learning: 2024-11-20T22:59:16.946ZApplied to files:
📚 Learning: 2024-11-05T16:59:23.732ZApplied to files:
📚 Learning: 2024-11-20T23:25:06.602ZApplied to files:
📚 Learning: 2025-08-15T19:51:24.937ZApplied to files:
📚 Learning: 2025-02-04T07:18:45.806ZApplied to files:
📚 Learning: 2025-05-21T06:00:57.699ZApplied to files:
📚 Learning: 2025-05-02T22:40:04.938ZApplied to files:
📚 Learning: 2025-03-03T05:00:04.480ZApplied to files:
📚 Learning: 2025-10-07T08:56:41.983ZApplied to files:
📚 Learning: 2025-11-25T13:49:43.065ZApplied to files:
📚 Learning: 2025-11-25T13:50:10.786ZApplied to files:
📚 Learning: 2025-11-25T13:54:35.875ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:50:46.407ZApplied to files:
📚 Learning: 2025-11-25T13:50:46.407ZApplied to files:
📚 Learning: 2025-11-25T13:53:40.623ZApplied to files:
📚 Learning: 2025-11-25T13:50:46.407ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-25T13:54:35.875ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-25T13:50:46.407ZApplied to files:
📚 Learning: 2025-11-25T13:54:35.875ZApplied to files:
📚 Learning: 2024-11-26T09:46:12.574ZApplied to files:
📚 Learning: 2025-11-25T13:50:10.786ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-17T13:53:03.929ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:54:43.264ZApplied to files:
📚 Learning: 2025-11-25T13:53:57.496ZApplied to files:
📚 Learning: 2025-11-25T13:53:49.727ZApplied to files:
📚 Learning: 2025-11-25T13:49:43.065ZApplied to files:
📚 Learning: 2025-11-25T13:53:49.727ZApplied to files:
📚 Learning: 2025-03-04T13:11:05.207ZApplied to files:
📚 Learning: 2024-12-12T19:27:20.394ZApplied to files:
📚 Learning: 2024-11-28T04:24:30.394ZApplied to files:
📚 Learning: 2025-11-25T13:50:10.786ZApplied to files:
📚 Learning: 2025-12-17T19:47:58.152ZApplied to files:
📚 Learning: 2025-12-22T10:16:36.690ZApplied to files:
📚 Learning: 2024-12-05T04:20:20.231ZApplied to files:
📚 Learning: 2025-11-25T13:50:46.407ZApplied to files:
📚 Learning: 2024-11-18T10:46:56.270ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2024-11-14T08:09:58.453ZApplied to files:
📚 Learning: 2024-12-15T17:02:16.697ZApplied to files:
🧬 Code graph analysis (1)src/components/Common/Breadcrumbs.tsx (3)
🪛 Biome (2.1.2)src/components/Common/Breadcrumbs.tsx[error] 145-148: Static Elements should not be interactive. To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value. (lint/a11y/noStaticElementInteractions) [error] 145-148: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation. (lint/a11y/useKeyWithClickEvents) ⏰ 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)
🔇 Additional comments (1)
Comment |
There was a problem hiding this comment.
Pull request overview
This PR introduces a breadcrumb navigation system to improve user navigation across the application. The implementation adds a new Breadcrumbs component that displays the navigation path and a back button, with the ability to hide breadcrumbs on specific pages where they are not needed.
Key Changes:
- Added new
Breadcrumbscomponent with intelligent path parsing and UUID handling - Integrated breadcrumbs into the
Pagecomponent with ahideBreadcrumbsprop - Updated multiple pages to hide breadcrumbs where custom navigation is already present
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/Common/Breadcrumbs.tsx | New component implementing breadcrumb navigation with path parsing, resource identification, and UUID formatting |
| src/components/Common/Page.tsx | Added breadcrumb integration with conditional rendering via hideBreadcrumbs prop |
| src/pages/Facility/overview.tsx | Hidden breadcrumbs on facility overview page |
| src/pages/Facility/services/FacilityServices.tsx | Hidden breadcrumbs on services page |
| src/pages/Facility/queues/QueuesIndex.tsx | Hidden breadcrumbs on queues page |
| src/pages/Facility/billing/account/AccountShow.tsx | Wrapped component in Page with hidden breadcrumbs, replaced BackButton with Page-level navigation |
| src/pages/Facility/billing/account/AccountList.tsx | Hidden breadcrumbs on account list |
| src/pages/Facility/billing/invoice/InvoiceList.tsx | Hidden breadcrumbs on invoice list |
| src/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsx | Hidden breadcrumbs on payment reconciliation list |
| src/pages/Encounters/EncounterShow.tsx | Hidden breadcrumbs on encounter detail page |
| src/pages/Encounters/EncounterList.tsx | Hidden breadcrumbs on encounter list |
| src/components/Resource/ResourceList.tsx | Hidden breadcrumbs on resource list |
| src/components/Patient/PatientHome.tsx | Hidden breadcrumbs on patient home |
| src/components/Facility/FacilityUsers.tsx | Hidden breadcrumbs on facility users page |
| function isResourceName(segment: string): boolean { | ||
| // Check if it's a known resource or follows kebab-case pattern | ||
| return ( | ||
| /^[a-z_]+$/.test(segment) && | ||
| !isUuid(segment) && | ||
| Object.keys(RESOURCE_LABELS).includes(segment) | ||
| ); | ||
| } |
There was a problem hiding this comment.
The function comment mentions 'follows kebab-case pattern' but the regex /^[a-z_]+$/ only matches snake_case (underscores), not kebab-case (hyphens). Either update the regex to /^[a-z-]+$/ to match kebab-case, or update the comment to say 'snake_case pattern'.
| if (isResourceName(segment)) { | ||
| const currentPath = `/${segments.slice(0, i + 1).join("/")}`; | ||
| breadcrumbs.push({ | ||
| label: RESOURCE_LABELS[segment], |
There was a problem hiding this comment.
Missing fallback for when RESOURCE_LABELS[segment] is undefined. Unlike lines 82, 84, and 95 which provide fallbacks like segment.replace(/_/g, ' '), this line will set label to undefined if the segment is not in RESOURCE_LABELS, potentially causing display issues.
| label: RESOURCE_LABELS[segment], | |
| label: RESOURCE_LABELS[segment] || segment.replace(/_/g, " "), |
| const RESOURCE_LABELS: Record<string, string> = { | ||
| account: "account", | ||
| invoices: "invoices", | ||
| patient: "patient", | ||
| encounter: "encounter", | ||
| locations: "location", | ||
| services: "service", | ||
| settings: "settings", | ||
| users: "users", | ||
| patients: "patients", | ||
| encounters: "encounters", | ||
| }; |
There was a problem hiding this comment.
Several resource labels are identical to their keys (account, invoices, patient, encounter, settings, users, patients, encounters). Consider whether these need to be explicitly mapped or if a fallback transformation would suffice for most cases, reducing maintenance burden.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/Facility/billing/account/AccountShow.tsx (1)
684-692: Variable nameisNegativeis misleading.The condition
balance > 0checks for a positive outstanding balance, but the variable is namedisNegative. Consider renaming tohasOutstandingBalancefor clarity.🔎 Proposed fix
const ClosedCallout = ({ balance }: { balance: number }) => { const { t } = useTranslation(); - const isNegative = balance > 0; - if (!isNegative) return <></>; + const hasOutstandingBalance = balance > 0; + if (!hasOutstandingBalance) return <></>; return (
📜 Review details
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (14)
src/components/Common/Breadcrumbs.tsxsrc/components/Common/Page.tsxsrc/components/Facility/FacilityUsers.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Resource/ResourceList.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/pages/Facility/billing/account/AccountList.tsxsrc/pages/Facility/billing/account/AccountShow.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/pages/Facility/services/FacilityServices.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/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.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/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
Use declarative JSX
Files:
src/pages/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.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/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.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/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.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/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/pages/Facility/billing/account/AccountShow.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/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.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/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Use 2-space indentation
Files:
src/pages/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.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/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.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/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.tsx
**/*.{ts,tsx,js,jsx,json,css,scss,html}
📄 CodeRabbit inference engine (AGENTS.md)
Use 2-space indentation
Files:
src/pages/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.tsx
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/Common/Page.tsxsrc/components/Common/Breadcrumbs.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsx
🧠 Learnings (56)
📓 Common learnings
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Page component architecture and routing patterns must follow pages.instructions.md
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 12117
File: public/locale/en.json:2993-2996
Timestamp: 2025-05-21T06:00:57.699Z
Learning: Jacobjeevan prefers to keep i18n translation keys generic (without feature-specific prefixes) when possible to allow for reuse across different parts of the application.
📚 Learning: 2025-08-10T10:20:32.921Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 13316
File: src/pages/Facility/settings/productKnowledge/ProductKnowledgeView.tsx:63-65
Timestamp: 2025-08-10T10:20:32.921Z
Learning: In the ProductKnowledgeView component at src/pages/Facility/settings/productKnowledge/ProductKnowledgeView.tsx, the loading state should return only the Loading component without wrapping it in a Page shell. This is the expected behavior to provide a cleaner loading experience without maintaining the page layout during data fetching.
Applied to files:
src/pages/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Facility/FacilityUsers.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/Facility/billing/account/AccountList.tsxsrc/pages/Facility/overview.tsxsrc/components/Common/Page.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/EncounterList.tsxsrc/components/Facility/FacilityUsers.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/Facility/billing/account/AccountList.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/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.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/Facility/billing/account/AccountList.tsxsrc/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Facility/queues/QueuesIndex.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsxsrc/components/Resource/ResourceList.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.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/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Patient/PatientHome.tsxsrc/components/Facility/FacilityUsers.tsxsrc/pages/Facility/billing/account/AccountShow.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/**/FacilityContext.tsx : Implement Facility Context for department location and resource availability
Applied to files:
src/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/components/Facility/FacilityUsers.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} : Set appropriate page titles and meta descriptions in page components
Applied to files:
src/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/components/Common/Page.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 cleanly with healthcare data sources and support live data updates for critical medical information
Applied to files:
src/pages/Facility/services/FacilityServices.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/Facility/services/FacilityServices.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} : Implement proper data validation for medical information in page components
Applied to files:
src/pages/Facility/services/FacilityServices.tsxsrc/components/Patient/PatientHome.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/Facility/services/FacilityServices.tsxsrc/components/Patient/PatientHome.tsxsrc/pages/Facility/billing/account/AccountShow.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} : Optimize CAREUI components for memory efficiency for long-running clinical applications
Applied to files:
src/pages/Facility/services/FacilityServices.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} : Optimize bundle size with proper imports in page components
Applied to files:
src/pages/Facility/services/FacilityServices.tsxsrc/pages/Facility/overview.tsxsrc/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.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} : Keep page components in `src/pages/` organized by feature
Applied to files:
src/pages/Facility/overview.tsxsrc/components/Facility/FacilityUsers.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} : Co-locate page-specific components and utilities with page components
Applied to files:
src/pages/Facility/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} : Minimize unnecessary re-renders in page components
Applied to files:
src/pages/Facility/overview.tsxsrc/components/Common/Page.tsxsrc/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} : Export page components as default exports
Applied to files:
src/pages/Facility/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/Facility/queues/QueuesIndex.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} : Provide skip links for screen readers in page components
Applied to files:
src/components/Common/Page.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/components/Common/Breadcrumbs.tsxsrc/pages/Encounters/EncounterList.tsxsrc/components/Resource/ResourceList.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} : Implement code splitting for large page components
Applied to files:
src/components/Common/Page.tsxsrc/components/Common/Breadcrumbs.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 pagination and infinite scroll patterns appropriately
Applied to files:
src/components/Common/Page.tsxsrc/pages/Facility/billing/invoice/InvoiceList.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} : Implement structured data where applicable in page components
Applied to files:
src/components/Common/Page.tsxsrc/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} : Implement proper loading states and error boundaries in page components
Applied to files:
src/components/Common/Page.tsxsrc/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} : Ensure keyboard navigation works properly in page components
Applied to files:
src/components/Common/Page.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/Common/Page.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 `cn()` from `@/lib/utils` for conditional class composition
Applied to files:
src/components/Common/Page.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/Common/Page.tsxsrc/components/Common/Breadcrumbs.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 Shadcn UI components as the primary component library
Applied to files:
src/components/Common/Page.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} : Import `useTranslation` from `react-i18next` for internationalization
Applied to files:
src/components/Common/Page.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/pages/**/*.{ts,tsx} : Use raviger for application routing in page components and route definitions
Applied to files:
src/components/Common/Page.tsxsrc/components/Common/Breadcrumbs.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 `raviger` router for navigation (existing dependency)
Applied to files:
src/components/Common/Page.tsxsrc/components/Common/Breadcrumbs.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} : Implement proper authentication checks in page components
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/components/Facility/FacilityUsers.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 semantic HTML structure for accessibility in page components
Applied to files:
src/pages/Encounters/EncounterShow.tsxsrc/pages/Encounters/EncounterList.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 navigation guards and authentication checks in page components
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/**/*.{ts,tsx} : Maintain audit trails for HIPAA compliance in context implementations
Applied to files:
src/components/Common/Breadcrumbs.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/components/Common/Breadcrumbs.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/components/Common/Breadcrumbs.tsxsrc/components/Patient/PatientHome.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} : Follow established React component patterns and folder structure organized by feature and domain
Applied to files:
src/components/Common/Breadcrumbs.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 src/Routers/**/*.{tsx,ts} : Conditionally render sidebar based on `PATHS_WITHOUT_SIDEBAR` array to exclude specific routes from displaying sidebar
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsx
📚 Learning: 2024-11-13T12:33:52.373Z
Learnt from: AnveshNalimela
Repo: ohcnetwork/care_fe PR: 9096
File: src/components/Resource/ResourceList.tsx:245-245
Timestamp: 2024-11-13T12:33:52.373Z
Learning: When displaying the resource status in `ResourceList.tsx`, use `{t("consent__status")}` instead of adding a new translation key `{t("resource_status")}`.
Applied to files:
src/components/Resource/ResourceList.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/components/Patient/PatientHome.tsxsrc/pages/Facility/billing/account/AccountShow.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/components/Patient/PatientHome.tsxsrc/pages/Facility/billing/account/AccountShow.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/components/Patient/PatientHome.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/**/*PatientUserProvider*{.ts,.tsx} : PatientUserProvider should handle patient authentication for public appointment booking
Applied to files:
src/components/Patient/PatientHome.tsx
📚 Learning: 2024-12-02T18:50:29.685Z
Learnt from: kihan2518B
Repo: ohcnetwork/care_fe PR: 8956
File: src/components/Patient/PatientRegister.tsx:861-861
Timestamp: 2024-12-02T18:50:29.685Z
Learning: In `src/components/Patient/PatientRegister.tsx`, `insuranceDetails` is not part of `state.form`, so changes to it are not tracked by the `isDirty` state. Therefore, the form's `disabled` state needs to be conditionally set based on `insuranceDetails.length`.
Applied to files:
src/components/Patient/PatientHome.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/components/Patient/PatientHome.tsx
📚 Learning: 2024-11-12T12:06:30.851Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/LinkedFacilitiesTab.tsx:7-11
Timestamp: 2024-11-12T12:06:30.851Z
Learning: In `src/components/Users/LinkedFacilitiesTab.tsx`, the `username` prop is used when passing it to the `userColumns` function, so it should not be considered unused.
Applied to files:
src/components/Facility/FacilityUsers.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 different user roles and permissions in page components
Applied to files:
src/components/Facility/FacilityUsers.tsx
📚 Learning: 2024-11-05T18:58:19.072Z
Learnt from: sainak
Repo: ohcnetwork/care_fe PR: 8979
File: src/Routers/SessionRouter.tsx:1-8
Timestamp: 2024-11-05T18:58:19.072Z
Learning: In `src/Routers/SessionRouter.tsx`, the `LicensesPage` component opens in a new page and is correctly handled by the top-level `Suspense`, so wrapping it in a `Suspense` component within `SessionRouter.tsx` is unnecessary.
Applied to files:
src/components/Facility/FacilityUsers.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} : Cache data appropriately in page components based on usage patterns
Applied to files:
src/components/Facility/FacilityUsers.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} : Implement `TagAssignmentSheet` with `TagEntityType` for patient/facility tags
Applied to files:
src/pages/Facility/billing/account/AccountShow.tsx
📚 Learning: 2025-04-11T20:28:51.054Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 11884
File: src/pages/Landing/LandingPage.tsx:128-158
Timestamp: 2025-04-11T20:28:51.054Z
Learning: The LoginHeader component uses the AuthContext for authentication and includes the SignCompact component, making it incompatible with the token-based authentication flow used in the LandingPage. The custom header implementation in LandingPage is specifically designed for patient authentication with different navigation targets (/patient/home vs /dashboard) and different user information display.
Applied to files:
src/pages/Facility/billing/account/AccountShow.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/Facility/billing/account/AccountShow.tsx
📚 Learning: 2024-11-22T12:04:39.044Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/UserSummary.tsx:53-71
Timestamp: 2024-11-22T12:04:39.044Z
Learning: In the `UserSummaryTab` component (`src/components/Users/UserSummary.tsx`), when there is an error during user deletion, the delete dialog is intentionally closed to prevent the user from immediately trying to delete the user again.
Applied to files:
src/pages/Facility/billing/account/AccountShow.tsx
🧬 Code graph analysis (7)
src/pages/Facility/services/FacilityServices.tsx (1)
src/components/Common/Page.tsx (1)
Page(18-37)
src/pages/Facility/overview.tsx (1)
src/components/Common/Page.tsx (1)
Page(18-37)
src/pages/Facility/queues/QueuesIndex.tsx (1)
src/components/Common/Page.tsx (1)
Page(18-37)
src/components/Common/Page.tsx (3)
src/context/ShortcutContext.tsx (1)
useShortcutSubContext(200-212)src/lib/utils.ts (1)
cn(4-6)src/components/Common/Breadcrumbs.tsx (1)
Breadcrumbs(114-164)
src/pages/Facility/billing/invoice/InvoiceList.tsx (1)
src/components/Common/Page.tsx (1)
Page(18-37)
src/components/Common/Breadcrumbs.tsx (3)
src/hooks/useAppHistory.ts (1)
useAppHistory(9-35)src/components/ui/separator.tsx (1)
Separator(27-27)src/components/ui/breadcrumb.tsx (5)
Breadcrumb(107-107)BreadcrumbList(111-111)BreadcrumbItem(109-109)BreadcrumbLink(110-110)BreadcrumbSeparator(113-113)
src/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsx (1)
src/components/Common/Page.tsx (1)
Page(18-37)
🪛 Biome (2.1.2)
src/components/Common/Breadcrumbs.tsx
[error] 139-142: Static Elements should not be interactive.
To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.
(lint/a11y/noStaticElementInteractions)
[error] 139-142: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
⏰ 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). (4)
- GitHub Check: build
- GitHub Check: Test
- GitHub Check: lint
- GitHub Check: CodeQL-Build
🔇 Additional comments (14)
src/components/Patient/PatientHome.tsx (1)
91-91: Breadcrumbs hidden on patient details page.This follows the same pattern as other pages in this PR. Please ensure that hiding breadcrumbs on the patient details page aligns with the design intent and doesn't negatively impact clinical workflows where providers need to quickly navigate between facility, patient, and encounter contexts.
src/pages/Facility/billing/account/AccountList.tsx (1)
162-162: Implementation follows the established pattern.The hideBreadcrumbs prop is correctly applied here. However, verify that removing breadcrumbs from billing/financial pages doesn't impact users who need to navigate between facility, account, and invoice contexts.
src/components/Resource/ResourceList.tsx (1)
110-110: Implementation is correct.The hideBreadcrumbs prop is properly applied. Ensure this aligns with the overall breadcrumb visibility strategy for the application.
src/pages/Facility/services/FacilityServices.tsx (1)
41-41: Correct implementation.The hideBreadcrumbs prop is correctly used here, consistent with the pattern across the PR.
src/pages/Encounters/EncounterShow.tsx (1)
223-223: Verify breadcrumb removal on clinical encounter pages.The encounter details page is critical for clinical workflows. Providers often need to navigate between facility, patient, and encounter contexts quickly. Please verify that hiding breadcrumbs here doesn't negatively impact clinical usability and emergency care scenarios.
src/pages/Facility/billing/invoice/InvoiceList.tsx (1)
45-45: Implementation is correct.The hideBreadcrumbs prop is properly applied, following the established pattern.
src/pages/Facility/billing/paymentReconciliation/PaymentReconciliationList.tsx (1)
29-29: Correct implementation of the breadcrumb visibility pattern.The hideBreadcrumbs prop is correctly applied here. As with all other pages in this PR, please ensure this change has been validated against the design specifications and user testing feedback.
src/pages/Facility/overview.tsx (1)
97-97: LGTM!Hiding breadcrumbs on the facility overview page is appropriate since this serves as the facility's home/landing page where breadcrumbs would be redundant.
src/pages/Encounters/EncounterList.tsx (1)
271-271: LGTM!The
hideBreadcrumbsprop is correctly applied to the Page component.src/components/Facility/FacilityUsers.tsx (1)
85-85: LGTM!The
hideBreadcrumbsprop is correctly applied.src/components/Common/Page.tsx (1)
3-3: LGTM!Clean implementation of conditional breadcrumb rendering. The default behavior correctly shows breadcrumbs unless explicitly hidden via the
hideBreadcrumbsprop.Also applies to: 15-15, 23-23
src/pages/Facility/billing/account/AccountShow.tsx (2)
56-56: LGTM!The Page wrapper is correctly applied with
hideTitleOnPageto suppress the page title display while allowing breadcrumbs to show (nohideBreadcrumbsprop). This aligns with the design where detail pages show breadcrumbs for navigation context.Also applies to: 261-261
641-647: Consider explicit i18n calls to ensure cleanup script detects keys.All four translation keys (
close_account_help_closed_baddebt,close_account_help_closed_voided,close_account_help_closed_completed,close_account_help_closed_combined) are present inpublic/locale/en.json. However, accessing them through theclosedStatusTextobject lookup may not be detectable by the i18n cleanup script, which primarily tracks directt()calls with string literals. To ensure these keys are not flagged as unused in future cleanup runs, either add explicitt()calls elsewhere (e.g., in a comment or unused block) or refactor to use separatet()calls per branch.src/components/Common/Breadcrumbs.tsx (1)
20-32: The resource labels are correctly configured. All values inRESOURCE_LABELSthat are passed tot()have corresponding translation keys in the locale files: "account", "invoices", "patient", "encounter", "location", "service", "settings", "users", "patients", and "encounters". The mapping of plural keys (e.g., "locations") to singular values (e.g., "location") is intentional and semantically correct—URL segments use plural form while display labels use singular form. No action needed.Likely an incorrect or invalid review comment.
| BreadcrumbSeparator, | ||
| } from "@/components/ui/breadcrumb"; | ||
| import useAppHistory from "@/hooks/useAppHistory"; | ||
| import { Separator } from "@radix-ui/react-separator"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use the local Separator component instead of importing directly from Radix.
The project has a local @/components/ui/separator component that should be used for consistency. Other files in the PR use this pattern.
🔎 Proposed fix
-import { Separator } from "@radix-ui/react-separator";
+import { Separator } from "@/components/ui/separator";🤖 Prompt for AI Agents
In src/components/Common/Breadcrumbs.tsx around line 9, the file imports
Separator from "@radix-ui/react-separator"; replace this with the project's
local component import (import Separator from "@/components/ui/separator" or the
named export used across the repo) to maintain consistency—remove the Radix
import and update the import path to the local "@/components/ui/separator"
module, then ensure any usage/props match the local component's API.
| function buildBreadcrumbs(segments: string[]): BreadcrumbItemProps[] { | ||
| const breadcrumbs: BreadcrumbItemProps[] = []; | ||
|
|
||
| for (let i = 0; i < segments.length; i++) { | ||
| const segment = segments[i]; | ||
| const nextSegment = i < segments.length - 1 ? segments[i + 1] : null; | ||
| const prevSegment = i > 0 ? segments[i - 1] : null; | ||
|
|
||
| if (i === 0 || i === 1) continue; | ||
|
|
||
| // Skip action/tab segments at the end | ||
| if (SKIP_SEGMENTS.has(segment)) continue; | ||
|
|
||
| // Handle UUIDs - show as separate breadcrumb with formatted ID | ||
| if (isUuid(segment) && prevSegment && isResourceName(prevSegment)) { | ||
| const currentPath = `/${segments.slice(0, i + 1).join("/")}`; | ||
| const resourceLabel = | ||
| RESOURCE_LABELS[prevSegment] || prevSegment.replace(/_/g, " "); | ||
| breadcrumbs.push({ | ||
| label: `${resourceLabel} ${formatIdLabel(segment)}`, | ||
| href: currentPath, | ||
| }); | ||
| continue; | ||
| } | ||
|
|
||
| // Handle resource name followed by UUID | ||
| // Add the resource collection page (e.g., /billing/account) | ||
| if (isResourceName(segment) && nextSegment && isUuid(nextSegment)) { | ||
| const currentPath = `/${segments.slice(0, i + 1).join("/")}`; | ||
| breadcrumbs.push({ | ||
| label: RESOURCE_LABELS[segment] || segment.replace(/_/g, " "), | ||
| href: currentPath, | ||
| }); | ||
| continue; | ||
| } | ||
|
|
||
| // Handle standalone resource names (e.g. account, patients, charge_items) | ||
| if (isResourceName(segment)) { | ||
| const currentPath = `/${segments.slice(0, i + 1).join("/")}`; | ||
| breadcrumbs.push({ | ||
| label: RESOURCE_LABELS[segment], | ||
| href: currentPath, | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| return breadcrumbs; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider memoizing buildBreadcrumbs for performance.
The buildBreadcrumbs function is called on every render. While the current implementation is lightweight, memoizing it with useMemo based on segments would prevent unnecessary recalculations.
🔎 Suggested approach in the component
+import { useMemo } from "react";
+
export function Breadcrumbs() {
const { t } = useTranslation();
const { goBack } = useAppHistory();
const { facilityId } = usePathParams("/facility/:facilityId/*") ?? {};
const path = usePath();
const segments = path?.split("/").filter(Boolean) || [];
- const breadcrumbs: BreadcrumbItemProps[] = [];
-
- if (facilityId && segments.length > 1) {
- breadcrumbs.push({
- label: "home",
- href: `/facility/${facilityId}/overview`,
- });
-
- const additionalBreadcrumbs = buildBreadcrumbs(segments);
- breadcrumbs.push(...additionalBreadcrumbs);
- }
+ const breadcrumbs = useMemo(() => {
+ const items: BreadcrumbItemProps[] = [];
+ if (facilityId && segments.length > 1) {
+ items.push({
+ label: "home",
+ href: `/facility/${facilityId}/overview`,
+ });
+ items.push(...buildBreadcrumbs(segments));
+ }
+ return items;
+ }, [facilityId, segments]);Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/components/Common/Breadcrumbs.tsx around lines 65 to 112,
buildBreadcrumbs is pure but is being recomputed on every render; wrap its
invocation in React.useMemo so breadcrumbs are only recalculated when the
segments array changes. In the component where buildBreadcrumbs is called,
import useMemo and replace direct calls with const breadcrumbs = useMemo(() =>
buildBreadcrumbs(segments), [segments]); ensure segments is the same reference
or derived from props/location so the dependency is correct; no other logic
changes to buildBreadcrumbs are necessary.
| <div className="flex items-center gap-2"> | ||
| <ChevronLeft className="size-4" /> | ||
| <span | ||
| onClick={() => goBack()} | ||
| className="text-sm text-gray-500 hover:cursor-pointer" | ||
| > | ||
| {t("back")} | ||
| </span> | ||
| </div> |
There was a problem hiding this comment.
Fix accessibility: interactive span lacks keyboard support.
The "back" button uses a <span> with onClick but no keyboard accessibility. This violates WCAG guidelines and was flagged by static analysis. Users navigating with keyboards cannot activate this control.
🔎 Proposed fix
- <div className="flex items-center gap-2">
- <ChevronLeft className="size-4" />
- <span
- onClick={() => goBack()}
- className="text-sm text-gray-500 hover:cursor-pointer"
- >
- {t("back")}
- </span>
- </div>
+ <button
+ type="button"
+ onClick={() => goBack()}
+ className="flex items-center gap-2 text-sm text-gray-500 hover:cursor-pointer"
+ >
+ <ChevronLeft className="size-4" />
+ {t("back")}
+ </button>Using a <button> element provides native keyboard support (Enter/Space activation), focus management, and proper semantics for assistive technologies.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="flex items-center gap-2"> | |
| <ChevronLeft className="size-4" /> | |
| <span | |
| onClick={() => goBack()} | |
| className="text-sm text-gray-500 hover:cursor-pointer" | |
| > | |
| {t("back")} | |
| </span> | |
| </div> | |
| <button | |
| type="button" | |
| onClick={() => goBack()} | |
| className="flex items-center gap-2 text-sm text-gray-500 hover:cursor-pointer" | |
| > | |
| <ChevronLeft className="size-4" /> | |
| {t("back")} | |
| </button> |
🧰 Tools
🪛 Biome (2.1.2)
[error] 139-142: Static Elements should not be interactive.
To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.
(lint/a11y/noStaticElementInteractions)
[error] 139-142: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
🤖 Prompt for AI Agents
In src/components/Common/Breadcrumbs.tsx around lines 137 to 145, the "back"
control is implemented as a <span> with an onClick which lacks keyboard
accessibility; replace the span with a <button type="button"> preserving the
existing className and onClick (onClick={() => goBack()}), add an appropriate
aria-label if the visible text isn’t sufficient (e.g., aria-label={t("back")}),
and remove any tabindex/role hacks—this yields native keyboard support
(Enter/Space), correct semantics, and keeps the original styling and behavior.
| setCloseAccountStatus({ ...closeAccountStatus, sheetOpen: open }) | ||
| } | ||
| > | ||
| <DialogHeader></DialogHeader> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Remove empty DialogHeader element.
The empty <DialogHeader></DialogHeader> serves no purpose and should be removed for cleaner markup.
🔎 Proposed fix
<Dialog
open={closeAccountStatus.sheetOpen}
onOpenChange={(open) =>
setCloseAccountStatus({ ...closeAccountStatus, sheetOpen: open })
}
>
- <DialogHeader></DialogHeader>
<DialogContent>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <DialogHeader></DialogHeader> | |
| <Dialog | |
| open={closeAccountStatus.sheetOpen} | |
| onOpenChange={(open) => | |
| setCloseAccountStatus({ ...closeAccountStatus, sheetOpen: open }) | |
| } | |
| > | |
| <DialogContent> |
🤖 Prompt for AI Agents
In src/pages/Facility/billing/account/AccountShow.tsx around line 638, there is
an empty <DialogHeader></DialogHeader> element that serves no purpose; remove
that empty element to clean up the JSX markup and adjust surrounding
indentation/whitespace as needed so the component remains valid and formatted.
|
|
||
| return ( | ||
| <Page title={t("token_queues")} hideTitleOnPage> | ||
| <Page title={t("token_queues")} hideTitleOnPage hideBreadcrumbs> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
🧩 Analysis chain
🏁 Script executed:
# First, let's examine the QueuesIndex.tsx file around line 308
cd /repo
head -320 src/pages/Facility/queues/QueuesIndex.tsx | tail -30Repository: ohcnetwork/care_fe
Length of output: 1349
🏁 Script executed:
# Search for all uses of hideBreadcrumbs in the codebase
rg "hideBreadcrumbs" --type ts --type tsx -B 2 -A 2Repository: ohcnetwork/care_fe
Length of output: 89
🏁 Script executed:
# Find the Page component to understand its breadcrumb implementation
fd "Page" -e tsx -e ts | grep -E "(components|Page\.tsx)" | head -20Repository: ohcnetwork/care_fe
Length of output: 428
🏁 Script executed:
# Check if there's any documentation or comments about breadcrumb usage
rg "breadcrumb" --type ts --type tsx -i -B 1 -A 1Repository: ohcnetwork/care_fe
Length of output: 89
🏁 Script executed:
# Look for PR comments or design documentation references
find . -type f \( -name "*.md" -o -name "*.txt" \) | xargs grep -l "14974\|breadcrumb\|hideBreadcrumbs" 2>/dev/null | head -10Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Search for hideBreadcrumbs usage across the codebase (fixing file type flag)
rg "hideBreadcrumbs" -A 2 -B 2Repository: ohcnetwork/care_fe
Length of output: 6301
🏁 Script executed:
# Examine the Page component implementation
cat -n src/components/Common/Page.tsx | head -100Repository: ohcnetwork/care_fe
Length of output: 1547
🏁 Script executed:
# Count how many files use hideBreadcrumbs
rg "hideBreadcrumbs" -l | wc -lRepository: ohcnetwork/care_fe
Length of output: 64
🏁 Script executed:
# Get a list of all files using hideBreadcrumbs
rg "hideBreadcrumbs" -lRepository: ohcnetwork/care_fe
Length of output: 687
🏁 Script executed:
# Search for breadcrumb-related code in Page component
rg "breadcrumb\|Breadcrumb" -i src/components/Common/Page.tsxRepository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Check git history or comments around the Page component for context
cat -n src/components/Common/Page.tsx | grep -A 10 -B 10 "breadcrumb\|Breadcrumb" -iRepository: ohcnetwork/care_fe
Length of output: 1478
🏁 Script executed:
# Check if hideBreadcrumbs was recently added to Page.tsx
git log --oneline -p src/components/Common/Page.tsx | head -100Repository: ohcnetwork/care_fe
Length of output: 1543
🏁 Script executed:
# Check git blame for when hideBreadcrumbs was added to Page.tsx
git log --oneline src/components/Common/Page.tsx | head -10Repository: ohcnetwork/care_fe
Length of output: 88
🏁 Script executed:
# Check how many files were modified in this PR to use hideBreadcrumbs
git diff --name-only HEAD~1 | grep -E "\.(tsx?|jsx?)$"Repository: ohcnetwork/care_fe
Length of output: 248
🏁 Script executed:
# Get more context about the PR scope - check changed files
git log --oneline -1Repository: ohcnetwork/care_fe
Length of output: 88
🏁 Script executed:
# Check the Breadcrumbs component to understand its implementation and accessibility
cat -n src/components/Common/Breadcrumbs.tsx | head -80Repository: ohcnetwork/care_fe
Length of output: 2843
🏁 Script executed:
# Check the commit that added hideBreadcrumbs to see if there's a commit message
git log --all --grep="breadcrumb\|hideBreadcrumbs" --onelineRepository: ohcnetwork/care_fe
Length of output: 88
🏁 Script executed:
# Look at when hideBreadcrumbs was added to these specific pages - check their git history
git log --oneline src/pages/Facility/queues/QueuesIndex.tsx | head -5Repository: ohcnetwork/care_fe
Length of output: 88
🏁 Script executed:
# Check if there's a specific pattern - are these pages typically top-level pages?
grep -r "hideBreadcrumbs" --include="*.tsx" -B 5 -A 1 | grep -E "export|function|const.*=" | head -30Repository: ohcnetwork/care_fe
Length of output: 897
🏁 Script executed:
# Look for any documentation or comments explaining the design decision
rg "breadcrumb|Breadcrumb" -i --type ts --type tsx src/components/Common/ -B 3 -A 3Repository: ohcnetwork/care_fe
Length of output: 89
🏁 Script executed:
# Check accessibility attributes on the Breadcrumbs component
cat src/components/Common/Breadcrumbs.tsx | grep -i "aria\|role\|nav"Repository: ohcnetwork/care_fe
Length of output: 179
🏁 Script executed:
# Let's check when these pages were modified to add hideBreadcrumbs
git log --all --oneline -- src/pages/Facility/queues/QueuesIndex.tsx src/pages/Facility/services/FacilityServices.tsx src/pages/Encounters/EncounterList.tsx | head -20Repository: ohcnetwork/care_fe
Length of output: 157
🏁 Script executed:
# Check if this is part of a specific recent commit or a longer pattern
git log --all --oneline --format="%h %s" | head -20Repository: ohcnetwork/care_fe
Length of output: 157
🏁 Script executed:
# Examine the full Breadcrumbs component to check for accessibility attributes
cat -n src/components/Common/Breadcrumbs.tsxRepository: ohcnetwork/care_fe
Length of output: 6000
🏁 Script executed:
# Check if there's a PR description or issue number mentioned in recent commits
git log --all --format="%h %s %b" | head -100Repository: ohcnetwork/care_fe
Length of output: 159
🏁 Script executed:
# Check the full context of the initial commit to understand the design intent
git show dc5e4db2 --stat | head -50Repository: ohcnetwork/care_fe
Length of output: 2943
🏁 Script executed:
# Look for any PR comments or documentation
git log --all --format="%B" dc5e4db2Repository: ohcnetwork/care_fe
Length of output: 142
🏁 Script executed:
# Check if "overview" is consistently treated to understand the pattern
grep -r "overview" src/pages/Facility/ --include="*.tsx" | grep -i "hideTitle\|hideBreadcrumb"Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Check if there's any documentation or comment in commits about design decisions
git log --all --oneline --grep="design\|Figma\|mobile" | head -20Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Verify the actual scope - see how many commits were in this feature
git log --all --oneline | grep -i "breadcrumb\|queue\|service\|invoice\|account\|encounter" | head -30Repository: ohcnetwork/care_fe
Length of output: 88
🏁 Script executed:
# Check if the BreadcrumbList component from shadcn has proper nav role
cat src/components/ui/breadcrumb.tsx 2>/dev/null || echo "File not found"Repository: ohcnetwork/care_fe
Length of output: 2621
Add documentation explaining the breadcrumb visibility strategy.
The hideBreadcrumbs implementation across 14 pages (queues, services, encounters, billing pages, etc.) appears intentional and uses proper accessibility attributes (nav with aria-label, aria-current="page" on current breadcrumb). However, there is no comment or design documentation explaining the criteria for when breadcrumbs should be hidden vs. shown.
Consider adding a brief comment to the Page component (or in a design guidelines document) clarifying why certain page types hide breadcrumbs and which pages should follow this pattern in the future. This will help maintain consistency as new pages are added.
🤖 Prompt for AI Agents
In src/pages/Facility/queues/QueuesIndex.tsx around line 308, add a brief inline
comment above the Page component explaining the breadcrumb visibility strategy:
state that certain primary index/listing pages (queues, services, encounters,
billing, etc.) intentionally hide breadcrumbs to reduce visual clutter and rely
on page title and accessible nav attributes, and reference the central design
guideline file or doc path (e.g., DESIGN_GUIDELINES.md) where the full criteria
for when to hide vs. show breadcrumbs is documented; keep the comment concise
and include guidance for future pages to follow this pattern.
🎭 Playwright Test ResultsStatus: ✅ Passed
📊 Detailed results are available in the playwright-final-report artifact. Run: #4173 |
|
Conflicts have been detected against the base branch. Please merge the base branch into your branch.
|
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/Facility/billing/account/AccountShow.tsx (1)
270-416: Significant code duplication between responsive layouts.The desktop (lines 271-347) and mobile (lines 349-416) action button sections duplicate the same functionality with only minor differences in labels and layout classes. This violates the DRY principle and increases maintenance burden—any logic change requires updating both sections.
🔎 Suggested approach to eliminate duplication
Extract the action buttons into a reusable component or use a single conditional rendering block with responsive classes:
const isMobile = useBreakpoints({ default: true, lg: false }); <div className="flex gap-2 w-full lg:w-auto justify-end"> {account.status === AccountStatus.active && !isAccountBillingClosed && ( <> <Button variant={isMobile ? "outline" : "ghost"} className="lg:flex lg:gap-1 lg:items-center" onClick={() => setCloseAccountStatus({...closeAccountStatus, sheetOpen: true})} > <CareIcon icon="l-check" className="size-5 lg:size-5" /> <span className={cn("underline", {"hidden lg:inline": !isMobile})}> {t("settle_close")} </span> <ShortcutBadge actionId="settle-close-account" /> </Button> {/* Similar pattern for other buttons */} </> )} </div>Alternatively, extract common button logic into a separate component and pass display props.
♻️ Duplicate comments (1)
src/pages/Facility/billing/account/AccountShow.tsx (1)
639-639: Remove emptyDialogHeaderelement.The empty
<DialogHeader></DialogHeader>serves no purpose and should be removed for cleaner markup.🔎 Proposed fix
<Dialog open={closeAccountStatus.sheetOpen} onOpenChange={(open) => setCloseAccountStatus({ ...closeAccountStatus, sheetOpen: open }) } > - <DialogHeader></DialogHeader> <DialogContent>This issue was previously flagged in past review comments.
📜 Review details
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
src/pages/Appointments/AppointmentsPage.tsxsrc/pages/Encounters/EncounterShow.tsxsrc/pages/Facility/billing/account/AccountShow.tsx
🧰 Additional context used
📓 Path-based instructions (12)
**/*.{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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.tsxsrc/pages/Encounters/EncounterShow.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
Use declarative JSX
Files:
src/pages/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.tsxsrc/pages/Encounters/EncounterShow.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Use 2-space indentation
Files:
src/pages/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.tsxsrc/pages/Encounters/EncounterShow.tsx
🧠 Learnings (27)
📓 Common learnings
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} : Provide skip links for screen readers in page components
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 12117
File: public/locale/en.json:2993-2996
Timestamp: 2025-05-21T06:00:57.699Z
Learning: Jacobjeevan prefers to keep i18n translation keys generic (without feature-specific prefixes) when possible to allow for reuse across different parts of the application.
📚 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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.tsxsrc/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} : Use semantic HTML structure for accessibility in page components
Applied to files:
src/pages/Appointments/AppointmentsPage.tsxsrc/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/Appointments/AppointmentsPage.tsxsrc/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} : Minimize unnecessary re-renders in page components
Applied to files:
src/pages/Appointments/AppointmentsPage.tsxsrc/pages/Encounters/EncounterShow.tsx
📚 Learning: 2025-08-10T10:20:32.921Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 13316
File: src/pages/Facility/settings/productKnowledge/ProductKnowledgeView.tsx:63-65
Timestamp: 2025-08-10T10:20:32.921Z
Learning: In the ProductKnowledgeView component at src/pages/Facility/settings/productKnowledge/ProductKnowledgeView.tsx, the loading state should return only the Loading component without wrapping it in a Page shell. This is the expected behavior to provide a cleaner loading experience without maintaining the page layout during data fetching.
Applied to files:
src/pages/Appointments/AppointmentsPage.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} : Implement structured data where applicable in page components
Applied to files:
src/pages/Appointments/AppointmentsPage.tsxsrc/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/**/*PatientUserProvider*{.ts,.tsx} : PatientUserProvider should handle patient authentication for public appointment booking
Applied to files:
src/pages/Appointments/AppointmentsPage.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} : Implement proper data validation for medical information in page components
Applied to files:
src/pages/Appointments/AppointmentsPage.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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.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} : Ensure keyboard navigation works properly in page components
Applied to files:
src/pages/Appointments/AppointmentsPage.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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.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/Appointments/AppointmentsPage.tsxsrc/pages/Facility/billing/account/AccountShow.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} : Implement `TagAssignmentSheet` with `TagEntityType` for patient/facility tags
Applied to files:
src/pages/Facility/billing/account/AccountShow.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/Facility/billing/account/AccountShow.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/Facility/billing/account/AccountShow.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} : Follow `<Card><CardHeader>` pattern for consistent card layouts
Applied to files:
src/pages/Facility/billing/account/AccountShow.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:
src/pages/Facility/billing/account/AccountShow.tsx
📚 Learning: 2025-12-29T10:19:36.983Z
Learnt from: abhimanyurajeesh
Repo: ohcnetwork/care_fe PR: 14927
File: src/components/Tags/TagAssignmentSheet.tsx:130-132
Timestamp: 2025-12-29T10:19:36.983Z
Learning: In src/components/Tags/TagAssignmentSheet.tsx, the backend distinguishes facility tags from instance tags by populating the `facility` field on TagConfig: facility tags have a truthy `facility` value, while instance tags have null or undefined. The `tag.meta.is_facility_tag` field exists in type definitions but is not used by the backend for this discrimination.
Applied to files:
src/pages/Facility/billing/account/AccountShow.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/Facility/billing/account/AccountShow.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 shadcn/ui components as primary UI system (Button, Card, Badge, etc.) from `@/components/ui/`
Applied to files:
src/pages/Facility/billing/account/AccountShow.tsx
📚 Learning: 2024-11-22T12:04:39.044Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/UserSummary.tsx:53-71
Timestamp: 2024-11-22T12:04:39.044Z
Learning: In the `UserSummaryTab` component (`src/components/Users/UserSummary.tsx`), when there is an error during user deletion, the delete dialog is intentionally closed to prevent the user from immediately trying to delete the user again.
Applied to files:
src/pages/Facility/billing/account/AccountShow.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} : Set appropriate page titles and meta descriptions 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} : Provide skip links for screen readers 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} : Implement proper authentication checks 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} : Implement proper loading states and error boundaries 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 navigation guards and authentication checks in page components
Applied to files:
src/pages/Encounters/EncounterShow.tsx
🧬 Code graph analysis (1)
src/pages/Facility/billing/account/AccountShow.tsx (2)
src/components/Common/Page.tsx (1)
Page(18-37)src/components/Tags/TagAssignmentSheet.tsx (1)
TagAssignmentSheet(113-227)
⏰ 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: Test
- GitHub Check: CodeQL-Build
🔇 Additional comments (7)
src/pages/Appointments/AppointmentsPage.tsx (1)
354-354: Verify accessibility impact of hiding breadcrumbs.The addition of
hideBreadcrumbsremoves breadcrumb navigation from this page. Breadcrumbs provide important context for users navigating the application hierarchy, particularly for screen reader users and keyboard navigation.Please confirm:
- That skip links or alternative navigation aids remain available when breadcrumbs are hidden
- This decision has been validated with accessibility testing (WCAG compliance)
- The rationale for hiding breadcrumbs on appointments pages aligns with UX requirements
Based on learnings, page components should provide skip links for screen readers and ensure proper navigation structure.
src/pages/Encounters/EncounterShow.tsx (1)
224-224: Verify accessibility and navigation impact.Similar to the appointments page, hiding breadcrumbs on the encounter page removes navigation context. Given the complexity of the encounter page with multiple tabs and nested information, breadcrumbs may be particularly valuable for user orientation.
Ensure that alternative navigation aids (skip links, clear heading hierarchy) compensate for the absence of breadcrumbs, especially for assistive technology users.
Based on learnings, maintain proper heading hierarchy and navigation structure for screen reader support in medical records display.
src/pages/Facility/billing/account/AccountShow.tsx (5)
56-58: LGTM!The new imports for
PageandTagAssignmentSheetare correctly added and follow the coding guidelines for import ordering.
466-496: LGTM!The
TagAssignmentSheetimplementation is correct and follows the established pattern from the component's usage examples. All required props are provided, query invalidation is properly handled, and the conditional button text uses appropriate i18n keys.
525-581: LGTM!The financial summary section correctly implements:
- Responsive three-column layout with appropriate breakpoints
- Conditional coloring for balance (red for amounts due, green for overpaid)
- Proper use of
MonetaryDisplayfor currency formatting- Complete i18n coverage for all user-facing text
583-612: LGTM!The action buttons and tabs sections are correctly implemented:
- Rebalance button properly handles mutation states and i18n
- NavTabs component receives all required props with responsive
showMoreAfterIndex- Controlled state management for tab navigation
614-631: LGTM!The sheet components are properly configured with controlled state, correct prop passing, and appropriate handlers for updates.
| <ShortcutBadge actionId="settle-close-account" /> | ||
| </Button> | ||
| )} | ||
| <Page title={t("account")} hideTitleOnPage className="md:px-0"> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's read the AccountShow.tsx file to see the full context
wc -l src/pages/Facility/billing/account/AccountShow.tsxRepository: ohcnetwork/care_fe
Length of output: 116
🏁 Script executed:
# Check the file size and content around line 262
head -n 300 src/pages/Facility/billing/account/AccountShow.tsx | tail -n 50Repository: ohcnetwork/care_fe
Length of output: 2073
🏁 Script executed:
# Search for skip link implementations in other page components
rg -t tsx "skip" src/pages --max-count=10Repository: ohcnetwork/care_fe
Length of output: 89
🏁 Script executed:
# Check if there's a pattern for skip links in the codebase
rg -t tsx "skipLink|skip-link|aria-label.*skip|href.*#main" src/ -A 2 -B 2Repository: ohcnetwork/care_fe
Length of output: 89
🏁 Script executed:
# Look for common accessibility patterns in page components
rg -t tsx "aria-label" src/pages --max-count=5 -A 1Repository: ohcnetwork/care_fe
Length of output: 89
🏁 Script executed:
# Read the full AccountShow.tsx file
cat -n src/pages/Facility/billing/account/AccountShow.tsx | head -n 100Repository: ohcnetwork/care_fe
Length of output: 4243
🏁 Script executed:
# Search for skip link implementations with different patterns
rg "skip|aria-label" src/pages --max-count=5Repository: ohcnetwork/care_fe
Length of output: 2653
🏁 Script executed:
# Check the Page component implementation
find src -name "Page.tsx" -o -name "Page.ts" | head -5Repository: ohcnetwork/care_fe
Length of output: 92
🏁 Script executed:
# Look at page components to see common patterns
ls src/pages/ | head -20Repository: ohcnetwork/care_fe
Length of output: 200
🏁 Script executed:
# Check the Page component implementation
cat -n src/components/Common/Page.tsxRepository: ohcnetwork/care_fe
Length of output: 1547
🏁 Script executed:
# Search for skip link patterns in HTML (href="#main", href="#content", etc)
rg 'href="#' src/pages --max-count=10Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Look for any skip link anchor elements or navigation landmarks
rg -i 'skip.*link|main.*content|role="main"' src/pagesRepository: ohcnetwork/care_fe
Length of output: 424
🏁 Script executed:
# Check PageTitle component to see if skip links might be implemented there
head -n 50 src/components/Common/PageTitle.tsxRepository: ohcnetwork/care_fe
Length of output: 1142
🏁 Script executed:
# Look for any skip link implementations in the entire codebase
rg -i 'skiplink|skip.link|skip-link|skip.*content' src/Repository: ohcnetwork/care_fe
Length of output: 44
Implement skip links for screen reader accessibility in page component.
Page components should provide skip links for keyboard and screen reader users. This page lacks navigation landmarks that allow assistive technology users to skip repetitive content and jump directly to main content areas.
🤖 Prompt for AI Agents
In src/pages/Facility/billing/account/AccountShow.tsx around line 262, the Page
component usage needs an accessible skip link and a main landmark: add a
visually-hidden skip link at the top of the page that points to a deterministic
id (for example href="#main-content") and ensure the main content element has
that id and appropriate role/landmark (e.g., <main id="main-content"
role="main">). If the Page component controls the top-level markup, either pass
a prop to Page to render the skip link or update Page to render a skip link and
ensure it sets the main id; otherwise add the skip link immediately before Page
and wrap the page’s primary content with an element having id="main-content".
Ensure the skip link is keyboard-focusable, visible on focus, and the main
element uses the same id so assistive tech and keyboard users can jump straight
to main content.
| <div className="bg-gray-100 p-3 space-y-4 rounded-lg"> | ||
| <div className="bg-gray-100 rounded-lg flex flex-col md:flex-row md:items-center justify-between gap-4"> | ||
| <div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-6"> | ||
| <div> | ||
| <p className="text-sm text-gray-700 font-medium"> | ||
| {t("status")} | ||
| </p> | ||
| <Badge variant={ACCOUNT_STATUS_COLORS[account.status]}> | ||
| {t(account.status)} | ||
| </Badge> | ||
| </div> | ||
| <div> | ||
| <p className="text-sm text-gray-700 font-medium"> | ||
| {t("start_date")} | ||
| {t("account")} | ||
| </p> | ||
| <p className="font-medium text-base text-gray-950"> | ||
| {account.service_period?.start | ||
| ? formatDate(account.service_period?.start) | ||
| : formatDate(account.created_date)} | ||
| {account.name} | ||
| </p> | ||
| </div> | ||
| <div className="flex md:items-center gap-6"> | ||
| <div> | ||
| <p className="text-sm text-gray-700 font-medium"> | ||
| {t("status")} | ||
| </p> | ||
| <Badge variant={ACCOUNT_STATUS_COLORS[account.status]}> | ||
| {t(account.status)} | ||
| </Badge> | ||
| </div> | ||
| <div> | ||
| <p className="text-sm text-gray-700 font-medium"> | ||
| {t("start_date")} | ||
| </p> | ||
| <p className="font-medium text-base text-gray-950"> | ||
| {account.service_period?.start | ||
| ? formatDate(account.service_period?.start) | ||
| : formatDate(account.created_date)} | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <p className="text-sm text-gray-700 font-medium"> | ||
| {t("end_date")} | ||
| </p> | ||
| <p className="font-medium text-base text-gray-950"> | ||
| {account.service_period?.end | ||
| ? formatDate(account.service_period?.end) | ||
| : t("ongoing")} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <p className="text-sm text-gray-700 font-medium"> | ||
| {t("end_date")} | ||
| </p> | ||
| <p className="font-medium text-base text-gray-950"> | ||
| {account.service_period?.end | ||
| ? formatDate(account.service_period?.end) | ||
| : t("ongoing")} | ||
| {t("tags_other")} | ||
| </p> | ||
| <div className="flex flex-wrap gap-1"> | ||
| <TagAssignmentSheet | ||
| entityType="account" | ||
| entityId={accountId} | ||
| facilityId={facilityId} | ||
| currentTags={account.tags ?? []} | ||
| onUpdate={() => { | ||
| queryClient.invalidateQueries({ | ||
| queryKey: ["account", accountId], | ||
| }); | ||
| }} | ||
| patientId={account.patient.id} | ||
| trigger={ | ||
| <Button | ||
| variant="outline" | ||
| size="xs" | ||
| className="rounded-sm" | ||
| > | ||
| <Hash /> | ||
| {account.tags && account.tags.length > 0 | ||
| ? t("manage_tags") | ||
| : t("add_tags")} | ||
| </Button> | ||
| } | ||
| /> | ||
| {account.tags?.map((tag) => ( | ||
| <Badge key={tag.id} variant="secondary" className="text-xs"> | ||
| {tag.display} | ||
| </Badge> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <p className="text-sm text-gray-700 font-medium"> | ||
| {t("tags_other")} | ||
| </p> | ||
| <div className="flex flex-wrap gap-1"> | ||
| <TagAssignmentSheet | ||
| entityType="account" | ||
| entityId={accountId} | ||
| facilityId={facilityId} | ||
| currentTags={account.tags ?? []} | ||
| onUpdate={() => { | ||
| queryClient.invalidateQueries({ | ||
| queryKey: ["account", accountId], | ||
| }); | ||
| }} | ||
| patientId={account.patient.id} | ||
| trigger={ | ||
| <Button variant="outline" size="xs" className="rounded-sm"> | ||
| <Hash /> | ||
| {account.tags && account.tags.length > 0 | ||
| ? t("manage_tags") | ||
| : t("add_tags")} | ||
| </Button> | ||
| } | ||
| <div className="flex items-center gap-2"> | ||
| <Button | ||
| variant="link" | ||
| asChild | ||
| className="text-gray-950 underline" | ||
| > | ||
| <Link | ||
| href={`/facility/${facilityId}/patient/${account.patient.id}/accounts`} | ||
| > | ||
| {t("past_accounts")} | ||
| </Link> | ||
| </Button> | ||
| <Button | ||
| variant="outline" | ||
| className="border-gray-400 gap-1" | ||
| onClick={() => setSheetOpen(true)} | ||
| > | ||
| <CareIcon | ||
| icon="l-edit" | ||
| className="size-5 stroke-gray-450 stroke-1" | ||
| /> | ||
| {account.tags?.map((tag) => ( | ||
| <Badge key={tag.id} variant="secondary" className="text-xs"> | ||
| {tag.display} | ||
| </Badge> | ||
| ))} | ||
| </div> | ||
| {t("edit")} | ||
| <ShortcutBadge actionId="edit-account" /> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-center gap-2"> | ||
| <Button variant="link" asChild className="text-gray-950 underline"> | ||
| <Link | ||
| href={`/facility/${facilityId}/patient/${account.patient.id}/accounts`} | ||
| > | ||
| {t("past_accounts")} | ||
| </Link> | ||
| </Button> | ||
| <Button | ||
| variant="outline" | ||
| className="border-gray-400 gap-1" | ||
| onClick={() => setSheetOpen(true)} | ||
| > | ||
| <CareIcon | ||
| icon="l-edit" | ||
| className="size-5 stroke-gray-450 stroke-1" | ||
| /> | ||
| {t("edit")} | ||
| <ShortcutBadge actionId="edit-account" /> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Financial Summary Section */} | ||
| <div className="flex flex-col md:flex-row rounded-lg border border-gray-200 bg-white flex-wrap"> | ||
| <div className="flex-1 p-6 border-b md:border-r border-gray-200"> | ||
| <div className="space-y-1"> | ||
| <p className="text-sm font-medium text-gray-500"> | ||
| {t("amount_due")} | ||
| </p> | ||
| <div className="flex items-end"> | ||
| <p | ||
| className={cn("text-3xl font-bold", { | ||
| "text-red-500": Number(account.total_balance) > 0, | ||
| "text-green-700": Number(account.total_balance) <= 0, | ||
| })} | ||
| > | ||
| <MonetaryDisplay amount={account.total_balance} /> | ||
| {/* Financial Summary Section */} | ||
| <div className="flex flex-col md:flex-row rounded-lg border border-gray-200 bg-white flex-wrap"> | ||
| <div className="flex-1 p-6 border-b md:border-r border-gray-200"> | ||
| <div className="space-y-1"> | ||
| <p className="text-sm font-medium text-gray-500"> | ||
| {t("amount_due")} | ||
| </p> | ||
| <div className="flex items-end"> | ||
| <p | ||
| className={cn("text-3xl font-bold", { | ||
| "text-red-500": Number(account.total_balance) > 0, | ||
| "text-green-700": Number(account.total_balance) <= 0, | ||
| })} | ||
| > | ||
| <MonetaryDisplay amount={account.total_balance} /> | ||
| </p> | ||
| </div> | ||
| <p className="text-xs text-gray-500"> | ||
| {Number(account.total_balance) >= 0 | ||
| ? t("pending_from_patient") | ||
| : t("overpaid_amount")} | ||
| </p> | ||
| </div> | ||
| <p className="text-xs text-gray-500"> | ||
| {Number(account.total_balance) >= 0 | ||
| ? t("pending_from_patient") | ||
| : t("overpaid_amount")} | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex-1 p-6 border-b md:border-r border-gray-200"> | ||
| <div className="space-y-1"> | ||
| <p className="text-sm font-medium text-gray-500"> | ||
| {t("total_paid")} | ||
| </p> | ||
| <div className="flex items-end"> | ||
| <p className="text-3xl font-bold text-gray-900"> | ||
| <MonetaryDisplay amount={account.total_paid} /> | ||
| <div className="flex-1 p-6 border-b md:border-r border-gray-200"> | ||
| <div className="space-y-1"> | ||
| <p className="text-sm font-medium text-gray-500"> | ||
| {t("total_paid")} | ||
| </p> | ||
| <div className="flex items-end"> | ||
| <p className="text-3xl font-bold text-gray-900"> | ||
| <MonetaryDisplay amount={account.total_paid} /> | ||
| </p> | ||
| </div> | ||
| <p className="text-xs text-gray-500"> | ||
| {t("payments_received")} | ||
| </p> | ||
| </div> | ||
| <p className="text-xs text-gray-500">{t("payments_received")}</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex-1 p-6"> | ||
| <div className="space-y-1"> | ||
| <p className="text-sm font-medium text-gray-500"> | ||
| {t("billed_gross")} | ||
| </p> | ||
| <div className="flex items-end"> | ||
| <p className="text-3xl font-bold text-gray-900"> | ||
| <MonetaryDisplay amount={account.total_gross} /> | ||
| <div className="flex-1 p-6"> | ||
| <div className="space-y-1"> | ||
| <p className="text-sm font-medium text-gray-500"> | ||
| {t("billed_gross")} | ||
| </p> | ||
| <div className="flex items-end"> | ||
| <p className="text-3xl font-bold text-gray-900"> | ||
| <MonetaryDisplay amount={account.total_gross} /> | ||
| </p> | ||
| </div> | ||
| <p className="text-xs text-gray-500"> | ||
| {t("total_billed_before_adjustments")} | ||
| </p> | ||
| </div> | ||
| <p className="text-xs text-gray-500"> | ||
| {t("total_billed_before_adjustments")} | ||
| </p> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Add semantic heading hierarchy for accessibility.
The page hides its title (hideTitleOnPage) and major sections (Account Details at line 420, Financial Summary at line 525) lack semantic headings (h2, h3). This violates WCAG guidelines and makes screen reader navigation difficult in medical billing interfaces.
🔎 Recommended fix
Add semantic headings to major sections:
<div className="bg-gray-100 p-3 space-y-4 rounded-lg">
+ <h2 className="sr-only">{t("account_details")}</h2>
<div className="bg-gray-100 rounded-lg flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-6"> {/* Financial Summary Section */}
+<h3 className="sr-only">{t("financial_summary")}</h3>
<div className="flex flex-col md:flex-row rounded-lg border border-gray-200 bg-white flex-wrap">Use sr-only class if you want headings invisible but accessible to screen readers, or make them visible for better UX.
As per coding guidelines: "Implement proper heading hierarchy (h1, h2, h3, etc.) in page components."
🤖 Prompt for AI Agents
src/pages/Facility/billing/account/AccountShow.tsx around lines 420-581: the
"Account Details" and "Financial Summary" sections are missing semantic
headings; add appropriate heading elements (e.g., h2 for each major section, h3
for subsections) immediately before the section container divs to establish a
proper heading hierarchy since the page title is hidden. If you need the
headings visually hidden, use the existing "sr-only" utility class so they
remain accessible to screen readers; ensure heading levels follow the page's
overall structure (no skipping levels) and update any nearby aria attributes or
landmarks if necessary.
| BreadcrumbSeparator, | ||
| } from "@/components/ui/breadcrumb"; | ||
| import useAppHistory from "@/hooks/useAppHistory"; | ||
| import { Separator } from "@radix-ui/react-separator"; |
There was a problem hiding this comment.
The import path suggests using @radix-ui/react-separator directly, but based on the project structure this should likely be @/components/ui/separator to maintain consistency with other UI component imports like the breadcrumb components above it.
| import { Separator } from "@radix-ui/react-separator"; | |
| import { Separator } from "@/components/ui/separator"; |
| function isResourceName(segment: string): boolean { | ||
| // Check if it's a known resource or follows kebab-case pattern | ||
| return ( | ||
| /^[a-z_]+$/.test(segment) && |
There was a problem hiding this comment.
The regex pattern /^[a-z_]+$/ only matches lowercase letters and underscores, but the comment on line 49 mentions "kebab-case pattern" which includes hyphens. The pattern should be /^[a-z_-]+$/ to properly match kebab-case identifiers.
| /^[a-z_]+$/.test(segment) && | |
| /^[a-z_-]+$/.test(segment) && |
| <span | ||
| onClick={() => goBack()} | ||
| className="text-sm text-gray-500 hover:cursor-pointer" | ||
| > | ||
| {t("back")} | ||
| </span> |
There was a problem hiding this comment.
This clickable span should be a button element for proper keyboard accessibility and semantic HTML. Replace the span with a button element and add appropriate styling to maintain the visual appearance.
| <span | |
| onClick={() => goBack()} | |
| className="text-sm text-gray-500 hover:cursor-pointer" | |
| > | |
| {t("back")} | |
| </span> | |
| <button | |
| type="button" | |
| onClick={() => goBack()} | |
| className="text-sm text-gray-500 hover:cursor-pointer bg-transparent border-0 p-0" | |
| > | |
| {t("back")} | |
| </button> |
nihal467
left a comment
nihal467
left a comment
There was a problem hiding this comment.
- look into the issue flagged by @SiddanthNayak
- there are PW test failing in the PR
SiddanthNayak
left a comment
SiddanthNayak
left a comment
There was a problem hiding this comment.
Screen.Recording.2026-01-02.at.12.30.51.PM.mov
All breadcrumbs with Patient nav is failing.
| if (SKIP_SEGMENTS.has(segment)) continue; | ||
|
|
||
| // Handle UUIDs - show as separate breadcrumb with formatted ID | ||
| if (isUuid(segment) && prevSegment && isResourceName(prevSegment)) { |
There was a problem hiding this comment.
The condition checks if prevSegment is truthy and is a resource name, but prevSegment could be a string that passes the truthiness check even when it shouldn't be used as a resource name. Add an explicit check that prevSegment is not undefined or null before calling isResourceName.
| if (isUuid(segment) && prevSegment && isResourceName(prevSegment)) { | |
| if (isUuid(segment) && prevSegment !== null && isResourceName(prevSegment)) { |
|
|
||
| // Handle resource name followed by UUID | ||
| // Add the resource collection page (e.g., /billing/account) | ||
| if (isResourceName(segment) && nextSegment && isUuid(nextSegment)) { |
There was a problem hiding this comment.
Similar to the previous condition, nextSegment should be explicitly checked for undefined or null before calling isUuid. While the truthiness check may work, it's not explicit about the intent and could mask issues.
| if (isResourceName(segment) && nextSegment && isUuid(nextSegment)) { | |
| if (isResourceName(segment) && nextSegment != null && isUuid(nextSegment)) { |
| <span | ||
| onClick={() => goBack()} | ||
| className="text-sm text-gray-500 hover:cursor-pointer" | ||
| > | ||
| {t("back")} | ||
| </span> |
There was a problem hiding this comment.
The clickable span lacks keyboard accessibility. Convert this to a button element or add appropriate ARIA attributes and keyboard event handlers (onKeyDown) to support keyboard navigation. Healthcare applications must be fully keyboard accessible for clinical environments.
| <span | |
| onClick={() => goBack()} | |
| className="text-sm text-gray-500 hover:cursor-pointer" | |
| > | |
| {t("back")} | |
| </span> | |
| <button | |
| type="button" | |
| onClick={() => goBack()} | |
| className="text-sm text-gray-500 hover:cursor-pointer bg-transparent border-0 p-0" | |
| > | |
| {t("back")} | |
| </button> |
| <BreadcrumbLink | ||
| onClick={() => navigate(breadcrumb.href)} | ||
| className="underline text-black hover:cursor-pointer" | ||
| > |
There was a problem hiding this comment.
The BreadcrumbLink component uses onClick for navigation but may not be properly configured for keyboard accessibility. Verify that the BreadcrumbLink component from shadcn/ui supports keyboard events, or explicitly add keyboard event handlers to ensure full keyboard navigation support.
| function formatIdLabel(id: string): string { | ||
| // Show first 4 and last 4 characters of UUID | ||
| if (id.length > 12) { | ||
| return `${id.slice(0, 4)}...${id.slice(-4)}`; | ||
| } | ||
| return id; | ||
| } |
There was a problem hiding this comment.
The function name and comment mention UUID specifically, but the function accepts any string and only checks length. Either update the function signature to validate UUID format first, or update the documentation to clarify it handles any ID string regardless of format.
3 participants
Proposed Changes
Figma
Implementation
Tagging: @ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.