Payment Filters #15084
Payment Filters #15084
Conversation
WalkthroughThe changes introduce a centralized payment method mapping constant, add new payment-related filter configurations with color support, make the MultiFilter component's alignment configurable, and migrate multiple payment and invoice pages to use the new centralized mapping and multi-filter patterns. Changes
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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.
Pull request overview
This PR enhances payment filtering capabilities by introducing a multi-filter system and adding user-based filtering. The changes consolidate payment filters into a more flexible UI component while maintaining backward compatibility.
Changes:
- Centralized payment method mapping by moving
methodMapconstants to a sharedPAYMENT_RECONCILIATION_METHOD_MAPin type definitions - Implemented multi-filter UI for payment list with payment method, status, and type filters
- Added user selector filter to enable filtering payments by creator
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/billing/paymentReconciliation/paymentReconciliation.ts | Adds centralized PAYMENT_RECONCILIATION_METHOD_MAP for payment method labels |
| src/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsx | Replaces local methodMap with shared PAYMENT_RECONCILIATION_METHOD_MAP |
| src/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx | Refactors payment filters to use MultiFilter component and adds user selector filter |
| src/pages/Facility/billing/paymentReconciliation/PaymentReconciliationShow.tsx | Updates to use shared payment method mapping constant |
| src/pages/Facility/billing/invoice/PrintInvoice.tsx | Migrates to centralized payment method mapping |
| src/pages/Facility/billing/invoice/InvoicesData.tsx | Adjusts filter layout alignment |
| src/pages/Facility/billing/invoice/InvoiceShow.tsx | Adds view button for payments and uses shared payment method mapping |
| src/pages/Facility/billing/account/components/PrintChargeItems.tsx | Updates to use centralized payment method constant |
| src/components/ui/multi-filter/utils/Utils.tsx | Adds utility function for variant color class mapping |
| src/components/ui/multi-filter/filterConfigs.tsx | Implements payment-specific filter configurations and updates color handling |
| src/components/ui/multi-filter/MultiFilter.tsx | Adds alignment prop for dropdown menu positioning |
| public/locale/en.json | Adds translation key for user filter placeholder |
| queryFn: query(userApi.get, { | ||
| pathParams: { username: qParams.created_by_username }, | ||
| }), | ||
| enabled: !!qParams.created_by_username && !createdBy, |
There was a problem hiding this comment.
The query is enabled only when createdBy is falsy, but this creates a dependency loop. When selectedUser loads and triggers the effect at line 97-102, it sets createdBy, which disables the query. If the query params change later, the query won't re-fetch because createdBy remains set. Consider removing && !createdBy from the enabled condition to allow the query to refetch when the username changes.
| enabled: !!qParams.created_by_username && !createdBy, | |
| enabled: !!qParams.created_by_username, |
| setCreatedBy(selectedUser); | ||
| updateQuery({ created_by: selectedUser.id }); | ||
| } | ||
| }, [selectedUser]); |
There was a problem hiding this comment.
This effect updates the query with created_by based on the selected user, but it's missing updateQuery in the dependency array. While updateQuery is likely stable from useFilters, it's a best practice to include all dependencies or explicitly document why they're omitted.
| }, [selectedUser]); | |
| }, [selectedUser, qParams.created_by_username, updateQuery]); |
| if (createdBy && !qParams.created_by) { | ||
| setCreatedBy(undefined); | ||
| } | ||
| }, [qParams.created_by]); |
There was a problem hiding this comment.
This effect is missing createdBy in the dependency array, which means it won't run when createdBy changes. This could lead to stale state if createdBy is set but qParams.created_by is already undefined. Add createdBy to the dependency array.
| }, [qParams.created_by]); | |
| }, [qParams.created_by, createdBy]); |
| <> | ||
| <EyeIcon className="size-3" /> | ||
| {t("view")} | ||
| </> |
There was a problem hiding this comment.
The Fragment wrapper is unnecessary here. Remove the Fragment and place the icon and text directly as children of the Button component.
| "command", | ||
| Object.values(AccountBillingStatus).map((value) => ({ | ||
| value: value, | ||
| label: t(value), |
There was a problem hiding this comment.
The color mapping is being transformed through getVariantColorClasses, but ACCOUNT_BILLING_STATUS_COLORS already contains variant strings like 'secondary', 'warning', etc. This adds an unnecessary layer of indirection. Consider either storing the full color classes directly in the color constants or documenting why this transformation is needed.
| label: t(value), | |
| label: t(value), | |
| // ACCOUNT_BILLING_STATUS_COLORS stores semantic variant tokens (e.g. "secondary", "warning"); | |
| // getVariantColorClasses centralizes the mapping from these variants to Tailwind/shadcn class strings. |
🚀 Preview Deployment Ready!
This preview will be automatically updated when you push new commits to this PR. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
public/locale/en.json (1)
2364-2369: i18n addition looks correct; consider wording specificity if this is “created by”
- Key/value and placement are consistent with nearby
filter_by_*entries, and it’s correctly added only toen.json.- If this filter is specifically “created by user”, consider whether the UI label should be more explicit (e.g., “Filter by Created By”) to avoid ambiguity between “Patient” vs “User”.
src/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx (1)
84-86: Missing dependency array in useEffect causes re-renders.This
useEffectruns on every render becauseupdateQueryis missing from the dependency array. While this sets a default sort order, it should only run once on mount.🔧 Suggested fix
useEffect(() => { updateQuery({ ordering: "-payment_datetime" }); - }, []); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); // Intentionally run only on mount to set default sortOr better, check if ordering is already set:
useEffect(() => { + if (!qParams.ordering) { updateQuery({ ordering: "-payment_datetime" }); + } - }, []); + }, [qParams.ordering, updateQuery]);
🤖 Fix all issues with AI agents
In @src/components/ui/multi-filter/filterConfigs.tsx:
- Around line 398-433: The code is wrapping already-human-readable labels from
PAYMENT_RECONCILIATION_METHOD_MAP in t(), which is redundant and can cause
missing i18n lookups; update paymentMethodFilter (in createFilterConfig call) to
stop calling t() on PAYMENT_RECONCILIATION_METHOD_MAP values—replace
t(PAYMENT_RECONCILIATION_METHOD_MAP[value]) in the options map with
PAYMENT_RECONCILIATION_METHOD_MAP[value], and also remove the t() around option
in renderSelected (use option directly) unless you intend to switch to i18n
keys, in which case replace the map entries with proper i18n keys before calling
t().
In @src/components/ui/multi-filter/utils/Utils.tsx:
- Around line 303-315: Add a JSDoc block above the exported
getVariantColorClasses function that briefly describes its purpose (maps a
variant key to Tailwind CSS class string), documents the parameter (variant:
string — accepted keys like "primary", "secondary", "destructive", "blue",
"green", "yellow", "orange", "purple"), and the return value (string of Tailwind
classes, defaults to the "secondary" mapping when the variant is unknown);
ensure the comment notes it returns combined border/bg/text classes and that the
function is exported for reuse.
In @src/pages/Facility/billing/account/components/PrintChargeItems.tsx:
- Around line 612-616: The lookup of
PAYMENT_RECONCILIATION_METHOD_MAP[payment.method] in PrintChargeItems.tsx should
have a defensive fallback for unknown or unexpected values; update the render to
use a default label (e.g., "Unknown" or a localized "Unrecognized payment
method") when PAYMENT_RECONCILIATION_METHOD_MAP[payment.method] is falsy or
payment.method is missing, and ensure you reference
PAYMENT_RECONCILIATION_METHOD_MAP and payment.method so the change is made at
the exact lookup site.
In @src/pages/Facility/billing/invoice/InvoiceShow.tsx:
- Around line 1054-1094: The Button children currently wrap the EyeIcon+text and
PrinterIcon+text inside unnecessary React fragments (<>...</>) in the JSX for
the two action buttons; remove those fragment wrappers so the Button components
directly render their children (EyeIcon and {t("view")}, and PrinterIcon and
{t("print")}) within the existing Button elements (refer to the Button elements
that call navigate with `/facility/${facilityId}/billing/payments/${payment.id}`
and `/facility/${facilityId}/billing/payments/${payment.id}/print` and the
EyeIcon/PrinterIcon usages).
In
@src/pages/Facility/billing/paymentReconciliation/PaymentReconciliationShow.tsx:
- Line 246: The value usage of PAYMENT_RECONCILIATION_METHOD_MAP[payment.method]
is inconsistent with other places that call t(); update the component to wrap
the mapped value with t() (i.e.,
t(PAYMENT_RECONCILIATION_METHOD_MAP[payment.method])) so it matches the usage at
line 147 and will work once the centralized map switches to i18n keys; change
the instance that references PAYMENT_RECONCILIATION_METHOD_MAP and
payment.method to pass its result into t().
- Around line 146-148: The code is calling
t(PAYMENT_RECONCILIATION_METHOD_MAP[payment.method]) but
PAYMENT_RECONCILIATION_METHOD_MAP currently contains literal English strings, so
t() will look for non‑existent i18n keys; fix by removing the t() wrapper in
PaymentReconciliationShow.tsx and render
PAYMENT_RECONCILIATION_METHOD_MAP[payment.method] directly inside the Badge (or
alternatively update the centralized PAYMENT_RECONCILIATION_METHOD_MAP to
contain i18n keys first), referencing the PAYMENT_RECONCILIATION_METHOD_MAP
constant and the payment.method access used in the Badge.
In @src/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx:
- Around line 88-108: The two useEffect hooks are missing dependencies and can
cause stale closures or loops; update the first effect (watching selectedUser)
to include updateQuery and qParams.created_by_username in its dependency array
and guard the update by checking that selectedUser.id exists and that
qParams.created_by !== selectedUser.id before calling setCreatedBy(selectedUser)
and updateQuery({ created_by: selectedUser.id }); update the second effect to
include setCreatedBy (and any qParams object refs you use) in its dependency
array and keep its current guard (if createdBy && !qParams.created_by) to avoid
needless state changes.
In @src/types/billing/paymentReconciliation/paymentReconciliation.ts:
- Around line 61-72: The PAYMENT_RECONCILIATION_METHOD_MAP currently holds
hardcoded English labels which breaks i18n rules; replace each string value in
PAYMENT_RECONCILIATION_METHOD_MAP with an i18n key (e.g., "payment.method.cash")
and update consumers to call
t(PAYMENT_RECONCILIATION_METHOD_MAP[payment.method]) where payment.method is
used; finally add the new keys and translations to your locale JSONs (e.g.,
public/locale/en.json) so the t() lookups resolve.
📜 Review details
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (12)
public/locale/en.jsonsrc/components/ui/multi-filter/MultiFilter.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/types/billing/paymentReconciliation/paymentReconciliation.ts
🧰 Additional context used
📓 Path-based instructions (18)
public/locale/**/*.json
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use i18n Locale files with English Locale files in
public/locale/en.json- non-English languages managed via Crowdin only
Files:
public/locale/en.json
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Use 2-space indentation
Files:
public/locale/en.jsonsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationShow.tsxsrc/types/billing/paymentReconciliation/paymentReconciliation.tssrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
**/*.{ts,tsx,js,jsx,json,css,scss,html}
📄 CodeRabbit inference engine (AGENTS.md)
Use 2-space indentation
Files:
public/locale/en.jsonsrc/pages/Facility/billing/paymentReconciliation/PaymentReconciliationShow.tsxsrc/types/billing/paymentReconciliation/paymentReconciliation.tssrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
**/*.{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/paymentReconciliation/PaymentReconciliationShow.tsxsrc/types/billing/paymentReconciliation/paymentReconciliation.tssrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.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/paymentReconciliation/PaymentReconciliationShow.tsxsrc/types/billing/paymentReconciliation/paymentReconciliation.tssrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
Use declarative JSX
Files:
src/pages/Facility/billing/paymentReconciliation/PaymentReconciliationShow.tsxsrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.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/paymentReconciliation/PaymentReconciliationShow.tsxsrc/types/billing/paymentReconciliation/paymentReconciliation.tssrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.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/paymentReconciliation/PaymentReconciliationShow.tsxsrc/types/billing/paymentReconciliation/paymentReconciliation.tssrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.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/paymentReconciliation/PaymentReconciliationShow.tsxsrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.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/paymentReconciliation/PaymentReconciliationShow.tsxsrc/types/billing/paymentReconciliation/paymentReconciliation.tssrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.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/paymentReconciliation/PaymentReconciliationShow.tsxsrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.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/paymentReconciliation/PaymentReconciliationShow.tsxsrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.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/paymentReconciliation/PaymentReconciliationShow.tsxsrc/types/billing/paymentReconciliation/paymentReconciliation.tssrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
src/{Utils,types,providers}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Document medical data flows, validation requirements, and healthcare workflows with clinical reasoning in API and utility code comments
Files:
src/types/billing/paymentReconciliation/paymentReconciliation.ts
src/types/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use strict typing for all medical data structures and API interfaces in TypeScript type definitions
src/types/**/*.{ts,tsx}: Organize types into domain-specific subdirectories within src/types/: emr/ (Electronic Medical Records), facility/, auth/, user/, billing/, inventory/, and scheduling/
Follow existing enum patterns from patient.ts: use PascalCase enum names with snake_case enum values, and always include an 'Unknown' fallback option
Use import path conventions with @ alias: cross-domain imports from @/types/, organization from @/types/organization/, user from @/types/user/, and patient identifiers from @/types/patient/patientIdentifierConfig/
Use ISO 8601 format strings for all date/time fields in type definitions (e.g., created_date: string for medical appointments and schedules)
Define healthcare-specific utility types as union types: EmergencyPriority ('critical' | 'urgent' | 'semi-urgent' | 'non-urgent'), BedStatus, and MedicationRoute
Zod schema definitions must match corresponding TypeScript interfaces, including validation rules (min/max for strings/numbers, regex for phone numbers, nativeEnum for enums), and export inferred typesTypeScript type definitions and typed API definitions should be organized in src/types/ directory
Files:
src/types/billing/paymentReconciliation/paymentReconciliation.ts
**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
Use camelCase for utility file names (e.g.,
useAuth.ts)
Files:
src/types/billing/paymentReconciliation/paymentReconciliation.ts
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/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/components/ui/multi-filter/utils/Utils.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/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/components/ui/multi-filter/utils/Utils.tsx
🧠 Learnings (54)
📓 Common learnings
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-01-15T04:16:14.978Z
Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 9956
File: src/pages/Patient/index.tsx:71-71
Timestamp: 2025-01-15T04:16:14.978Z
Learning: In this project, translations are only added to the English locale (en.json) through pull requests. Other locale files are managed through Crowdin and should not be modified directly in PRs.
Applied to files:
public/locale/en.json
📚 Learning: 2025-01-15T04:16:14.978Z
Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 9956
File: src/pages/Patient/index.tsx:71-71
Timestamp: 2025-01-15T04:16:14.978Z
Learning: In this project, new translation strings must only be added to the English locale (en.json) through pull requests. Translations for other languages (ta.json, mr.json, ml.json, hi.json, kn.json, etc.) are managed through Crowdin (https://crowdin.com/project/ohccarefe) and should not be modified directly in PRs.
Applied to files:
public/locale/en.json
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/ShortcutContext.tsx : Implement ShortcutContext with medical workflow keyboard shortcuts for rapid clinical actions and emergency protocol shortcuts for rapid response scenarios, including accessibility shortcuts for clinical environments
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentReconciliationShow.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsx
📚 Learning: 2025-11-25T13:53:20.837Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/**/*.{ts,tsx} : Follow existing enum patterns from patient.ts: use PascalCase enum names with snake_case enum values, and always include an 'Unknown' fallback option
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentReconciliationShow.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/paymentReconciliation/PaymentReconciliationShow.tsxsrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.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/paymentReconciliation/PaymentReconciliationShow.tsxsrc/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsxsrc/pages/Facility/billing/account/components/PrintChargeItems.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/components/ui/multi-filter/utils/Utils.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-10-12T04:44:19.609Z
Learnt from: GSMPRANEETH
Repo: ohcnetwork/care_fe PR: 13940
File: src/components/ui/filter-tabs.tsx:16-20
Timestamp: 2025-10-12T04:44:19.609Z
Learning: In the `filter-tabs` component (src/components/ui/filter-tabs.tsx), the `FilterTabOption` type uses object-only format `{ value: string; label?: string; icon?: ReactNode }` rather than a union with string, as all consumers are updated to use the object format for consistency and to support icons/labels.
Applied to files:
src/pages/Facility/billing/invoice/InvoicesData.tsxsrc/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2024-11-06T07:49:19.355Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 8781
File: src/components/Facility/ConsultationDetails/Events/EventsList.tsx:67-72
Timestamp: 2024-11-06T07:49:19.355Z
Learning: In `src/components/Facility/ConsultationDetails/Events/EventsList.tsx`, appending ' VENTILATOR' to `values.ventilator_interface` when it is 'INVASIVE' or 'NON_INVASIVE' is required to display the correct values in daily logs, as per requirements.
Applied to files:
src/pages/Facility/billing/invoice/InvoicesData.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsx
📚 Learning: 2025-08-26T06:35:18.610Z
Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13514
File: src/pages/Facility/settings/billing/discount/discount-components/DiscountComponentSettings.tsx:111-119
Timestamp: 2025-08-26T06:35:18.610Z
Learning: In src/pages/Facility/settings/billing/discount/discount-components/DiscountComponentSettings.tsx, the Input component uses className="w-full lg:w-[250px]" instead of matching the Discount Codes section's lg:w-[300px] due to specific responsiveness issues on medium screen sizes.
Applied to files:
src/pages/Facility/billing/invoice/InvoicesData.tsx
📚 Learning: 2025-11-25T13:51:41.208Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/lib.instructions.md:0-0
Timestamp: 2025-11-25T13:51:41.208Z
Learning: Applies to src/lib/**/utils.ts : Implement class variance authority patterns for component variant styling in utils.ts
Applied to files:
src/components/ui/multi-filter/filterConfigs.tsxsrc/components/ui/multi-filter/utils/Utils.tsx
📚 Learning: 2025-11-25T13:53:20.837Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/**/*.{ts,tsx} : Define healthcare-specific utility types as union types: EmergencyPriority ('critical' | 'urgent' | 'semi-urgent' | 'non-urgent'), BedStatus, and MedicationRoute
Applied to files:
src/components/ui/multi-filter/filterConfigs.tsx
📚 Learning: 2025-08-30T17:02:51.723Z
Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13567
File: src/components/ui/autocomplete.tsx:252-253
Timestamp: 2025-08-30T17:02:51.723Z
Learning: In the autocomplete component (src/components/ui/autocomplete.tsx), removing -translate-y-1/2 from the CaretSortIcon className fixes vertical alignment issues. Adding -translate-y-1/2 causes misalignment in this specific component context.
Applied to files:
src/components/ui/multi-filter/MultiFilter.tsx
📚 Learning: 2025-10-12T06:10:56.702Z
Learnt from: GSMPRANEETH
Repo: ohcnetwork/care_fe PR: 13940
File: src/components/ui/filter-tabs.tsx:54-88
Timestamp: 2025-10-12T06:10:56.702Z
Learning: In the FilterTabs component (src/components/ui/filter-tabs.tsx), the `options` prop is always static in the codebase. All consumers pass options derived from TypeScript enums (e.g., PrescriptionStatus, Status) or static arrays that don't change at runtime. No useEffect is needed to sync options state because options never change after the initial render.
Applied to files:
src/components/ui/multi-filter/MultiFilter.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-08-15T19:51:24.937Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12882
File: public/locale/en.json:3356-3356
Timestamp: 2025-08-15T19:51:24.937Z
Learning: In the AllergyTable component and related redesigned components (SymptomTable, DiagnosisTable) in `src/components/Patient/allergy/AllergyTable.tsx`, dynamic i18n lookups are used like `t(allergy.verification_status)` where the verification_status field can contain values like "presumed", "confirmed", "unconfirmed", etc. These require corresponding translation keys in the locale files.
Applied to files:
src/pages/Facility/billing/invoice/PrintInvoice.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 CAREUI imports for medical-specific functionality and shadcn/ui imports for standard UI components - CAREUI for medical interactions/workflows/data, shadcn/ui for buttons, forms, modals, tables, navigation
Applied to files:
src/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use healthcare-specific CAREUI custom components (Calendar, WeekdayCheckbox, Zoom) from `@/CAREUI/`
Applied to files:
src/pages/Facility/billing/invoice/PrintInvoice.tsxsrc/pages/Facility/billing/invoice/InvoiceShow.tsxsrc/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `PatientRead` type from `@/types/emr/patient/patient` for patient data handling
Applied to files:
src/pages/Facility/billing/invoice/PrintInvoice.tsx
📚 Learning: 2025-11-25T13:53:20.837Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/emr/patient/**/*.{ts,tsx} : EMR-specific interface patterns should include: id, name, blood_group (optional), instance_tags, geo_organization, instance_identifiers, created_by, and year_of_birth fields for patient types
Applied to files:
src/pages/Facility/billing/invoice/PrintInvoice.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 `cva()` from class variance authority for variant-based component styling
Applied to files:
src/components/ui/multi-filter/utils/Utils.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 `buttonVariants` from `@/components/ui/button` with CVA patterns for button styling
Applied to files:
src/components/ui/multi-filter/utils/Utils.tsx
📚 Learning: 2025-11-25T13:51:41.208Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/lib.instructions.md:0-0
Timestamp: 2025-11-25T13:51:41.208Z
Learning: Applies to src/lib/**/utils.ts : Implement cn() conditional class name utility using `clsx` and `tailwind-merge` in utils.ts
Applied to files:
src/components/ui/multi-filter/utils/Utils.tsx
📚 Learning: 2025-11-25T13:53:40.623Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/utils.instructions.md:0-0
Timestamp: 2025-11-25T13:53:40.623Z
Learning: Applies to src/Utils/**/*.{ts,tsx} : Document the purpose and behavior of non-obvious utility functions
Applied to files:
src/components/ui/multi-filter/utils/Utils.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 Tailwind CSS 4.1.3 color system: primary-700, gray-900, red-500 pattern with dark mode variants
Applied to files:
src/components/ui/multi-filter/utils/Utils.tsx
📚 Learning: 2025-11-25T13:53:40.623Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/utils.instructions.md:0-0
Timestamp: 2025-11-25T13:53:40.623Z
Learning: Applies to src/Utils/**/*.{ts,tsx} : Export functions with clear, self-documenting names and group related utilities in the same file
Applied to files:
src/components/ui/multi-filter/utils/Utils.tsx
📚 Learning: 2024-11-06T18:12:29.794Z
Learnt from: modamaan
Repo: ohcnetwork/care_fe PR: 8954
File: src/components/Shifting/ShiftDetails.tsx:432-433
Timestamp: 2024-11-06T18:12:29.794Z
Learning: In `src/components/Shifting/ShiftDetails.tsx`, the `print` button is inside the `PrintPreview` component and the `close` button is outside, so aligning them with flexbox within the same container isn't feasible.
Applied to files:
src/pages/Facility/billing/invoice/InvoiceShow.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Ensure medical forms and reports render correctly in print media
Applied to files:
src/pages/Facility/billing/invoice/InvoiceShow.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PatientContext.tsx : Implement Patient Context for current patient selection and medical alerts
Applied to files:
src/pages/Facility/billing/invoice/InvoiceShow.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/invoice/InvoiceShow.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/billing/invoice/InvoiceShow.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Use standard medical component interface patterns with medicalContext, accessibility properties (ariaLabel, screenReaderText), clinical validation callbacks (onValidationError), and medical data properties (patientId, facilityId)
Applied to files:
src/pages/Facility/billing/invoice/InvoiceShow.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{tsx,ts} : Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Applied to files:
src/pages/Facility/billing/invoice/InvoiceShow.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Create PermissionContext type with userPermissions array, canAccessPatient method, canPrescribeMedication boolean, and emergencyOverride boolean properties, along with a usePermissions hook that throws an error if used outside PermissionProvider
Applied to files:
src/pages/Facility/billing/invoice/InvoiceShow.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/EmergencyContext.tsx : Implement Emergency Context for critical care protocols and rapid response
Applied to files:
src/pages/Facility/billing/invoice/InvoiceShow.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `tanstack/react-query` for server state management with facility data and patient records
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.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/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-11-25T13:51:41.208Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/lib.instructions.md:0-0
Timestamp: 2025-11-25T13:51:41.208Z
Learning: Applies to src/lib/**/*.{ts,tsx} : Maintain audit trails for medical data access
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Integrate CAREUI components with React Query for real-time data from medical API endpoints
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.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/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Custom React hooks for healthcare workflows must follow hooks.instructions.md
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.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 named exports from `lucide-react` for icons (e.g., `import { SettingsIcon } from "lucide-react"`)
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `date-fns` with locale support for formatting medical timestamps
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.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/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{tsx,ts} : Use React 19.1.1 features and patterns following React 19 Documentation for healthcare application development
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use React 19.1.1 hooks pattern - Functional components only
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{ts,tsx} : Use date-fns for date handling and manipulation with locale awareness for medical timestamps
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Ensure full compatibility with react-hook-form for medical data collection in CAREUI components
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-10-07T08:56:41.983Z
Learnt from: yash-learner
Repo: ohcnetwork/care_fe PR: 13918
File: src/components/Common/RequirementsSelector.tsx:330-336
Timestamp: 2025-10-07T08:56:41.983Z
Learning: In src/components/Common/RequirementsSelector.tsx, when custom trigger components (like TriggerButton) are used with Radix UI primitives' asChild prop, they must use React.forwardRef and spread additional props to receive refs and event handlers. Without forwardRef, asChild will not work and the trigger will fail to open the drawer/sheet.
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.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/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-11-22T19:18:25.795Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14473
File: src/components/ui/multi-select.tsx:68-82
Timestamp: 2025-11-22T19:18:25.795Z
Learning: In the MultiSelect component (src/components/ui/multi-select.tsx), the grouping logic intentionally uses the `value` prop (committed state from parent) instead of `selectedValues` (local draft state) to show the original selected/unselected groups. Changes made by toggling options should only reflect after clicking "Done" and on the next popover/drawer opening, not live as the user makes selections.
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.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/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-11-25T13:54:09.978Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursor/rules/02-coding-standards.mdc:0-0
Timestamp: 2025-11-25T13:54:09.978Z
Learning: Applies to **/*.tsx : Use Shadcn UI components when available
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-09-29T14:07:50.923Z
Learnt from: GSMPRANEETH
Repo: ohcnetwork/care_fe PR: 13750
File: src/components/Questionnaire/MedicationValueSetSelect.tsx:240-254
Timestamp: 2025-09-29T14:07:50.923Z
Learning: The codebase uses src/common/constants.tsx for application-wide constants like RESULTS_PER_PAGE_LIMIT, and follows uppercase naming convention for constants.
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
📚 Learning: 2025-11-25T13:50:54.683Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/common.instructions.md:0-0
Timestamp: 2025-11-25T13:50:54.683Z
Learning: Applies to src/common/**/constants.tsx : Define core application configuration including RESULTS_PER_PAGE_LIMIT for API pagination in constants.tsx
Applied to files:
src/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx
🧬 Code graph analysis (6)
src/pages/Facility/billing/paymentReconciliation/PaymentReconciliationShow.tsx (1)
src/types/billing/paymentReconciliation/paymentReconciliation.ts (1)
PAYMENT_RECONCILIATION_METHOD_MAP(61-72)
src/pages/Facility/billing/paymentReconciliation/PrintPaymentReconciliation.tsx (1)
src/types/billing/paymentReconciliation/paymentReconciliation.ts (1)
PAYMENT_RECONCILIATION_METHOD_MAP(61-72)
src/pages/Facility/billing/account/components/PrintChargeItems.tsx (1)
src/types/billing/paymentReconciliation/paymentReconciliation.ts (1)
PAYMENT_RECONCILIATION_METHOD_MAP(61-72)
src/components/ui/multi-filter/filterConfigs.tsx (4)
src/components/ui/multi-filter/utils/Utils.tsx (1)
getVariantColorClasses(303-315)src/types/billing/account/Account.ts (2)
ACCOUNT_BILLING_STATUS_COLORS(73-81)ACCOUNT_STATUS_COLORS(66-71)src/types/billing/invoice/invoice.ts (1)
INVOICE_STATUS_COLORS(15-21)src/types/billing/paymentReconciliation/paymentReconciliation.ts (2)
PAYMENT_RECONCILIATION_STATUS_COLORS(18-23)PAYMENT_RECONCILIATION_METHOD_MAP(61-72)
src/pages/Facility/billing/invoice/PrintInvoice.tsx (1)
src/types/billing/paymentReconciliation/paymentReconciliation.ts (1)
PAYMENT_RECONCILIATION_METHOD_MAP(61-72)
src/pages/Facility/billing/invoice/InvoiceShow.tsx (3)
src/components/ui/button.tsx (1)
Button(85-85)src/lib/utils.ts (1)
cn(4-6)src/types/billing/paymentReconciliation/paymentReconciliation.ts (1)
PAYMENT_RECONCILIATION_METHOD_MAP(61-72)
⏰ 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: CodeQL-Build
- GitHub Check: deploy-preview
| export const paymentMethodFilter = ( | ||
| key: string = "payment_method", | ||
| mode: FilterMode = "single", | ||
| customOperations?: Operation[], | ||
| ) => | ||
| createFilterConfig( | ||
| key, | ||
| t("payment_method"), | ||
| "command", | ||
| Object.values(PaymentReconciliationPaymentMethod).map((value) => ({ | ||
| value: value, | ||
| label: t(PAYMENT_RECONCILIATION_METHOD_MAP[value]), | ||
| })), | ||
| { | ||
| renderSelected: (selected: FilterValues) => { | ||
| const selectedStatus = selected as string[]; | ||
| if (typeof selectedStatus[0] === "string") { | ||
| const option = | ||
| PAYMENT_RECONCILIATION_METHOD_MAP[ | ||
| selectedStatus[0] as PaymentReconciliationPaymentMethod | ||
| ]; | ||
| return ( | ||
| <GenericSelectedBadge | ||
| selectedValue={option} | ||
| selectedLength={selectedStatus.length} | ||
| /> | ||
| ); | ||
| } | ||
| return <></>; | ||
| }, | ||
| getOperations: () => customOperations || [{ label: "is" }], | ||
| mode, | ||
| icon: <CircleDashed className="size-4" />, | ||
| showColorIndicators: false, | ||
| }, | ||
| ); |
There was a problem hiding this comment.
Unnecessary t() wrapper around pre-translated labels.
PAYMENT_RECONCILIATION_METHOD_MAP already contains English display strings like "Cash", "Credit Card", etc. Wrapping these in t() at line 409 is redundant and may cause i18n lookup failures for missing keys.
🔧 Suggested fix
Object.values(PaymentReconciliationPaymentMethod).map((value) => ({
value: value,
- label: t(PAYMENT_RECONCILIATION_METHOD_MAP[value]),
+ label: PAYMENT_RECONCILIATION_METHOD_MAP[value],
})),Alternatively, if these labels should be translated, add corresponding i18n keys (e.g., "payment_method_cash": "Cash") and use those keys instead.
🤖 Prompt for AI Agents
In @src/components/ui/multi-filter/filterConfigs.tsx around lines 398 - 433, The
code is wrapping already-human-readable labels from
PAYMENT_RECONCILIATION_METHOD_MAP in t(), which is redundant and can cause
missing i18n lookups; update paymentMethodFilter (in createFilterConfig call) to
stop calling t() on PAYMENT_RECONCILIATION_METHOD_MAP values—replace
t(PAYMENT_RECONCILIATION_METHOD_MAP[value]) in the options map with
PAYMENT_RECONCILIATION_METHOD_MAP[value], and also remove the t() around option
in renderSelected (use option directly) unless you intend to switch to i18n
keys, in which case replace the map entries with proper i18n keys before calling
t().
| export const getVariantColorClasses = (variant: string) => { | ||
| const variantMap: Record<string, string> = { | ||
| primary: "border-primary-300 bg-primary-100 text-primary-900", | ||
| secondary: "border-gray-300 bg-gray-100 text-gray-900", | ||
| destructive: "border-red-300 bg-red-100 text-red-900", | ||
| blue: "border-blue-300 bg-blue-100 text-blue-900", | ||
| green: "border-green-300 bg-green-100 text-green-900", | ||
| yellow: "border-yellow-300 bg-yellow-100/80 text-yellow-900", | ||
| orange: "border-orange-300 bg-orange-100 text-orange-900", | ||
| purple: "border-purple-300 bg-purple-100 text-purple-900", | ||
| }; | ||
| return variantMap[variant] || variantMap.secondary; | ||
| }; |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider adding JSDoc comment for documentation.
The getVariantColorClasses function implementation is correct and follows Tailwind CSS 4.x patterns. However, per coding guidelines, utility functions should be documented with their purpose and behavior.
📝 Suggested JSDoc comment
+/**
+ * Maps a variant name to its corresponding Tailwind CSS color classes.
+ * Used for consistent color styling across filter badges and UI components.
+ *
+ * @param variant - The variant name (e.g., "primary", "destructive", "blue")
+ * @returns A string of Tailwind CSS classes for border, background, and text color
+ * @example
+ * getVariantColorClasses("primary") // Returns "border-primary-300 bg-primary-100 text-primary-900"
+ * getVariantColorClasses("unknown") // Returns "border-gray-300 bg-gray-100 text-gray-900" (fallback)
+ */
export const getVariantColorClasses = (variant: string) => {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const getVariantColorClasses = (variant: string) => { | |
| const variantMap: Record<string, string> = { | |
| primary: "border-primary-300 bg-primary-100 text-primary-900", | |
| secondary: "border-gray-300 bg-gray-100 text-gray-900", | |
| destructive: "border-red-300 bg-red-100 text-red-900", | |
| blue: "border-blue-300 bg-blue-100 text-blue-900", | |
| green: "border-green-300 bg-green-100 text-green-900", | |
| yellow: "border-yellow-300 bg-yellow-100/80 text-yellow-900", | |
| orange: "border-orange-300 bg-orange-100 text-orange-900", | |
| purple: "border-purple-300 bg-purple-100 text-purple-900", | |
| }; | |
| return variantMap[variant] || variantMap.secondary; | |
| }; | |
| /** | |
| * Maps a variant name to its corresponding Tailwind CSS color classes. | |
| * Used for consistent color styling across filter badges and UI components. | |
| * | |
| * @param variant - The variant name (e.g., "primary", "destructive", "blue") | |
| * @returns A string of Tailwind CSS classes for border, background, and text color | |
| * @example | |
| * getVariantColorClasses("primary") // Returns "border-primary-300 bg-primary-100 text-primary-900" | |
| * getVariantColorClasses("unknown") // Returns "border-gray-300 bg-gray-100 text-gray-900" (fallback) | |
| */ | |
| export const getVariantColorClasses = (variant: string) => { | |
| const variantMap: Record<string, string> = { | |
| primary: "border-primary-300 bg-primary-100 text-primary-900", | |
| secondary: "border-gray-300 bg-gray-100 text-gray-900", | |
| destructive: "border-red-300 bg-red-100 text-red-900", | |
| blue: "border-blue-300 bg-blue-100 text-blue-900", | |
| green: "border-green-300 bg-green-100 text-green-900", | |
| yellow: "border-yellow-300 bg-yellow-100/80 text-yellow-900", | |
| orange: "border-orange-300 bg-orange-100 text-orange-900", | |
| purple: "border-purple-300 bg-purple-100 text-purple-900", | |
| }; | |
| return variantMap[variant] || variantMap.secondary; | |
| }; |
🤖 Prompt for AI Agents
In @src/components/ui/multi-filter/utils/Utils.tsx around lines 303 - 315, Add a
JSDoc block above the exported getVariantColorClasses function that briefly
describes its purpose (maps a variant key to Tailwind CSS class string),
documents the parameter (variant: string — accepted keys like "primary",
"secondary", "destructive", "blue", "green", "yellow", "orange", "purple"), and
the return value (string of Tailwind classes, defaults to the "secondary"
mapping when the variant is unknown); ensure the comment notes it returns
combined border/bg/text classes and that the function is exported for reuse.
| { | ||
| PAYMENT_RECONCILIATION_METHOD_MAP[ | ||
| payment.method | ||
| ] | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider adding a fallback for unknown payment methods.
While payment.method should always be defined for active payments, a fallback would improve resilience if the API returns an unexpected method value.
🔧 Suggested fallback
<TableCell>
- {
- PAYMENT_RECONCILIATION_METHOD_MAP[
- payment.method
- ]
- }
+ {PAYMENT_RECONCILIATION_METHOD_MAP[
+ payment.method
+ ] ?? payment.method}
</TableCell>🤖 Prompt for AI Agents
In @src/pages/Facility/billing/account/components/PrintChargeItems.tsx around
lines 612 - 616, The lookup of PAYMENT_RECONCILIATION_METHOD_MAP[payment.method]
in PrintChargeItems.tsx should have a defensive fallback for unknown or
unexpected values; update the render to use a default label (e.g., "Unknown" or
a localized "Unrecognized payment method") when
PAYMENT_RECONCILIATION_METHOD_MAP[payment.method] is falsy or payment.method is
missing, and ensure you reference PAYMENT_RECONCILIATION_METHOD_MAP and
payment.method so the change is made at the exact lookup site.
| <span className="flex justify-between items-center flex-wrap gap-2"> | ||
| {payment.payment_datetime | ||
| ? format( | ||
| new Date(payment.payment_datetime), | ||
| "d MMM yyyy, hh:mm a", | ||
| ) | ||
| : "-"} | ||
|
|
||
| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| className="text-gray-800 font-semibold text-xs p-2" | ||
| onClick={() => { | ||
| navigate( | ||
| `/facility/${facilityId}/billing/payments/${payment.id}/print`, | ||
| ); | ||
| }} | ||
| > | ||
| <> | ||
| <PrinterIcon className="size-3" /> | ||
| {t("print")} | ||
| </> | ||
| </Button> | ||
| <div className="flex gap-2"> | ||
| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| className="text-gray-800 font-semibold text-xs p-2" | ||
| onClick={() => { | ||
| navigate( | ||
| `/facility/${facilityId}/billing/payments/${payment.id}`, | ||
| ); | ||
| }} | ||
| > | ||
| <> | ||
| <EyeIcon className="size-3" /> | ||
| {t("view")} | ||
| </> | ||
| </Button> | ||
| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| className="text-gray-800 font-semibold text-xs p-2" | ||
| onClick={() => { | ||
| navigate( | ||
| `/facility/${facilityId}/billing/payments/${payment.id}/print`, | ||
| ); | ||
| }} | ||
| > | ||
| <> | ||
| <PrinterIcon className="size-3" /> | ||
| {t("print")} | ||
| </> | ||
| </Button> | ||
| </div> | ||
| </span> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Remove unnecessary fragment wrappers in button content.
The UI restructuring to add view and print buttons is well-implemented with proper responsive layout using flex-wrap. However, the fragment wrappers (<></>) around the button content on lines 1073-1076 and 1088-1091 are unnecessary.
♻️ Simplify button content
<Button
variant="outline"
size="sm"
className="text-gray-800 font-semibold text-xs p-2"
onClick={() => {
navigate(
`/facility/${facilityId}/billing/payments/${payment.id}`,
);
}}
>
- <>
<EyeIcon className="size-3" />
{t("view")}
- </>
</Button>
<Button
variant="outline"
size="sm"
className="text-gray-800 font-semibold text-xs p-2"
onClick={() => {
navigate(
`/facility/${facilityId}/billing/payments/${payment.id}/print`,
);
}}
>
- <>
<PrinterIcon className="size-3" />
{t("print")}
- </>
</Button>📝 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.
| <span className="flex justify-between items-center flex-wrap gap-2"> | |
| {payment.payment_datetime | |
| ? format( | |
| new Date(payment.payment_datetime), | |
| "d MMM yyyy, hh:mm a", | |
| ) | |
| : "-"} | |
| <Button | |
| variant="outline" | |
| size="sm" | |
| className="text-gray-800 font-semibold text-xs p-2" | |
| onClick={() => { | |
| navigate( | |
| `/facility/${facilityId}/billing/payments/${payment.id}/print`, | |
| ); | |
| }} | |
| > | |
| <> | |
| <PrinterIcon className="size-3" /> | |
| {t("print")} | |
| </> | |
| </Button> | |
| <div className="flex gap-2"> | |
| <Button | |
| variant="outline" | |
| size="sm" | |
| className="text-gray-800 font-semibold text-xs p-2" | |
| onClick={() => { | |
| navigate( | |
| `/facility/${facilityId}/billing/payments/${payment.id}`, | |
| ); | |
| }} | |
| > | |
| <> | |
| <EyeIcon className="size-3" /> | |
| {t("view")} | |
| </> | |
| </Button> | |
| <Button | |
| variant="outline" | |
| size="sm" | |
| className="text-gray-800 font-semibold text-xs p-2" | |
| onClick={() => { | |
| navigate( | |
| `/facility/${facilityId}/billing/payments/${payment.id}/print`, | |
| ); | |
| }} | |
| > | |
| <> | |
| <PrinterIcon className="size-3" /> | |
| {t("print")} | |
| </> | |
| </Button> | |
| </div> | |
| </span> | |
| <span className="flex justify-between items-center flex-wrap gap-2"> | |
| {payment.payment_datetime | |
| ? format( | |
| new Date(payment.payment_datetime), | |
| "d MMM yyyy, hh:mm a", | |
| ) | |
| : "-"} | |
| <div className="flex gap-2"> | |
| <Button | |
| variant="outline" | |
| size="sm" | |
| className="text-gray-800 font-semibold text-xs p-2" | |
| onClick={() => { | |
| navigate( | |
| `/facility/${facilityId}/billing/payments/${payment.id}`, | |
| ); | |
| }} | |
| > | |
| <EyeIcon className="size-3" /> | |
| {t("view")} | |
| </Button> | |
| <Button | |
| variant="outline" | |
| size="sm" | |
| className="text-gray-800 font-semibold text-xs p-2" | |
| onClick={() => { | |
| navigate( | |
| `/facility/${facilityId}/billing/payments/${payment.id}/print`, | |
| ); | |
| }} | |
| > | |
| <PrinterIcon className="size-3" /> | |
| {t("print")} | |
| </Button> | |
| </div> | |
| </span> |
🤖 Prompt for AI Agents
In @src/pages/Facility/billing/invoice/InvoiceShow.tsx around lines 1054 - 1094,
The Button children currently wrap the EyeIcon+text and PrinterIcon+text inside
unnecessary React fragments (<>...</>) in the JSX for the two action buttons;
remove those fragment wrappers so the Button components directly render their
children (EyeIcon and {t("view")}, and PrinterIcon and {t("print")}) within the
existing Button elements (refer to the Button elements that call navigate with
`/facility/${facilityId}/billing/payments/${payment.id}` and
`/facility/${facilityId}/billing/payments/${payment.id}/print` and the
EyeIcon/PrinterIcon usages).
| <Badge variant="outline"> | ||
| {t(PAYMENT_RECONCILIATION_METHOD_MAP[payment.method])} | ||
| </Badge> |
There was a problem hiding this comment.
Incorrect usage of t() with current map structure.
The code wraps PAYMENT_RECONCILIATION_METHOD_MAP[payment.method] with t(), but the map currently contains English display strings ("Cash", "Credit Card", etc.) rather than i18n keys. This will cause t() to search for translation keys that don't exist.
Resolution:
Once the centralized map is updated to use i18n keys (as recommended in the comment for src/types/billing/paymentReconciliation/paymentReconciliation.ts), this usage will be correct. However, it's currently broken and will display translation key errors.
For immediate fix, either:
- Remove the
t()wrapper here temporarily, OR - Fix the centralized map first to use i18n keys
🤖 Prompt for AI Agents
In
@src/pages/Facility/billing/paymentReconciliation/PaymentReconciliationShow.tsx
around lines 146 - 148, The code is calling
t(PAYMENT_RECONCILIATION_METHOD_MAP[payment.method]) but
PAYMENT_RECONCILIATION_METHOD_MAP currently contains literal English strings, so
t() will look for non‑existent i18n keys; fix by removing the t() wrapper in
PaymentReconciliationShow.tsx and render
PAYMENT_RECONCILIATION_METHOD_MAP[payment.method] directly inside the Badge (or
alternatively update the centralized PAYMENT_RECONCILIATION_METHOD_MAP to
contain i18n keys first), referencing the PAYMENT_RECONCILIATION_METHOD_MAP
constant and the payment.method access used in the Badge.
| <InfoItem | ||
| label={t("payment_method")} | ||
| value={methodMap[payment.method]} | ||
| value={PAYMENT_RECONCILIATION_METHOD_MAP[payment.method]} |
There was a problem hiding this comment.
Inconsistent usage: missing t() wrapper.
At line 246, PAYMENT_RECONCILIATION_METHOD_MAP[payment.method] is used directly without a t() wrapper, while at line 147 the same pattern includes t(). This inconsistency should be resolved.
Given the current map structure contains English strings, this line is technically correct, but it's inconsistent with line 147 and will need updating once the centralized map is fixed to use i18n keys.
Recommendation: Align all usages to consistently wrap map values with t() after the centralized map is updated to use i18n keys.
🤖 Prompt for AI Agents
In
@src/pages/Facility/billing/paymentReconciliation/PaymentReconciliationShow.tsx
at line 246, The value usage of
PAYMENT_RECONCILIATION_METHOD_MAP[payment.method] is inconsistent with other
places that call t(); update the component to wrap the mapped value with t()
(i.e., t(PAYMENT_RECONCILIATION_METHOD_MAP[payment.method])) so it matches the
usage at line 147 and will work once the centralized map switches to i18n keys;
change the instance that references PAYMENT_RECONCILIATION_METHOD_MAP and
payment.method to pass its result into t().
| // Resolve created_by_username from URL to user object | ||
| const { data: selectedUser } = useQuery({ | ||
| queryKey: ["user", qParams.created_by_username], | ||
| queryFn: query(userApi.get, { | ||
| pathParams: { username: qParams.created_by_username }, | ||
| }), | ||
| enabled: !!qParams.created_by_username && !createdBy, | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| if (selectedUser && qParams.created_by_username) { | ||
| setCreatedBy(selectedUser); | ||
| updateQuery({ created_by: selectedUser.id }); | ||
| } | ||
| }, [selectedUser]); | ||
|
|
||
| useEffect(() => { | ||
| if (createdBy && !qParams.created_by) { | ||
| setCreatedBy(undefined); | ||
| } | ||
| }, [qParams.created_by]); |
There was a problem hiding this comment.
Missing dependencies in useEffect hooks may cause stale closures.
Both useEffect hooks at lines 97-102 and 104-108 have incomplete dependency arrays:
- Lines 97-102: Missing
updateQueryin deps - Lines 104-108: Missing
setCreatedByin deps (though setState is stable, ESLint may flag this)
More importantly, the logic at lines 97-102 could cause issues: when selectedUser changes and qParams.created_by_username exists, it updates created_by in the query. However, updateQuery is not in the dependency array.
🔧 Suggested fix
useEffect(() => {
if (selectedUser && qParams.created_by_username) {
setCreatedBy(selectedUser);
updateQuery({ created_by: selectedUser.id });
}
- }, [selectedUser]);
+ }, [selectedUser, qParams.created_by_username, updateQuery]);
useEffect(() => {
if (createdBy && !qParams.created_by) {
setCreatedBy(undefined);
}
- }, [qParams.created_by]);
+ }, [qParams.created_by, createdBy]);📝 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.
| // Resolve created_by_username from URL to user object | |
| const { data: selectedUser } = useQuery({ | |
| queryKey: ["user", qParams.created_by_username], | |
| queryFn: query(userApi.get, { | |
| pathParams: { username: qParams.created_by_username }, | |
| }), | |
| enabled: !!qParams.created_by_username && !createdBy, | |
| }); | |
| useEffect(() => { | |
| if (selectedUser && qParams.created_by_username) { | |
| setCreatedBy(selectedUser); | |
| updateQuery({ created_by: selectedUser.id }); | |
| } | |
| }, [selectedUser]); | |
| useEffect(() => { | |
| if (createdBy && !qParams.created_by) { | |
| setCreatedBy(undefined); | |
| } | |
| }, [qParams.created_by]); | |
| // Resolve created_by_username from URL to user object | |
| const { data: selectedUser } = useQuery({ | |
| queryKey: ["user", qParams.created_by_username], | |
| queryFn: query(userApi.get, { | |
| pathParams: { username: qParams.created_by_username }, | |
| }), | |
| enabled: !!qParams.created_by_username && !createdBy, | |
| }); | |
| useEffect(() => { | |
| if (selectedUser && qParams.created_by_username) { | |
| setCreatedBy(selectedUser); | |
| updateQuery({ created_by: selectedUser.id }); | |
| } | |
| }, [selectedUser, qParams.created_by_username, updateQuery]); | |
| useEffect(() => { | |
| if (createdBy && !qParams.created_by) { | |
| setCreatedBy(undefined); | |
| } | |
| }, [qParams.created_by, createdBy]); |
🤖 Prompt for AI Agents
In @src/pages/Facility/billing/paymentReconciliation/PaymentsData.tsx around
lines 88 - 108, The two useEffect hooks are missing dependencies and can cause
stale closures or loops; update the first effect (watching selectedUser) to
include updateQuery and qParams.created_by_username in its dependency array and
guard the update by checking that selectedUser.id exists and that
qParams.created_by !== selectedUser.id before calling setCreatedBy(selectedUser)
and updateQuery({ created_by: selectedUser.id }); update the second effect to
include setCreatedBy (and any qParams object refs you use) in its dependency
array and keep its current guard (if createdBy && !qParams.created_by) to avoid
needless state changes.
| export const PAYMENT_RECONCILIATION_METHOD_MAP: Record< | ||
| PaymentReconciliationPaymentMethod, | ||
| string | ||
| > = { | ||
| cash: "Cash", | ||
| ccca: "Credit Card", | ||
| cchk: "Credit Check", | ||
| cdac: "Credit Account", | ||
| chck: "Check", | ||
| ddpo: "Direct Deposit", | ||
| debc: "Debit Card", | ||
| }; |
There was a problem hiding this comment.
Hardcoded strings violate i18n requirements.
The display labels in PAYMENT_RECONCILIATION_METHOD_MAP are hardcoded English strings. According to the coding guidelines, all literal strings must use i18next for multi-language support in healthcare interfaces.
🌐 Proposed fix to use i18n keys
Replace the hardcoded English strings with i18n keys that can be translated:
export const PAYMENT_RECONCILIATION_METHOD_MAP: Record<
PaymentReconciliationPaymentMethod,
string
> = {
- cash: "Cash",
- ccca: "Credit Card",
- cchk: "Credit Check",
- cdac: "Credit Account",
- chck: "Check",
- ddpo: "Direct Deposit",
- debc: "Debit Card",
+ cash: "payment_method_cash",
+ ccca: "payment_method_credit_card",
+ cchk: "payment_method_credit_check",
+ cdac: "payment_method_credit_account",
+ chck: "payment_method_check",
+ ddpo: "payment_method_direct_deposit",
+ debc: "payment_method_debit_card",
};Then update all consumers to wrap the map values with t():
{t(PAYMENT_RECONCILIATION_METHOD_MAP[payment.method])}Don't forget to add the corresponding keys to public/locale/en.json and other locale files.
🤖 Prompt for AI Agents
In @src/types/billing/paymentReconciliation/paymentReconciliation.ts around
lines 61 - 72, The PAYMENT_RECONCILIATION_METHOD_MAP currently holds hardcoded
English labels which breaks i18n rules; replace each string value in
PAYMENT_RECONCILIATION_METHOD_MAP with an i18n key (e.g., "payment.method.cash")
and update consumers to call
t(PAYMENT_RECONCILIATION_METHOD_MAP[payment.method]) where payment.method is
used; finally add the new keys and translations to your locale JSONs (e.g.,
public/locale/en.json) so the t() lookups resolve.
🎭 Playwright Test ResultsStatus: ✅ Passed
📊 Detailed results are available in the playwright-final-report artifact. Run: #4497 |
1 participant
Proposed Changes
Tagging: @ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.