Skip to content

Conversation

@NikhilA8606
Copy link
Member

@NikhilA8606 NikhilA8606 commented Jan 11, 2026

Proposed Changes

Tagging: @ohcnetwork/care-fe-code-reviewers

Merge Checklist

  • Add specs that demonstrate the bug or test the new feature.
  • Update product documentation.
  • Ensure that UI text is placed in I18n files.
  • Prepare a screenshot or demo video for the changelog entry and attach it to the issue.
  • Request peer reviews.
  • Complete QA on mobile devices.
  • Complete QA on desktop devices.
  • Add or update Playwright tests for related changes

Summary by CodeRabbit

  • New Features
    • Plugins can now provide billing-related navigation items that integrate with the facility sidebar navigation.

✏️ Tip: You can customize this high-level summary in your review settings.

@NikhilA8606 NikhilA8606 requested review from a team and Copilot January 11, 2026 19:45
@netlify
Copy link

netlify bot commented Jan 11, 2026

Deploy Preview for care-ohc ready!

Name Link
🔨 Latest commit 454796e
🔍 Latest deploy log https://app.netlify.com/projects/care-ohc/deploys/6963fdda2b10040008101337
😎 Deploy Preview https://deploy-preview-15101.preview.ohc.network
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Contributor

Copilot AI left a 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 billingNavItems field 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

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 11, 2026

Walkthrough

This pull request adds support for plugin billing navigation items by introducing a new optional billingNavItems field to the PluginManifest type and updating the facility navigation component to collect and integrate these items into the billing section.

Changes

Cohort / File(s) Summary
Plugin Billing Navigation Support
src/pluginTypes.ts, src/components/ui/sidebar/facility/facility-nav.tsx
Added optional billingNavItems field to PluginManifest type; updated generateFacilityLinks function signature to accept pluginBillingLinks parameter and integrate plugin billing links into facility navigation billing section with facility base URL prefixing
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Added support for extending billing nav items via plugins' accurately describes the main change - adding plugin support for billing navigation items.
Description check ✅ Passed The PR description follows the required template with all major sections present, including proposed changes, issue reference, team tagging, and merge checklist.
Linked Issues check ✅ Passed The code changes successfully implement support for extending billing navigation items via plugins as required by issue #15100, adding billingNavItems to PluginManifest and processing them in facility navigation.
Out of Scope Changes check ✅ Passed All changes are scoped to the stated objective of adding plugin support for billing navigation items. Modifications to facility-nav.tsx and pluginTypes.ts directly address the requirement without introducing unrelated changes.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/added-billnavtype

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between 1a62942 and 454796e.

📒 Files selected for processing (2)
  • src/components/ui/sidebar/facility/facility-nav.tsx
  • src/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
Use interface for defining object types in TypeScript
Avoid explicit any type 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 using any type; 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 the query and mutate utilities 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
Use useQuery hook with queryKey and queryFn parameters, where queryFn wraps the API route with the query() utility
Use useMutation hook with mutationFn parameter wrapping API routes with the mutate() utility, and implement onSuccess callbacks to invalidate related queries
Support path parameters in TanStack Query using the pathParams option in query/mutate utilities
Support query parameters in TanStack Query using the queryParams option in query/mutate utilities
Use the silent: true option to suppress global error notifications when custom error handling is needed

**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Use interface for defining object types
Avoid explicit any types and maint...

Files:

  • src/pluginTypes.ts
  • src/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.ts
  • src/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.ts
  • src/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.ts
  • src/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.ts
  • src/components/ui/sidebar/facility/facility-nav.tsx
**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Use 2-space indentation

Files:

  • src/pluginTypes.ts
  • src/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
Use navigate and useRedirect from 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 from src/Locale/ for internationalization
Support RTL languages in components
Use proper date/time formatting for multiple language support

Files:

  • src/pluginTypes.ts
  • src/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.ts
  • src/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 from lucide-react for icons (e.g., import { SettingsIcon } from "lucide-react")
Import useTranslation from react-i18next for 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/
Use buttonVariants from @/components/ui/button with CVA patterns for button styling
Follow <Card><CardHeader> pattern for consistent card layouts
Use PatientRead type from @/types/emr/patient/patient for patient data handling
Implement TagAssignmentSheet with TagEntityType for patient/facility tags
Use PatientHoverCard for patient info overlays
Use Badge components to display patient status, facility capacity, medication dosage with color variants
Use cva() from class variance authority for variant-based component styling
Use cn() from @/lib/utils for 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.tsx for 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 billingNavItems field 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 billingNavItems from careApps correctly mirrors the pattern used for regular pluginNavItems (lines 217-219), including filtering out loading states.

canListTemplate: boolean;
},
pluginLinks: NavigationLink[],
pluginBillingLinks: NavigationLink[],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

fd facility-nav.tsx

Repository: ohcnetwork/care_fe

Length of output: 113


🏁 Script executed:

wc -l src/components/ui/sidebar/facility/facility-nav.tsx

Repository: ohcnetwork/care_fe

Length of output: 117


🏁 Script executed:

cat -n src/components/ui/sidebar/facility/facility-nav.tsx | head -50

Repository: 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.

@github-actions
Copy link

🎭 Playwright Test Results

Status: ✅ Passed
Test Shards: 3

Metric Count
Total Tests 251
✅ Passed 251
❌ Failed 0
⏭️ Skipped 0

📊 Detailed results are available in the playwright-final-report artifact.

Run: #4537

Copy link
Member

@rithviknishad rithviknishad left a 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add support for extending billing nav items by plugin

3 participants