-
Notifications
You must be signed in to change notification settings - Fork 995
Added support for extending billing nav items via plugins #15101
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: develop
Are you sure you want to change the base?
Conversation
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR adds support for plugins to extend the billing navigation section in the facility sidebar. It allows plugins to register additional billing-related navigation items that appear under the Billing menu, following the same pattern used for general navigation items.
Changes:
- Added
billingNavItemsfield to the plugin manifest type definition - Integrated plugin billing navigation items into the facility navigation generation
- Updated the facility nav component to collect and inject plugin billing items
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/pluginTypes.ts | Added billingNavItems property to PluginManifest type for plugin billing navigation |
| src/components/ui/sidebar/facility/facility-nav.tsx | Collected plugin billing nav items and integrated them into the billing section |
WalkthroughThis pull request adds support for plugin billing navigation items by introducing a new optional Changes
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @src/components/ui/sidebar/facility/facility-nav.tsx:
- Line 35: The plugin nav URL construction is inconsistent between regular and
billing plugin items; normalize both to treat plugin-provided paths as relative
by building URLs using the same logic: use baseUrl + '/' + cleaned l.url. Update
the code that constructs URLs for plugin links (both the logic handling
pluginLinks and pluginBillingLinks) to strip any leading slashes from l.url
(e.g. l.url.replace(/^\/+/, '')) and then set url: `${baseUrl}/${cleanedUrl}` so
plugin authors can always provide relative paths like "cash-accounts" and avoid
double/ missing slashes.
📜 Review details
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/components/ui/sidebar/facility/facility-nav.tsxsrc/pluginTypes.ts
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{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/pluginTypes.tssrc/components/ui/sidebar/facility/facility-nav.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/pluginTypes.tssrc/components/ui/sidebar/facility/facility-nav.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/pluginTypes.tssrc/components/ui/sidebar/facility/facility-nav.tsx
src/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Prettier for consistent code formatting across the healthcare application
Files:
src/pluginTypes.tssrc/components/ui/sidebar/facility/facility-nav.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/pluginTypes.tssrc/components/ui/sidebar/facility/facility-nav.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Use 2-space indentation
Files:
src/pluginTypes.tssrc/components/ui/sidebar/facility/facility-nav.tsx
**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
Use camelCase for utility file names (e.g.,
useAuth.ts)
Files:
src/pluginTypes.ts
**/*.{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/pluginTypes.tssrc/components/ui/sidebar/facility/facility-nav.tsx
**/*.{ts,tsx,js,jsx,json,css,scss,html}
📄 CodeRabbit inference engine (AGENTS.md)
Use 2-space indentation
Files:
src/pluginTypes.tssrc/components/ui/sidebar/facility/facility-nav.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
Use declarative JSX
Files:
src/components/ui/sidebar/facility/facility-nav.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/ui/sidebar/facility/facility-nav.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/components/ui/sidebar/facility/facility-nav.tsx
src/components/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/01-project-structure.mdc)
ShadCN UI components should be placed in src/components/ui/ directory
Files:
src/components/ui/sidebar/facility/facility-nav.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/components/ui/sidebar/facility/facility-nav.tsx
🧠 Learnings (6)
📚 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} : Support plugin routes through `usePluginRoutes` hook
Applied to files:
src/pluginTypes.ts
📚 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/components/ui/sidebar/facility/facility-nav.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/ui/sidebar/facility/facility-nav.tsx
📚 Learning: 2024-11-12T12:46:55.920Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/LinkedFacilities.tsx:42-42
Timestamp: 2024-11-12T12:46:55.920Z
Learning: In the `LinkedFacilities` component (`src/components/Users/LinkedFacilities.tsx`), when using `FacilitySelect` which supports an array of `FacilityModel` items, and restricting selection to just one, it's acceptable to keep the `facility` state typed as `any` to maintain compatibility.
Applied to files:
src/components/ui/sidebar/facility/facility-nav.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/components/ui/sidebar/facility/facility-nav.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/components/ui/sidebar/facility/facility-nav.tsx
🧬 Code graph analysis (2)
src/pluginTypes.ts (1)
src/components/ui/sidebar/nav-main.tsx (1)
NavigationLink(36-44)
src/components/ui/sidebar/facility/facility-nav.tsx (1)
src/components/ui/sidebar/nav-main.tsx (1)
NavigationLink(36-44)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
- GitHub Check: build
- GitHub Check: Redirect rules - care-ohc
- GitHub Check: Test
- GitHub Check: CodeQL-Build
- GitHub Check: Header rules - care-ohc
- GitHub Check: Pages changed - care-ohc
- GitHub Check: Cloudflare Pages: care-preview
🔇 Additional comments (2)
src/pluginTypes.ts (1)
141-141: LGTM! Clean addition of plugin billing navigation support.The new optional
billingNavItemsfield follows the established pattern of other navigation item collections (navItems,userNavItems,adminNavItems) and maintains backward compatibility with existing plugins.src/components/ui/sidebar/facility/facility-nav.tsx (1)
221-223: LGTM! Plugin billing nav items collection follows established pattern.The extraction of
billingNavItemsfromcareAppscorrectly mirrors the pattern used for regularpluginNavItems(lines 217-219), including filtering out loading states.
| canListTemplate: boolean; | ||
| }, | ||
| pluginLinks: NavigationLink[], | ||
| pluginBillingLinks: NavigationLink[], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧩 Analysis chain
🏁 Script executed:
fd facility-nav.tsxRepository: ohcnetwork/care_fe
Length of output: 113
🏁 Script executed:
wc -l src/components/ui/sidebar/facility/facility-nav.tsxRepository: ohcnetwork/care_fe
Length of output: 117
🏁 Script executed:
cat -n src/components/ui/sidebar/facility/facility-nav.tsx | head -50Repository: ohcnetwork/care_fe
Length of output: 1856
🏁 Script executed:
cat -n src/components/ui/sidebar/facility/facility-nav.tsx | sed -n '115,135p'Repository: ohcnetwork/care_fe
Length of output: 706
🏁 Script executed:
cat -n src/components/ui/sidebar/facility/facility-nav.tsx | sed -n '200,220p'Repository: ohcnetwork/care_fe
Length of output: 660
🏁 Script executed:
cat -n src/components/ui/sidebar/facility/facility-nav.tsx | sed -n '245,256p'Repository: ohcnetwork/care_fe
Length of output: 341
🏁 Script executed:
cat -n src/components/ui/sidebar/facility/facility-nav.tsx | sed -n '213,245p'Repository: ohcnetwork/care_fe
Length of output: 1245
Inconsistent URL prefixing between plugin nav items requires normalization.
The code uses different URL construction patterns for plugin navigation items:
-
Regular plugin nav items (line 208):
url: \${baseUrl}/${l.url}`expects relative paths like"some-route"` -
Billing plugin nav items (line 125):
url: \${baseUrl}${l.url}`expects absolute paths like"/billing/cash-accounts"`
This difference creates an error-prone inconsistency where plugin developers must provide different URL formats depending on nav item type, with no clear documentation of the requirement.
Recommended fix: standardize by having both expect relative paths:
- ...pluginBillingLinks.map((l) => ({
- ...l,
- url: `${baseUrl}${l.url}`,
- })),
+ ...pluginBillingLinks.map((l) => ({
+ ...l,
+ url: `${baseUrl}/billing/${l.url}`,
+ })),This ensures plugins provide consistent relative URLs like "cash-accounts" regardless of nav item type, with the sidebar component handling all path construction.
🤖 Prompt for AI Agents
In @src/components/ui/sidebar/facility/facility-nav.tsx at line 35, The plugin
nav URL construction is inconsistent between regular and billing plugin items;
normalize both to treat plugin-provided paths as relative by building URLs using
the same logic: use baseUrl + '/' + cleaned l.url. Update the code that
constructs URLs for plugin links (both the logic handling pluginLinks and
pluginBillingLinks) to strip any leading slashes from l.url (e.g.
l.url.replace(/^\/+/, '')) and then set url: `${baseUrl}/${cleanedUrl}` so
plugin authors can always provide relative paths like "cash-accounts" and avoid
double/ missing slashes.
🎭 Playwright Test ResultsStatus: ✅ Passed
📊 Detailed results are available in the playwright-final-report artifact. Run: #4537 |
rithviknishad
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
while we are at it, we could also add support for extending settings nav items and all as well.
Proposed Changes
Tagging: @ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.