Fixed Create template form validation messages #14949

Ishu813 · 2025-12-26T10:25:54Z

Proposed Changes

Fixes #14922

Removed * indicators from all fields.
Adjusted Zod Schema.
Fixed Validation error message not showing for fields.

Screen Recording

Screen.Recording.2026-01-03.at.16.37.42.mov

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
- Localized required-field and character-count validation messages; form validation now integrated into save flow
- Context selector rewritten as a form control with context descriptions displayed
Bug Fixes
- Save action now triggers validation before persisting changes
- Improved defaulting and syncing of context when loading or editing templates
UI/UX
- Removed asterisk indicators; labels use accessible form messaging and editor shows visible validation feedback

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

…r messages

coderabbitai · 2025-12-26T10:26:06Z

Walkthrough

Moves validation into the component with i18n-enabled messages, routes Save through form.handleSubmit, converts context selection into a FormField bound to React Hook Form, removes visual asterisks from labels while adding FormMessage usage, and relaxes TemplateEditor form typing to any.

Changes

Cohort / File(s)	Summary
Template Builder `src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx`	- Validation: moved schema inline; required and character-count messages use `t(...)` i18n strings; slug pattern/length checks retained with localized messages. - Submission: Save now calls `form.handleSubmit(handleSaveTemplate)` to run validation before save. - Form wiring: context selector rewritten as a FormField integrated with React Hook Form; updates both form value and internal `selectedContext` and shows context description. - UI: removed visible asterisks from labels; fields use `FormLabel` + `FormMessage` for accessibility and validation feedback. - Editor/API: `TemplateEditor` typing relaxed to `UseFormReturn<any>`; editor rendering now includes `FormMessage` and propagation of onChange into form state. - Insertion logic: field insertion into `template_data` adjusted for nested/queryset hierarchies and uses i18n-aware messages.

Pre-merge checks and finishing touches

❌ 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%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing validation messages in the Create template form, which aligns with the primary objective of the changeset.
Description check	✅ Passed	The description follows the repository template, references the linked issue #14922, lists key changes, includes a screen recording, provides merge checklist completion status, and tags reviewers appropriately.
Linked Issues check	✅ Passed	The PR addresses all primary coding requirements from issue #14922: removing asterisk indicators from required fields, adjusting the Zod validation schema, and fixing validation error message display for the name, slug, and context fields.
Out of Scope Changes check	✅ Passed	All code changes are directly scoped to fixing the Template Builder form validation UX issues identified in issue #14922; no unrelated modifications are present.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

coderabbitai

Actionable comments posted: 4

📜 Review details

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0aed664 and 3016c70.

📒 Files selected for processing (1)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧰 Additional context used

📓 Path-based instructions (12)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing

**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
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/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements

**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

**/*.{ts,tsx,js,jsx}: Use path aliases @/* for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursorrules)

Use declarative JSX

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{ts,tsx}: Use strict TypeScript configuration for medical data safety in all TypeScript source files
All literal strings must use i18next for multi-language support in healthcare interfaces
Use comprehensive error boundaries and user-friendly error messages for medical workflow debugging without exposing PHI
Follow ESLint configured rules for React hooks, accessibility, and code quality
Use @tanstack/react-query for server state management in API client code
Localize date and time formats for medical timestamps using locale-aware formatting functions
Use date-fns for date handling and manipulation with locale awareness for medical timestamps

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{ts,tsx,css}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use Prettier for consistent code formatting across the healthcare application

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 in src/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
Use raviger router 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-query for 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 with zod schemas in page components
Handle form submission states (loading, success, error) in page components
Use React hooks for local page state
Minimize unnecessary re-renders in page components
Implement proper authentication checks in page components
Handle different user roles and permissions in page components
Redirect to login when authentication is required in page components
Show appropriate UI based on user permissions in page components
Set appropriate page titles and meta descriptions in page components
Handle OpenGraph and Twitter card meta tags in page components
Implement structured data where applicable in page components
Implement code splitting for large page components
Use lazy loading for heavy components within page components
Optimize bundle size with proper imports in page components
Handle image optimization and lazy loading in page components
Implement comprehensive error boundaries in page components
Handle API e...

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{tsx,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{tsx,ts}: Use React 19.1.1 features and patterns following React 19 Documentation for healthcare application development
Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Use framer-motion for animations in healthcare UI interfaces

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{tsx,css}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use Tailwind CSS 4.1.3 utility classes with custom healthcare-specific design system for styling

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Use 2-space indentation

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/pages/Encounters/TemplateBuilder/TemplateBuilder.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
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/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{ts,tsx,js,jsx,json,css,scss,html}

📄 CodeRabbit inference engine (AGENTS.md)

Use 2-space indentation

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧠 Learnings (14)

📓 Common learnings

Learnt from: rajku-dev
Repo: ohcnetwork/care_fe PR: 9887
File: src/components/Users/CreateUserForm.tsx:86-92
Timestamp: 2025-01-14T09:50:51.248Z
Learning: When suggesting new validation messages in code, always check and add corresponding translation keys to the locale files (e.g., public/locale/en.json) to maintain internationalization support.

📚 Learning: 2024-11-20T23:25:06.602Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9145
File: src/common/validation.tsx:41-41
Timestamp: 2024-11-20T23:25:06.602Z
Learning: When updating the name validation pattern in `src/common/validation.tsx`, avoid partial internationalization by not adding specific non-Latin Unicode ranges unless we're prepared to support all non-Latin scripts.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:50:10.786Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{ts,tsx} : All literal strings must use i18next for multi-language support in healthcare interfaces

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:19.758Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Use `i18next` for text translations in page components (existing dependency)

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Provide clear validation error messages in validation utilities

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Use `zod` for schema validation in validation utility functions

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Create reusable validation schemas in validation utilities

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/validation.tsx : Use zod for form validation schemas in validation.tsx

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-01-14T09:22:13.878Z

Learnt from: rajku-dev
Repo: ohcnetwork/care_fe PR: 9887
File: src/components/Users/CreateUserForm.tsx:93-93
Timestamp: 2025-01-14T09:22:13.878Z
Learning: In CreateUserForm.tsx, the gender validation schema uses string literals that match GENDER_TYPES.map(g => g.id). Using GENDER_TYPES directly with z.enum() fails because it's marked with 'as const' which makes it a readonly tuple type incompatible with Zod's enum.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-06-25T05:54:03.491Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 12680
File: src/components/Questionnaire/QuestionnaireEditor.tsx:813-816
Timestamp: 2025-06-25T05:54:03.491Z
Learning: In React components using UI library Button components (like shadcn/ui), adding `type="submit"` to a Button with an onClick handler does not cause the double execution issues that might occur with native HTML buttons, as the UI library handles form submission differently.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-04-13T03:41:38.805Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11815
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:332-341
Timestamp: 2025-04-13T03:41:38.805Z
Learning: Form inputs in React components should use the controlled component pattern (using `value` instead of `defaultValue`) to ensure they properly reflect changes from all sources, particularly for textareas and form elements that may be updated from multiple places.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-13T12:33:52.373Z

Learnt from: AnveshNalimela
Repo: ohcnetwork/care_fe PR: 9096
File: src/components/Resource/ResourceList.tsx:245-245
Timestamp: 2024-11-13T12:33:52.373Z
Learning: When displaying the resource status in `ResourceList.tsx`, use `{t("consent__status")}` instead of adding a new translation key `{t("resource_status")}`.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-12-17T19:47:58.152Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14821
File: src/components/Location/LocationNavigation.tsx:161-163
Timestamp: 2025-12-17T19:47:58.152Z
Learning: To ensure the remove-unused-i18n.js cleanup script detects i18n keys, avoid wrapping keys inside a ternary expression passed directly to t(). Instead, call t() separately in each branch of a conditional, e.g. condition ? t("key1") : t("key2"), or compute the key in a variable before passing to t(). For LocationNavigation.tsx (and similar TSX files in the repo), prefer explicit separate i18n calls per branch or a shared precomputed key to guarantee all keys are statically detectable by the script.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-12-22T10:16:36.690Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 14804
File: src/pages/Facility/services/pharmacy/DispensesView.tsx:117-135
Timestamp: 2025-12-22T10:16:36.690Z
Learning: In the care_fe repository, prefer the native HTML title attribute for simple tooltips over using shadcn/ui Tooltip components. Use Tooltip components only when the tooltip requires richer content, interactivity, or accessibility enhancements that cannot be achieved with a plain title. For simple cases, add a title attribute to the element (e.g., <span title="...">). If a Tooltip is used, ensure it is accessible and necessary, and avoid duplicating content available in the title attribute.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧬 Code graph analysis (1)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx (3)

src/components/ui/button.tsx (1)

Button (85-85)

src/components/ui/form.tsx (1)

FormLabel (167-167)

src/components/ui/select.tsx (1)

Select (192-192)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: build
GitHub Check: CodeQL-Build
GitHub Check: Test

🔇 Additional comments (1)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx (1)

391-391: LGTM: FormLabel simplifications align with PR objectives.

The removal of asterisk indicators from form labels is consistent with the PR's stated goal to remove required field indicators from the UI.

Also applies to: 405-405, 423-423, 448-448

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

github-actions · 2025-12-26T10:43:41Z

🎭 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: #4215}

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

coderabbitai

Actionable comments posted: 1

♻️ Duplicate comments (3)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx (3)
63-83: Schema defined at module level prevents dynamic i18n updates.

The validation schema uses t() from the module-level import (line 52), which evaluates messages once at import time. This freezes validation messages in the initial language and won't update when users switch languages.

Move the schema inside the TemplateBuilder component to use t from useTranslation() hook, consistent with patterns in TokenCategoryForm and ScheduleChargeItemDefinitionSelector.

467-490: Add default value for template_type to maintain controlled component pattern.

The Select uses value={field.value} for controlled behavior, but template_type is not included in defaultValues (lines 107-114). For new templates, field.value will be undefined, which may cause React warnings about switching between controlled and uncontrolled components.
🔎 Proposed fix

Add template_type to the form's defaultValues:
   const form = useForm({
     resolver: zodResolver(templateBuilderSchema),
     defaultValues: {
       name: "",
       slug_value: "",
       status: "draft" as TemplateStatus,
       default_format: "html" as TemplateFormat,
       template_data: DEFAULT_TEMPLATE,
       context: "",
+      template_type: "discharge_summary" as (typeof TemplateTypes)[number],
     },
   });
200-206: Critical: Numeric index access on object returns undefined.

availableContexts is an object (from schema?.contexts ?? {}), not an array. availableContexts[0] will always return undefined because objects don't support numeric indexing.
🔎 Proposed fix
   useEffect(() => {
     if (template && availableContexts) {
       setSelectedContext(availableContexts[template.context]);
-    } else if (availableContexts) {
-      setSelectedContext(availableContexts[0]);
+    } else if (Object.keys(availableContexts).length > 0) {
+      setSelectedContext(Object.values(availableContexts)[0]);
     }
   }, [template, availableContexts]);

📜 Review details

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3016c70 and 3f25833.

📒 Files selected for processing (1)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧰 Additional context used

📓 Path-based instructions (12)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing

**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
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/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements

**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

**/*.{ts,tsx,js,jsx}: Use path aliases @/* for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursorrules)

Use declarative JSX

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{ts,tsx}: Use strict TypeScript configuration for medical data safety in all TypeScript source files
All literal strings must use i18next for multi-language support in healthcare interfaces
Use comprehensive error boundaries and user-friendly error messages for medical workflow debugging without exposing PHI
Follow ESLint configured rules for React hooks, accessibility, and code quality
Use @tanstack/react-query for server state management in API client code
Localize date and time formats for medical timestamps using locale-aware formatting functions
Use date-fns for date handling and manipulation with locale awareness for medical timestamps

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{ts,tsx,css}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use Prettier for consistent code formatting across the healthcare application

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 in src/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
Use raviger router 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-query for 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 with zod schemas in page components
Handle form submission states (loading, success, error) in page components
Use React hooks for local page state
Minimize unnecessary re-renders in page components
Implement proper authentication checks in page components
Handle different user roles and permissions in page components
Redirect to login when authentication is required in page components
Show appropriate UI based on user permissions in page components
Set appropriate page titles and meta descriptions in page components
Handle OpenGraph and Twitter card meta tags in page components
Implement structured data where applicable in page components
Implement code splitting for large page components
Use lazy loading for heavy components within page components
Optimize bundle size with proper imports in page components
Handle image optimization and lazy loading in page components
Implement comprehensive error boundaries in page components
Handle API e...

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{tsx,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{tsx,ts}: Use React 19.1.1 features and patterns following React 19 Documentation for healthcare application development
Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Use framer-motion for animations in healthcare UI interfaces

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{tsx,css}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use Tailwind CSS 4.1.3 utility classes with custom healthcare-specific design system for styling

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Use 2-space indentation

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/pages/Encounters/TemplateBuilder/TemplateBuilder.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
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/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{ts,tsx,js,jsx,json,css,scss,html}

📄 CodeRabbit inference engine (AGENTS.md)

Use 2-space indentation

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧠 Learnings (41)

📓 Common learnings

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 13197
File: src/pages/Facility/settings/observationDefinition/ObservationDefinitionForm.tsx:470-495
Timestamp: 2025-09-16T20:46:59.537Z
Learning: In PR #13197, AdityaJ2305 indicated that aria-invalid and ref forwarding improvements for ValueSetSelect components can be deferred to a separate PR, considering them not critical for the current focus/scroll fix implementation.

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13238
File: src/pages/Facility/settings/billing/discount/discount-components/DiscountMonetaryComponentForm.tsx:63-67
Timestamp: 2025-09-02T04:58:06.800Z
Learning: In the care_fe project's discount forms (DiscountMonetaryComponentForm.tsx), maintainers prefer using path: ["factor", "amount"] for cross-field validation rather than dynamic path binding like path: [valueType]. The approach of adding per-field FormMessage components for either/or validation was previously rejected by maintainers.

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/**/validators.ts : Implement form validation for healthcare-specific requirements in validators.ts

Learnt from: rajku-dev
Repo: ohcnetwork/care_fe PR: 9887
File: src/components/Users/CreateUserForm.tsx:86-92
Timestamp: 2025-01-14T09:50:51.248Z
Learning: When suggesting new validation messages in code, always check and add corresponding translation keys to the locale files (e.g., public/locale/en.json) to maintain internationalization support.

📚 Learning: 2025-11-25T13:50:10.786Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{ts,tsx} : All literal strings must use i18next for multi-language support in healthcare interfaces

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-20T23:25:06.602Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9145
File: src/common/validation.tsx:41-41
Timestamp: 2024-11-20T23:25:06.602Z
Learning: When updating the name validation pattern in `src/common/validation.tsx`, avoid partial internationalization by not adding specific non-Latin Unicode ranges unless we're prepared to support all non-Latin scripts.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Format dates, numbers, and currencies appropriately in page components using i18n

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:19.758Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Use `i18next` for text translations in page components (existing dependency)

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:50:46.407Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Ensure full compatibility with react-hook-form for medical data collection in CAREUI components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-09-02T04:58:06.800Z

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13238
File: src/pages/Facility/settings/billing/discount/discount-components/DiscountMonetaryComponentForm.tsx:63-67
Timestamp: 2025-09-02T04:58:06.800Z
Learning: In the care_fe project's discount forms (DiscountMonetaryComponentForm.tsx), maintainers prefer using path: ["factor", "amount"] for cross-field validation rather than dynamic path binding like path: [valueType]. The approach of adding per-field FormMessage components for either/or validation was previously rejected by maintainers.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/validators.ts : Implement form validation for healthcare-specific requirements in validators.ts

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:51.914Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use consistent medical term translations for healthcare terminology in i18n

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Wrap all user-facing text content in `t("key.path")` for internationalization

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Consider internationalization (i18n) for date formatting in utility functions

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/validation.tsx : Use zod for form validation schemas in validation.tsx

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:19.758Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Implement proper form validation with `zod` schemas in page components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-08-15T19:51:24.937Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12882
File: public/locale/en.json:3356-3356
Timestamp: 2025-08-15T19:51:24.937Z
Learning: In the AllergyTable component and related redesigned components (SymptomTable, DiagnosisTable) in `src/components/Patient/allergy/AllergyTable.tsx`, dynamic i18n lookups are used like `t(allergy.verification_status)` where the verification_status field can contain values like "presumed", "confirmed", "unconfirmed", etc. These require corresponding translation keys in the locale files.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Use `zod` for schema validation in validation utility functions

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-01-14T09:22:13.878Z

Learnt from: rajku-dev
Repo: ohcnetwork/care_fe PR: 9887
File: src/components/Users/CreateUserForm.tsx:93-93
Timestamp: 2025-01-14T09:22:13.878Z
Learning: In CreateUserForm.tsx, the gender validation schema uses string literals that match GENDER_TYPES.map(g => g.id). Using GENDER_TYPES directly with z.enum() fails because it's marked with 'as const' which makes it a readonly tuple type incompatible with Zod's enum.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Support zod schemas for medical data validation and FHIR compliance in CAREUI components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 `const { t } = useTranslation()` pattern for accessing translations

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 translation keys from `src/Locale/` for internationalization

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PatientContext.tsx : Implement Patient Context for current patient selection and medical alerts

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/*.{ts,tsx} : Include proper error boundaries for medical data in context implementations

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/*.{test,spec}.{ts,tsx} : Validate emergency override scenarios in context tests

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/EmergencyContext.tsx : Implement Emergency Context for critical care protocols and rapid response

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/*.{ts,tsx} : Handle offline scenarios for critical workflows in context implementations

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-13T23:01:50.297Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/UserAddEditForm.tsx:655-719
Timestamp: 2024-11-13T23:01:50.297Z
Learning: The duplication in form submission logic in `handleSubmit` has already been addressed in a previous comment.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-06-25T05:54:03.491Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 12680
File: src/components/Questionnaire/QuestionnaireEditor.tsx:813-816
Timestamp: 2025-06-25T05:54:03.491Z
Learning: In React components using UI library Button components (like shadcn/ui), adding `type="submit"` to a Button with an onClick handler does not cause the double execution issues that might occur with native HTML buttons, as the UI library handles form submission differently.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-20T19:08:38.025Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/UserEditDetails.tsx:90-97
Timestamp: 2024-11-20T19:08:38.025Z
Learning: In the React component `UserEditDetails` (src/components/Users/UserEditDetails.tsx), error handling for form submissions is handled within the `UserAddEditForm` component, so additional error handling is unnecessary.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 handle prefix for event handlers (e.g., handleSubmit, handleTagsUpdate, handlePatientSelect)

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:19.758Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Handle form submission states (loading, success, error) in page components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-04-13T03:41:38.805Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11815
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:332-341
Timestamp: 2025-04-13T03:41:38.805Z
Learning: Textareas and other form inputs in the codebase should use the controlled component pattern (using `value` instead of `defaultValue`) to ensure they properly reflect changes from all sources.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-04-13T03:41:38.805Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11815
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:332-341
Timestamp: 2025-04-13T03:41:38.805Z
Learning: Form inputs in React components should use the controlled component pattern (using `value` instead of `defaultValue`) to ensure they properly reflect changes from all sources, particularly for textareas and form elements that may be updated from multiple places.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-09-22T19:02:08.124Z

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13799
File: src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx:115-122
Timestamp: 2025-09-22T19:02:08.124Z
Learning: In the care_fe project's form components (like CreateScheduleTemplateSheet.tsx), maintainers use the union/refine pattern (z.union([z.number().min(1), z.undefined()]).refine()) for numeric fields instead of z.number({ required_error, invalid_type_error }) because their forms initialize with undefined values and use onChange handlers that convert invalid inputs back to undefined. This pattern maintains consistency with existing form architecture and avoids requiring refactoring of initialization and input handling logic.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 controlled components for form inputs in page components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Handle controlled inputs with proper TypeScript typing for form state

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-08-22T14:24:18.226Z

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13297
File: src/pages/Facility/settings/productKnowledge/ProductKnowledgeForm.tsx:200-206
Timestamp: 2025-08-22T14:24:18.226Z
Learning: In React Hook Form with complex nested schemas, setting initial default values to null can cause forms to become immediately "dirty" when components auto-initialize object structures, which can interfere with form submission button disable logic that relies on isDirty state.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-12-11T01:32:56.923Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 8956
File: src/components/Shifting/ShiftDetailsUpdate.tsx:348-370
Timestamp: 2024-12-11T01:32:56.923Z
Learning: In the `ShiftDetailsUpdate` component (`src/components/Shifting/ShiftDetailsUpdate.tsx`), the field `approving_facility` is not required in `initForm`.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-07-14T20:52:10.752Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12916
File: src/pages/Facility/settings/billing/discount/discount-codes/DiscountCodeForm.tsx:78-78
Timestamp: 2025-07-14T20:52:10.752Z
Learning: In the care_fe codebase, the pattern for aria-required attributes on FormLabel components is to use `aria-required` without an explicit value (e.g., `<FormLabel aria-required>`) rather than `aria-required="true"`. This is the consistent pattern used throughout the codebase.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Create reusable validation schemas in validation utilities

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-13T12:33:52.373Z

Learnt from: AnveshNalimela
Repo: ohcnetwork/care_fe PR: 9096
File: src/components/Resource/ResourceList.tsx:245-245
Timestamp: 2024-11-13T12:33:52.373Z
Learning: When displaying the resource status in `ResourceList.tsx`, use `{t("consent__status")}` instead of adding a new translation key `{t("resource_status")}`.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-12-17T19:47:58.152Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14821
File: src/components/Location/LocationNavigation.tsx:161-163
Timestamp: 2025-12-17T19:47:58.152Z
Learning: To ensure the remove-unused-i18n.js cleanup script detects i18n keys, avoid wrapping keys inside a ternary expression passed directly to t(). Instead, call t() separately in each branch of a conditional, e.g. condition ? t("key1") : t("key2"), or compute the key in a variable before passing to t(). For LocationNavigation.tsx (and similar TSX files in the repo), prefer explicit separate i18n calls per branch or a shared precomputed key to guarantee all keys are statically detectable by the script.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-12-22T10:16:36.690Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 14804
File: src/pages/Facility/services/pharmacy/DispensesView.tsx:117-135
Timestamp: 2025-12-22T10:16:36.690Z
Learning: In the care_fe repository, prefer the native HTML title attribute for simple tooltips over using shadcn/ui Tooltip components. Use Tooltip components only when the tooltip requires richer content, interactivity, or accessibility enhancements that cannot be achieved with a plain title. For simple cases, add a title attribute to the element (e.g., <span title="...">). If a Tooltip is used, ensure it is accessible and necessary, and avoid duplicating content available in the title attribute.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧬 Code graph analysis (1)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx (3)

src/components/ui/button.tsx (1)

Button (85-85)

src/components/ui/form.tsx (1)

FormLabel (167-167)

src/components/ui/select.tsx (1)

Select (192-192)

⏰ 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: OSSAR-Scan

🔇 Additional comments (3)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx (3)

389-396: LGTM!

The aria-required attribute correctly indicates the required field for accessibility, following the established codebase pattern of using aria-required without an explicit value.

417-440: LGTM!

Correctly omitting aria-required from status field since it has a default value and is not user-mandatory.

80-80: Context field change aligns with auto-selection logic.

Making context optional in the schema is consistent with the auto-selection behavior (lines 200-206 that should default to first available context). The handleSaveTemplate function correctly falls back to empty string via selectedContext?.slug ?? "".

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

parvathyns-creator · 2025-12-30T07:53:02Z

@nihal467 The issue still exists

Ishu813 · 2025-12-30T08:15:35Z

@nihal467 The issue still exists

Hi @parvathyns-creator 👋

Thanks for the update. To help me address this properly, could you please add a bit more detail on what is still unresolved?

parvathyns-creator · 2025-12-30T08:42:15Z

The template review is not available after creation unless a context is selected, even though the context field is not mandatory.

…

On Tue, 30 Dec 2025 at 13:45, Ishu Agrawal ***@***.***> wrote: *Ishu813* left a comment (ohcnetwork/care_fe#14949) <#14949 (comment)> @nihal467 <https://github.com/nihal467> The issue still exists Hi @parvathyns-creator <https://github.com/parvathyns-creator> 👋 Thanks for the update. To help me address this properly, could you please add a bit more detail on what is still unresolved? — Reply to this email directly, view it on GitHub <#14949 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B2LIE4VJIVLYLECTLV4EO3T4EIYD7AVCNFSM6AAAAACQBULFPWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTMOJYGYZDCMBVGY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

parvathyns-creator · 2025-12-30T09:58:57Z

The template preview is not available after creation unless a context is selected, even though the context field is not mandatory.

…

On Tue, 30 Dec 2025 at 13:45, Ishu Agrawal ***@***.***> wrote: *Ishu813* left a comment (ohcnetwork/care_fe#14949) <#14949 (comment)> @nihal467 <https://github.com/nihal467> The issue still exists Hi @parvathyns-creator <https://github.com/parvathyns-creator> 👋 Thanks for the update. To help me address this properly, could you please add a bit more detail on what is still unresolved? — Reply to this email directly, view it on GitHub <#14949 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B2LIE4VJIVLYLECTLV4EO3T4EIYD7AVCNFSM6AAAAACQBULFPWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTMOJYGYZDCMBVGY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

Ishu813 · 2025-12-30T11:54:57Z

The template preview is not available after creation unless a context is selected, even though the context field is not mandatory.

@parvathyns-creator The issue is now resolved. Kindly Check.

coderabbitai

Actionable comments posted: 4

♻️ Duplicate comments (4)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx (4)

64-64: Move validation schema inside component to support dynamic language switching.

This issue was already identified in a previous review. The schema is defined at module level with t() called at import time, freezing validation messages in the default language.

Based on learnings, schemas should be defined inside components where they can access useTranslation() to support dynamic language changes.

371-378: Good fix for the duplicate submission issue.

This was already reviewed. The onClick now correctly routes through form.handleSubmit() for validation. The arrow function wrapper could be simplified but is functionally correct.

203-205: Critical: Incorrect array access on object.

This issue was already identified in a previous review. availableContexts is an object, not an array, so availableContexts[0] returns undefined.

473-473: Add default value for controlled component pattern.

This issue was already identified. The Select uses value={field.value} but template_type is missing from defaultValues, which may cause React warnings about switching from uncontrolled to controlled.

Based on learnings, form inputs should use the controlled component pattern consistently with proper defaults.

📜 Review details

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3f25833 and cba7082.

📒 Files selected for processing (1)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧰 Additional context used

📓 Path-based instructions (12)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing

**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
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/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements

**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

**/*.{ts,tsx,js,jsx}: Use path aliases @/* for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursorrules)

Use declarative JSX

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{ts,tsx}: Use strict TypeScript configuration for medical data safety in all TypeScript source files
All literal strings must use i18next for multi-language support in healthcare interfaces
Use comprehensive error boundaries and user-friendly error messages for medical workflow debugging without exposing PHI
Follow ESLint configured rules for React hooks, accessibility, and code quality
Use @tanstack/react-query for server state management in API client code
Localize date and time formats for medical timestamps using locale-aware formatting functions
Use date-fns for date handling and manipulation with locale awareness for medical timestamps

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{ts,tsx,css}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use Prettier for consistent code formatting across the healthcare application

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 in src/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
Use raviger router 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-query for 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 with zod schemas in page components
Handle form submission states (loading, success, error) in page components
Use React hooks for local page state
Minimize unnecessary re-renders in page components
Implement proper authentication checks in page components
Handle different user roles and permissions in page components
Redirect to login when authentication is required in page components
Show appropriate UI based on user permissions in page components
Set appropriate page titles and meta descriptions in page components
Handle OpenGraph and Twitter card meta tags in page components
Implement structured data where applicable in page components
Implement code splitting for large page components
Use lazy loading for heavy components within page components
Optimize bundle size with proper imports in page components
Handle image optimization and lazy loading in page components
Implement comprehensive error boundaries in page components
Handle API e...

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{tsx,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{tsx,ts}: Use React 19.1.1 features and patterns following React 19 Documentation for healthcare application development
Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Use framer-motion for animations in healthcare UI interfaces

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{tsx,css}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use Tailwind CSS 4.1.3 utility classes with custom healthcare-specific design system for styling

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Use 2-space indentation

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/pages/Encounters/TemplateBuilder/TemplateBuilder.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
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/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{ts,tsx,js,jsx,json,css,scss,html}

📄 CodeRabbit inference engine (AGENTS.md)

Use 2-space indentation

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧠 Learnings (41)

📓 Common learnings

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 13197
File: src/pages/Facility/settings/observationDefinition/ObservationDefinitionForm.tsx:470-495
Timestamp: 2025-09-16T20:46:59.537Z
Learning: In PR #13197, AdityaJ2305 indicated that aria-invalid and ref forwarding improvements for ValueSetSelect components can be deferred to a separate PR, considering them not critical for the current focus/scroll fix implementation.

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13238
File: src/pages/Facility/settings/billing/discount/discount-components/DiscountMonetaryComponentForm.tsx:63-67
Timestamp: 2025-09-02T04:58:06.800Z
Learning: In the care_fe project's discount forms (DiscountMonetaryComponentForm.tsx), maintainers prefer using path: ["factor", "amount"] for cross-field validation rather than dynamic path binding like path: [valueType]. The approach of adding per-field FormMessage components for either/or validation was previously rejected by maintainers.

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/**/*{[Ff]orm,[Ii]nput,[Ff]ield}*.{ts,tsx} : Use react-hook-form with zod validation for medical data integrity in form components

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/**/validators.ts : Implement form validation for healthcare-specific requirements in validators.ts

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/**/validation.tsx : Use zod for form validation schemas in validation.tsx

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11815
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:332-341
Timestamp: 2025-04-13T03:41:38.805Z
Learning: Textareas and other form inputs in the codebase should use the controlled component pattern (using `value` instead of `defaultValue`) to ensure they properly reflect changes from all sources.

Learnt from: hrit2773
Repo: ohcnetwork/care_fe PR: 11447
File: src/components/Questionnaire/QuestionnaireEditor.tsx:1055-1069
Timestamp: 2025-03-30T12:22:58.576Z
Learning: In the QuestionnaireEditor component, React Hook Form's onChange handlers are intentionally overridden with custom updateField calls to maintain component-specific state management instead of relying on React Hook Form's internal state.

Learnt from: rajku-dev
Repo: ohcnetwork/care_fe PR: 9887
File: src/components/Users/CreateUserForm.tsx:86-92
Timestamp: 2025-01-14T09:50:51.248Z
Learning: When suggesting new validation messages in code, always check and add corresponding translation keys to the locale files (e.g., public/locale/en.json) to maintain internationalization support.

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11815
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:332-341
Timestamp: 2025-04-13T03:41:38.805Z
Learning: Form inputs in React components should use the controlled component pattern (using `value` instead of `defaultValue`) to ensure they properly reflect changes from all sources, particularly for textareas and form elements that may be updated from multiple places.

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 controlled components for form inputs in page components

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Ensure full compatibility with react-hook-form for medical data collection in CAREUI components

📚 Learning: 2025-11-25T13:50:10.786Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{ts,tsx} : All literal strings must use i18next for multi-language support in healthcare interfaces

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:50:46.407Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Ensure full compatibility with react-hook-form for medical data collection in CAREUI components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Format dates, numbers, and currencies appropriately in page components using i18n

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:19.758Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Use `i18next` for text translations in page components (existing dependency)

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-20T23:25:06.602Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9145
File: src/common/validation.tsx:41-41
Timestamp: 2024-11-20T23:25:06.602Z
Learning: When updating the name validation pattern in `src/common/validation.tsx`, avoid partial internationalization by not adding specific non-Latin Unicode ranges unless we're prepared to support all non-Latin scripts.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/validators.ts : Implement form validation for healthcare-specific requirements in validators.ts

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-09-02T04:58:06.800Z

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13238
File: src/pages/Facility/settings/billing/discount/discount-components/DiscountMonetaryComponentForm.tsx:63-67
Timestamp: 2025-09-02T04:58:06.800Z
Learning: In the care_fe project's discount forms (DiscountMonetaryComponentForm.tsx), maintainers prefer using path: ["factor", "amount"] for cross-field validation rather than dynamic path binding like path: [valueType]. The approach of adding per-field FormMessage components for either/or validation was previously rejected by maintainers.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:51.914Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use consistent medical term translations for healthcare terminology in i18n

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:19.758Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Implement proper form validation with `zod` schemas in page components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-08-15T19:51:24.937Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12882
File: public/locale/en.json:3356-3356
Timestamp: 2025-08-15T19:51:24.937Z
Learning: In the AllergyTable component and related redesigned components (SymptomTable, DiagnosisTable) in `src/components/Patient/allergy/AllergyTable.tsx`, dynamic i18n lookups are used like `t(allergy.verification_status)` where the verification_status field can contain values like "presumed", "confirmed", "unconfirmed", etc. These require corresponding translation keys in the locale files.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/validation.tsx : Use zod for form validation schemas in validation.tsx

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Use `zod` for schema validation in validation utility functions

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-01-14T09:22:13.878Z

Learnt from: rajku-dev
Repo: ohcnetwork/care_fe PR: 9887
File: src/components/Users/CreateUserForm.tsx:93-93
Timestamp: 2025-01-14T09:22:13.878Z
Learning: In CreateUserForm.tsx, the gender validation schema uses string literals that match GENDER_TYPES.map(g => g.id). Using GENDER_TYPES directly with z.enum() fails because it's marked with 'as const' which makes it a readonly tuple type incompatible with Zod's enum.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Support zod schemas for medical data validation and FHIR compliance in CAREUI components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 `const { t } = useTranslation()` pattern for accessing translations

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 translation keys from `src/Locale/` for internationalization

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PatientContext.tsx : Implement Patient Context for current patient selection and medical alerts

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/*.{ts,tsx} : Include proper error boundaries for medical data in context implementations

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/*.{test,spec}.{ts,tsx} : Validate emergency override scenarios in context tests

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/EmergencyContext.tsx : Implement Emergency Context for critical care protocols and rapid response

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/*.{ts,tsx} : Handle offline scenarios for critical workflows in context implementations

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-04-13T03:41:38.805Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11815
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:332-341
Timestamp: 2025-04-13T03:41:38.805Z
Learning: Textareas and other form inputs in the codebase should use the controlled component pattern (using `value` instead of `defaultValue`) to ensure they properly reflect changes from all sources.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-04-13T03:41:38.805Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11815
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:332-341
Timestamp: 2025-04-13T03:41:38.805Z
Learning: Form inputs in React components should use the controlled component pattern (using `value` instead of `defaultValue`) to ensure they properly reflect changes from all sources, particularly for textareas and form elements that may be updated from multiple places.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-09-22T19:02:08.124Z

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13799
File: src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx:115-122
Timestamp: 2025-09-22T19:02:08.124Z
Learning: In the care_fe project's form components (like CreateScheduleTemplateSheet.tsx), maintainers use the union/refine pattern (z.union([z.number().min(1), z.undefined()]).refine()) for numeric fields instead of z.number({ required_error, invalid_type_error }) because their forms initialize with undefined values and use onChange handlers that convert invalid inputs back to undefined. This pattern maintains consistency with existing form architecture and avoids requiring refactoring of initialization and input handling logic.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 controlled components for form inputs in page components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Handle controlled inputs with proper TypeScript typing for form state

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-08-22T14:24:18.226Z

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13297
File: src/pages/Facility/settings/productKnowledge/ProductKnowledgeForm.tsx:200-206
Timestamp: 2025-08-22T14:24:18.226Z
Learning: In React Hook Form with complex nested schemas, setting initial default values to null can cause forms to become immediately "dirty" when components auto-initialize object structures, which can interfere with form submission button disable logic that relies on isDirty state.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-12-11T01:32:56.923Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 8956
File: src/components/Shifting/ShiftDetailsUpdate.tsx:348-370
Timestamp: 2024-12-11T01:32:56.923Z
Learning: In the `ShiftDetailsUpdate` component (`src/components/Shifting/ShiftDetailsUpdate.tsx`), the field `approving_facility` is not required in `initForm`.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-07-14T20:52:10.752Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12916
File: src/pages/Facility/settings/billing/discount/discount-codes/DiscountCodeForm.tsx:78-78
Timestamp: 2025-07-14T20:52:10.752Z
Learning: In the care_fe codebase, the pattern for aria-required attributes on FormLabel components is to use `aria-required` without an explicit value (e.g., `<FormLabel aria-required>`) rather than `aria-required="true"`. This is the consistent pattern used throughout the codebase.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-13T23:01:50.297Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/UserAddEditForm.tsx:655-719
Timestamp: 2024-11-13T23:01:50.297Z
Learning: The duplication in form submission logic in `handleSubmit` has already been addressed in a previous comment.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-06-25T05:54:03.491Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 12680
File: src/components/Questionnaire/QuestionnaireEditor.tsx:813-816
Timestamp: 2025-06-25T05:54:03.491Z
Learning: In React components using UI library Button components (like shadcn/ui), adding `type="submit"` to a Button with an onClick handler does not cause the double execution issues that might occur with native HTML buttons, as the UI library handles form submission differently.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-20T19:08:38.025Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/UserEditDetails.tsx:90-97
Timestamp: 2024-11-20T19:08:38.025Z
Learning: In the React component `UserEditDetails` (src/components/Users/UserEditDetails.tsx), error handling for form submissions is handled within the `UserAddEditForm` component, so additional error handling is unnecessary.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 handle prefix for event handlers (e.g., handleSubmit, handleTagsUpdate, handlePatientSelect)

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Create reusable validation schemas in validation utilities

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-13T12:33:52.373Z

Learnt from: AnveshNalimela
Repo: ohcnetwork/care_fe PR: 9096
File: src/components/Resource/ResourceList.tsx:245-245
Timestamp: 2024-11-13T12:33:52.373Z
Learning: When displaying the resource status in `ResourceList.tsx`, use `{t("consent__status")}` instead of adding a new translation key `{t("resource_status")}`.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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: React context definitions and patterns must follow context.instructions.md

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/ShortcutContext.tsx : Implement ShortcutContext with medical workflow keyboard shortcuts for rapid clinical actions and emergency protocol shortcuts for rapid response scenarios, including accessibility shortcuts for clinical environments

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-12-17T19:47:58.152Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14821
File: src/components/Location/LocationNavigation.tsx:161-163
Timestamp: 2025-12-17T19:47:58.152Z
Learning: To ensure the remove-unused-i18n.js cleanup script detects i18n keys, avoid wrapping keys inside a ternary expression passed directly to t(). Instead, call t() separately in each branch of a conditional, e.g. condition ? t("key1") : t("key2"), or compute the key in a variable before passing to t(). For LocationNavigation.tsx (and similar TSX files in the repo), prefer explicit separate i18n calls per branch or a shared precomputed key to guarantee all keys are statically detectable by the script.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-12-22T10:16:36.690Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 14804
File: src/pages/Facility/services/pharmacy/DispensesView.tsx:117-135
Timestamp: 2025-12-22T10:16:36.690Z
Learning: In the care_fe repository, prefer the native HTML title attribute for simple tooltips over using shadcn/ui Tooltip components. Use Tooltip components only when the tooltip requires richer content, interactivity, or accessibility enhancements that cannot be achieved with a plain title. For simple cases, add a title attribute to the element (e.g., <span title="...">). If a Tooltip is used, ensure it is accessible and necessary, and avoid duplicating content available in the title attribute.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧬 Code graph analysis (1)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx (4)

src/components/ui/button.tsx (1)

Button (85-85)

src/components/ui/form.tsx (6)

FormLabel (167-167)

Form (162-162)

FormField (165-165)

FormItem (166-166)

FormControl (163-163)

FormMessage (168-168)

src/components/ui/select.tsx (5)

Select (192-192)

SelectTrigger (200-200)

SelectValue (201-201)

SelectContent (193-193)

SelectItem (195-195)

src/hooks/useFilters.tsx (1)

value (153-155)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: build
GitHub Check: Test
GitHub Check: CodeQL-Build

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

nihal467

show proper field required message rather than string
even though the * was mentioned removed, it still exist in the template

Ishu813 · 2026-01-03T11:05:01Z

show proper field required message rather than string

even though the * was mentioned removed, it still exist in the template

@nihal467 The changes are done. Kindly check.

coderabbitai

Actionable comments posted: 5

♻️ Duplicate comments (1)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx (1)
404-404: Add aria-required for accessibility.

The slug_value field is required by the validation schema (Lines 84-95), but the label lacks the aria-required attribute for screen reader accessibility.
🔎 Proposed fix
-                  <FormLabel>{t("slug")}</FormLabel>
+                  <FormLabel aria-required>{t("slug")}</FormLabel>

📜 Review details

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cba7082 and 03ba222.

📒 Files selected for processing (1)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧰 Additional context used

📓 Path-based instructions (12)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing

**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
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/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements

**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

**/*.{ts,tsx,js,jsx}: Use path aliases @/* for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursorrules)

Use declarative JSX

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{ts,tsx}: Use strict TypeScript configuration for medical data safety in all TypeScript source files
All literal strings must use i18next for multi-language support in healthcare interfaces
Use comprehensive error boundaries and user-friendly error messages for medical workflow debugging without exposing PHI
Follow ESLint configured rules for React hooks, accessibility, and code quality
Use @tanstack/react-query for server state management in API client code
Localize date and time formats for medical timestamps using locale-aware formatting functions
Use date-fns for date handling and manipulation with locale awareness for medical timestamps

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{ts,tsx,css}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use Prettier for consistent code formatting across the healthcare application

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 in src/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
Use raviger router 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-query for 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 with zod schemas in page components
Handle form submission states (loading, success, error) in page components
Use React hooks for local page state
Minimize unnecessary re-renders in page components
Implement proper authentication checks in page components
Handle different user roles and permissions in page components
Redirect to login when authentication is required in page components
Show appropriate UI based on user permissions in page components
Set appropriate page titles and meta descriptions in page components
Handle OpenGraph and Twitter card meta tags in page components
Implement structured data where applicable in page components
Implement code splitting for large page components
Use lazy loading for heavy components within page components
Optimize bundle size with proper imports in page components
Handle image optimization and lazy loading in page components
Implement comprehensive error boundaries in page components
Handle API e...

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{tsx,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{tsx,ts}: Use React 19.1.1 features and patterns following React 19 Documentation for healthcare application development
Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Use framer-motion for animations in healthcare UI interfaces

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{tsx,css}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use Tailwind CSS 4.1.3 utility classes with custom healthcare-specific design system for styling

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Use 2-space indentation

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/pages/Encounters/TemplateBuilder/TemplateBuilder.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
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/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{ts,tsx,js,jsx,json,css,scss,html}

📄 CodeRabbit inference engine (AGENTS.md)

Use 2-space indentation

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧠 Learnings (55)

📓 Common learnings

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 13197
File: src/pages/Facility/settings/observationDefinition/ObservationDefinitionForm.tsx:470-495
Timestamp: 2025-09-16T20:46:59.537Z
Learning: In PR #13197, AdityaJ2305 indicated that aria-invalid and ref forwarding improvements for ValueSetSelect components can be deferred to a separate PR, considering them not critical for the current focus/scroll fix implementation.

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13238
File: src/pages/Facility/settings/billing/discount/discount-components/DiscountMonetaryComponentForm.tsx:63-67
Timestamp: 2025-09-02T04:58:06.800Z
Learning: In the care_fe project's discount forms (DiscountMonetaryComponentForm.tsx), maintainers prefer using path: ["factor", "amount"] for cross-field validation rather than dynamic path binding like path: [valueType]. The approach of adding per-field FormMessage components for either/or validation was previously rejected by maintainers.

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/**/*{[Ff]orm,[Ii]nput,[Ff]ield}*.{ts,tsx} : Use react-hook-form with zod validation for medical data integrity in form components

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Implement proper form validation with `zod` schemas in page components

Learnt from: hrit2773
Repo: ohcnetwork/care_fe PR: 11447
File: src/components/Questionnaire/QuestionnaireEditor.tsx:1055-1069
Timestamp: 2025-03-30T12:22:58.576Z
Learning: In the QuestionnaireEditor component, React Hook Form's onChange handlers are intentionally overridden with custom updateField calls to maintain component-specific state management instead of relying on React Hook Form's internal state.

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/**/validation.tsx : Use zod for form validation schemas in validation.tsx

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/UserEditDetails.tsx:90-97
Timestamp: 2024-11-20T19:08:38.025Z
Learning: In the React component `UserEditDetails` (src/components/Users/UserEditDetails.tsx), error handling for form submissions is handled within the `UserAddEditForm` component, so additional error handling is unnecessary.

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Handle form submission states (loading, success, error) in page components

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/**/validators.ts : Implement form validation for healthcare-specific requirements in validators.ts

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 10054
File: src/components/Users/CreateUserForm.tsx:278-297
Timestamp: 2025-01-19T14:53:36.552Z
Learning: In Cypress tests for React forms, avoid triggering validation errors by submitting an incomplete form before filling all fields, as this can cause form re-rendering and make elements temporarily unavailable to Cypress. Instead, fill all required fields first and then submit the form.

📚 Learning: 2025-11-25T13:52:19.758Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Implement proper form validation with `zod` schemas in page components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-20T23:25:06.602Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9145
File: src/common/validation.tsx:41-41
Timestamp: 2024-11-20T23:25:06.602Z
Learning: When updating the name validation pattern in `src/common/validation.tsx`, avoid partial internationalization by not adding specific non-Latin Unicode ranges unless we're prepared to support all non-Latin scripts.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-09-02T04:58:06.800Z

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13238
File: src/pages/Facility/settings/billing/discount/discount-components/DiscountMonetaryComponentForm.tsx:63-67
Timestamp: 2025-09-02T04:58:06.800Z
Learning: In the care_fe project's discount forms (DiscountMonetaryComponentForm.tsx), maintainers prefer using path: ["factor", "amount"] for cross-field validation rather than dynamic path binding like path: [valueType]. The approach of adding per-field FormMessage components for either/or validation was previously rejected by maintainers.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:50:10.786Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{ts,tsx} : All literal strings must use i18next for multi-language support in healthcare interfaces

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/validators.ts : Implement form validation for healthcare-specific requirements in validators.ts

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:50:46.407Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Ensure full compatibility with react-hook-form for medical data collection in CAREUI components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:19.758Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Implement proper data validation for medical information in page components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/*{[Ff]orm,[Ii]nput,[Ff]ield}*.{ts,tsx} : Use react-hook-form with zod validation for medical data integrity in form components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Provide clear validation error messages in validation utilities

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:50:46.407Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Implement appropriate validation for clinical data inputs in CAREUI components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/validation.tsx : Use zod for form validation schemas in validation.tsx

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-08-15T19:51:24.937Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12882
File: public/locale/en.json:3356-3356
Timestamp: 2025-08-15T19:51:24.937Z
Learning: In the AllergyTable component and related redesigned components (SymptomTable, DiagnosisTable) in `src/components/Patient/allergy/AllergyTable.tsx`, dynamic i18n lookups are used like `t(allergy.verification_status)` where the verification_status field can contain values like "presumed", "confirmed", "unconfirmed", etc. These require corresponding translation keys in the locale files.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Use `zod` for schema validation in validation utility functions

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-01-14T09:22:13.878Z

Learnt from: rajku-dev
Repo: ohcnetwork/care_fe PR: 9887
File: src/components/Users/CreateUserForm.tsx:93-93
Timestamp: 2025-01-14T09:22:13.878Z
Learning: In CreateUserForm.tsx, the gender validation schema uses string literals that match GENDER_TYPES.map(g => g.id). Using GENDER_TYPES directly with z.enum() fails because it's marked with 'as const' which makes it a readonly tuple type incompatible with Zod's enum.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Support zod schemas for medical data validation and FHIR compliance in CAREUI components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 `const { t } = useTranslation()` pattern for accessing translations

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 translation keys from `src/Locale/` for internationalization

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-04-13T03:41:38.805Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11815
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:332-341
Timestamp: 2025-04-13T03:41:38.805Z
Learning: Textareas and other form inputs in the codebase should use the controlled component pattern (using `value` instead of `defaultValue`) to ensure they properly reflect changes from all sources.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-04-13T03:41:38.805Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11815
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:332-341
Timestamp: 2025-04-13T03:41:38.805Z
Learning: Form inputs in React components should use the controlled component pattern (using `value` instead of `defaultValue`) to ensure they properly reflect changes from all sources, particularly for textareas and form elements that may be updated from multiple places.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-09-22T19:02:08.124Z

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13799
File: src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx:115-122
Timestamp: 2025-09-22T19:02:08.124Z
Learning: In the care_fe project's form components (like CreateScheduleTemplateSheet.tsx), maintainers use the union/refine pattern (z.union([z.number().min(1), z.undefined()]).refine()) for numeric fields instead of z.number({ required_error, invalid_type_error }) because their forms initialize with undefined values and use onChange handlers that convert invalid inputs back to undefined. This pattern maintains consistency with existing form architecture and avoids requiring refactoring of initialization and input handling logic.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 controlled components for form inputs in page components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Handle controlled inputs with proper TypeScript typing for form state

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-08-22T14:24:18.226Z

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13297
File: src/pages/Facility/settings/productKnowledge/ProductKnowledgeForm.tsx:200-206
Timestamp: 2025-08-22T14:24:18.226Z
Learning: In React Hook Form with complex nested schemas, setting initial default values to null can cause forms to become immediately "dirty" when components auto-initialize object structures, which can interfere with form submission button disable logic that relies on isDirty state.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-12-11T01:32:56.923Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 8956
File: src/components/Shifting/ShiftDetailsUpdate.tsx:348-370
Timestamp: 2024-12-11T01:32:56.923Z
Learning: In the `ShiftDetailsUpdate` component (`src/components/Shifting/ShiftDetailsUpdate.tsx`), the field `approving_facility` is not required in `initForm`.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-07-14T20:52:10.752Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12916
File: src/pages/Facility/settings/billing/discount/discount-codes/DiscountCodeForm.tsx:78-78
Timestamp: 2025-07-14T20:52:10.752Z
Learning: In the care_fe codebase, the pattern for aria-required attributes on FormLabel components is to use `aria-required` without an explicit value (e.g., `<FormLabel aria-required>`) rather than `aria-required="true"`. This is the consistent pattern used throughout the codebase.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-13T23:01:50.297Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/UserAddEditForm.tsx:655-719
Timestamp: 2024-11-13T23:01:50.297Z
Learning: The duplication in form submission logic in `handleSubmit` has already been addressed in a previous comment.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-06-25T05:54:03.491Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 12680
File: src/components/Questionnaire/QuestionnaireEditor.tsx:813-816
Timestamp: 2025-06-25T05:54:03.491Z
Learning: In React components using UI library Button components (like shadcn/ui), adding `type="submit"` to a Button with an onClick handler does not cause the double execution issues that might occur with native HTML buttons, as the UI library handles form submission differently.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-20T19:08:38.025Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/UserEditDetails.tsx:90-97
Timestamp: 2024-11-20T19:08:38.025Z
Learning: In the React component `UserEditDetails` (src/components/Users/UserEditDetails.tsx), error handling for form submissions is handled within the `UserAddEditForm` component, so additional error handling is unnecessary.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 handle prefix for event handlers (e.g., handleSubmit, handleTagsUpdate, handlePatientSelect)

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PatientContext.tsx : Implement Patient Context for current patient selection and medical alerts

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/*.{ts,tsx} : Implement proper consent management in context implementations

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/*.{ts,tsx} : Include proper error boundaries for medical data in context implementations

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/*.{ts,tsx} : Use data minimization principles in context implementations

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/*.{test,spec}.{ts,tsx} : Validate emergency override scenarios in context tests

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:51.914Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Add ARIA labels for critical medical data (patient names, vital signs, medication alerts)

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 proper ARIA labels and roles in page components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Implement proper ARIA attributes for accessibility

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-13T12:33:52.373Z

Learnt from: AnveshNalimela
Repo: ohcnetwork/care_fe PR: 9096
File: src/components/Resource/ResourceList.tsx:245-245
Timestamp: 2024-11-13T12:33:52.373Z
Learning: When displaying the resource status in `ResourceList.tsx`, use `{t("consent__status")}` instead of adding a new translation key `{t("resource_status")}`.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:50:46.407Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Implement comprehensive screen reader support - All medical data must be accessible via assistive technology with proper ARIA labels for medical context and urgency

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:50:10.786Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/components/**/*.{ts,tsx} : Implement WCAG 2.1 AA accessibility compliance in medical applications with screen reader compatibility and keyboard navigation

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-03-26T03:26:25.654Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11557
File: src/pages/Organization/OrganizationPatients.tsx:155-156
Timestamp: 2025-03-26T03:26:25.654Z
Learning: In the Patient interface (src/types/emr/newPatient.ts), phone_number is a required field according to the TypeScript type definition and doesn't need null checks before formatting.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-03-30T12:22:58.576Z

Learnt from: hrit2773
Repo: ohcnetwork/care_fe PR: 11447
File: src/components/Questionnaire/QuestionnaireEditor.tsx:1055-1069
Timestamp: 2025-03-30T12:22:58.576Z
Learning: In the QuestionnaireEditor component, React Hook Form's onChange handlers are intentionally overridden with custom updateField calls to maintain component-specific state management instead of relying on React Hook Form's internal state.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/*Form*.{ts,tsx} : Medical form type patterns should organize related fields into logical nested object groups: personalInfo, medicalHistory, insuranceInfo for patient admission forms

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:54:35.875Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursor/rules/04-ui-components.mdc:0-0
Timestamp: 2025-11-25T13:54:35.875Z
Learning: Applies to **/*.{tsx,ts} : Use `navigate` and `useRedirect` from raviger for navigation and redirects

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:32.224Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/hooks.instructions.md:0-0
Timestamp: 2025-11-25T13:51:32.224Z
Learning: Applies to src/hooks/**/*.{ts,tsx} : Validate medical data inputs using `zod` schemas in custom hooks

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Format dates, numbers, and currencies appropriately in page components using i18n

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:49:43.065Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T13:49:43.065Z
Learning: Applies to **/*.{ts,tsx} : Use raviger for routing

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Create reusable validation schemas in validation utilities

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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: React context definitions and patterns must follow context.instructions.md

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/ShortcutContext.tsx : Implement ShortcutContext with medical workflow keyboard shortcuts for rapid clinical actions and emergency protocol shortcuts for rapid response scenarios, including accessibility shortcuts for clinical environments

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-12-17T19:47:58.152Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14821
File: src/components/Location/LocationNavigation.tsx:161-163
Timestamp: 2025-12-17T19:47:58.152Z
Learning: To ensure the remove-unused-i18n.js cleanup script detects i18n keys, avoid wrapping keys inside a ternary expression passed directly to t(). Instead, call t() separately in each branch of a conditional, e.g. condition ? t("key1") : t("key2"), or compute the key in a variable before passing to t(). For LocationNavigation.tsx (and similar TSX files in the repo), prefer explicit separate i18n calls per branch or a shared precomputed key to guarantee all keys are statically detectable by the script.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-12-22T10:16:36.690Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 14804
File: src/pages/Facility/services/pharmacy/DispensesView.tsx:117-135
Timestamp: 2025-12-22T10:16:36.690Z
Learning: In the care_fe repository, prefer the native HTML title attribute for simple tooltips over using shadcn/ui Tooltip components. Use Tooltip components only when the tooltip requires richer content, interactivity, or accessibility enhancements that cannot be achieved with a plain title. For simple cases, add a title attribute to the element (e.g., <span title="...">). If a Tooltip is used, ensure it is accessible and necessary, and avoid duplicating content available in the title attribute.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: build
GitHub Check: Test
GitHub Check: CodeQL-Build

🔇 Additional comments (2)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx (2)

82-102: Excellent fix: Schema now supports dynamic language switching.

The validation schema has been correctly moved inside the component where it can access t() from useTranslation(). This resolves the previous critical issue where validation messages were frozen at import time and allows validation messages to update when the user changes language.

694-707: Good addition of FormMessage for validation feedback.

The FormMessage component properly displays validation errors for the template_data field, improving user feedback when validation fails.

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

netlify · 2026-01-04T12:38:03Z

✅ Deploy Preview for care-ohc ready!

Name	Link
🔨 Latest commit	`c0ace58`
🔍 Latest deploy log	https://app.netlify.com/projects/care-ohc/deploys/695a5f26aeef37000816582d
😎 Deploy Preview	https://deploy-preview-14949.preview.ohc.network
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

coderabbitai

Actionable comments posted: 1

♻️ Duplicate comments (8)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx (8)
203-204: Critical: Fix incorrect array access on object.

This code still has the critical issue from the previous review: availableContexts is an object (defined as schema?.contexts ?? {} on line 122), but line 204 uses array-style access availableContexts[0], which will not work.

Additionally, the form field context is not synchronized when auto-selecting, causing a mismatch between selectedContext state and the form's internal value.
🔎 Proposed fix
-    } else if (availableContexts) {
-      setSelectedContext(availableContexts[0]);
+    } else if (availableContexts && Object.keys(availableContexts).length > 0) {
+      const firstContextSlug = Object.keys(availableContexts)[0];
+      const firstContext = availableContexts[firstContextSlug];
+      setSelectedContext(firstContext);
+      form.setValue("context", firstContext.slug, { shouldValidate: true });
     }
371-378: Optional: Simplify onClick handler.

The arrow function wrapper is unnecessary. The onClick can be simplified by passing the handler directly.
🔎 Optional simplification
 <Button
   type="button"
-  onClick={() => {
-    form.handleSubmit(handleSaveTemplate)();
-  }}
+  onClick={form.handleSubmit(handleSaveTemplate)}
 >
   {t("save_template")}
 </Button>
390-390: Add aria-required for accessibility.

The name field is required by the validation schema (line 83), but the label lacks the aria-required attribute. This was flagged in a previous review but not yet addressed.

Based on learnings, use the aria-required pattern without an explicit value for consistency with the codebase.
🔎 Proposed fix
-                  <FormLabel>{t("template_name")}</FormLabel>
+                  <FormLabel aria-required>{t("template_name")}</FormLabel>
422-422: Add aria-required for accessibility.

The status field is required (enum type in schema at line 96), but the label lacks the aria-required attribute. This was flagged in a previous review but not yet addressed.
🔎 Proposed fix
-                  <FormLabel>{t("status")}</FormLabel>
+                  <FormLabel aria-required>{t("status")}</FormLabel>
447-447: Add aria-required for accessibility.

The default_format field is required (enum type in schema at line 98), but the label lacks the aria-required attribute. This was flagged in a previous review but not yet addressed.
🔎 Proposed fix
-                  <FormLabel>{t("default_format")}</FormLabel>
+                  <FormLabel aria-required>{t("default_format")}</FormLabel>
472-472: Add aria-required for accessibility.

The template_type field is required by the validation schema (line 97), but the label lacks the aria-required attribute. This was flagged in a previous review but not yet addressed.
🔎 Proposed fix
-                  <FormLabel>{t("report_type")}</FormLabel>
+                  <FormLabel aria-required>{t("report_type")}</FormLabel>
518-518: Add aria-required for accessibility.

The context field is required by the validation schema (line 99), but the label lacks the aria-required attribute. This was flagged in a previous review but not yet addressed.
🔎 Proposed fix
-                    <FormLabel>{t("select_context")}</FormLabel>
+                    <FormLabel aria-required>{t("select_context")}</FormLabel>
684-684: Consider stronger typing for form parameter.

The form parameter uses UseFormReturn<any>, bypassing TypeScript's type safety. This was flagged in a previous review.

Based on coding guidelines, explicit any types should be avoided. Consider:

Extract schema to module level to enable type inference via z.infer<typeof templateBuilderSchema>

Define an explicit interface for form values if the schema must remain in the component

However, the current approach may be acceptable given the architectural constraint that the schema needs access to t() from useTranslation() within the component scope.
🔎 Suggested improvement options

Option 1: Manual type definition
interface TemplateBuilderFormValues {
  name: string;
  slug_value: string;
  status: TemplateStatus;
  template_type: string;
  default_format: TemplateFormat;
  context: string;
  description?: string;
  template_data: string;
}

function TemplateEditor({
  form,
  textareaRef,
}: {
  form: UseFormReturn<TemplateBuilderFormValues>;
  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
}) {
Option 2: Extract type from schema at module level
// At module level - define without validation messages
const templateBuilderSchemaShape = {
  name: z.string().trim().min(1),
  slug_value: z.string().trim().min(5).max(25).regex(/^[a-z0-9-]+$/),
  // ... other fields
};

type TemplateBuilderFormValues = z.infer<z.ZodObject<typeof templateBuilderSchemaShape>>;

// Inside component - add i18n messages
const templateBuilderSchema = z.object({
  name: z.string().trim().min(1, t("field_required")),
  // ... with messages
});

📜 Review details

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 03ba222 and c0ace58.

📒 Files selected for processing (1)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧰 Additional context used

📓 Path-based instructions (12)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing

**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
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/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements

**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

**/*.{ts,tsx,js,jsx}: Use path aliases @/* for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursorrules)

Use declarative JSX

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{ts,tsx}: Use strict TypeScript configuration for medical data safety in all TypeScript source files
All literal strings must use i18next for multi-language support in healthcare interfaces
Use comprehensive error boundaries and user-friendly error messages for medical workflow debugging without exposing PHI
Follow ESLint configured rules for React hooks, accessibility, and code quality
Use @tanstack/react-query for server state management in API client code
Localize date and time formats for medical timestamps using locale-aware formatting functions
Use date-fns for date handling and manipulation with locale awareness for medical timestamps

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{ts,tsx,css}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use Prettier for consistent code formatting across the healthcare application

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 in src/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
Use raviger router 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-query for 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 with zod schemas in page components
Handle form submission states (loading, success, error) in page components
Use React hooks for local page state
Minimize unnecessary re-renders in page components
Implement proper authentication checks in page components
Handle different user roles and permissions in page components
Redirect to login when authentication is required in page components
Show appropriate UI based on user permissions in page components
Set appropriate page titles and meta descriptions in page components
Handle OpenGraph and Twitter card meta tags in page components
Implement structured data where applicable in page components
Implement code splitting for large page components
Use lazy loading for heavy components within page components
Optimize bundle size with proper imports in page components
Handle image optimization and lazy loading in page components
Implement comprehensive error boundaries in page components
Handle API e...

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{tsx,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{tsx,ts}: Use React 19.1.1 features and patterns following React 19 Documentation for healthcare application development
Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Use framer-motion for animations in healthcare UI interfaces

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

src/**/*.{tsx,css}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use Tailwind CSS 4.1.3 utility classes with custom healthcare-specific design system for styling

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Use 2-space indentation

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/pages/Encounters/TemplateBuilder/TemplateBuilder.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
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/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

**/*.{ts,tsx,js,jsx,json,css,scss,html}

📄 CodeRabbit inference engine (AGENTS.md)

Use 2-space indentation

Files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧠 Learnings (62)

📓 Common learnings

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*{[Ff]orm,[Ii]nput,[Ff]ield}*.{ts,tsx} : Use react-hook-form with zod validation for medical data integrity in form components

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13238
File: src/pages/Facility/settings/billing/discount/discount-components/DiscountMonetaryComponentForm.tsx:63-67
Timestamp: 2025-09-02T04:58:06.800Z
Learning: In the care_fe project's discount forms (DiscountMonetaryComponentForm.tsx), maintainers prefer using path: ["factor", "amount"] for cross-field validation rather than dynamic path binding like path: [valueType]. The approach of adding per-field FormMessage components for either/or validation was previously rejected by maintainers.

Learnt from: hrit2773
Repo: ohcnetwork/care_fe PR: 11447
File: src/components/Questionnaire/QuestionnaireEditor.tsx:1055-1069
Timestamp: 2025-03-30T12:22:58.576Z
Learning: In the QuestionnaireEditor component, React Hook Form's onChange handlers are intentionally overridden with custom updateField calls to maintain component-specific state management instead of relying on React Hook Form's internal state.

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Implement proper form validation with `zod` schemas in page components

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/**/validation.tsx : Use zod for form validation schemas in validation.tsx

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

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 controlled components for form inputs in page components

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} : Handle controlled inputs with proper TypeScript typing for form state

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/UserEditDetails.tsx:90-97
Timestamp: 2024-11-20T19:08:38.025Z
Learning: In the React component `UserEditDetails` (src/components/Users/UserEditDetails.tsx), error handling for form submissions is handled within the `UserAddEditForm` component, so additional error handling is unnecessary.

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11815
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:332-341
Timestamp: 2025-04-13T03:41:38.805Z
Learning: Form inputs in React components should use the controlled component pattern (using `value` instead of `defaultValue`) to ensure they properly reflect changes from all sources, particularly for textareas and form elements that may be updated from multiple places.

📚 Learning: 2025-11-25T13:52:19.758Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Implement proper form validation with `zod` schemas in page components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/validation.tsx : Use zod for form validation schemas in validation.tsx

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:19.758Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Use `i18next` for text translations in page components (existing dependency)

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-20T23:25:06.602Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9145
File: src/common/validation.tsx:41-41
Timestamp: 2024-11-20T23:25:06.602Z
Learning: When updating the name validation pattern in `src/common/validation.tsx`, avoid partial internationalization by not adding specific non-Latin Unicode ranges unless we're prepared to support all non-Latin scripts.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:50:10.786Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{ts,tsx} : All literal strings must use i18next for multi-language support in healthcare interfaces

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/*{[Ff]orm,[Ii]nput,[Ff]ield}*.{ts,tsx} : Use react-hook-form with zod validation for medical data integrity in form components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 `const { t } = useTranslation()` pattern for accessing translations

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-08-15T19:51:24.937Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12882
File: public/locale/en.json:3356-3356
Timestamp: 2025-08-15T19:51:24.937Z
Learning: In the AllergyTable component and related redesigned components (SymptomTable, DiagnosisTable) in `src/components/Patient/allergy/AllergyTable.tsx`, dynamic i18n lookups are used like `t(allergy.verification_status)` where the verification_status field can contain values like "presumed", "confirmed", "unconfirmed", etc. These require corresponding translation keys in the locale files.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:50:46.407Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Ensure full compatibility with react-hook-form for medical data collection in CAREUI components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Wrap all user-facing text content in `t("key.path")` for internationalization

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Use `zod` for schema validation in validation utility functions

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-01-14T09:22:13.878Z

Learnt from: rajku-dev
Repo: ohcnetwork/care_fe PR: 9887
File: src/components/Users/CreateUserForm.tsx:93-93
Timestamp: 2025-01-14T09:22:13.878Z
Learning: In CreateUserForm.tsx, the gender validation schema uses string literals that match GENDER_TYPES.map(g => g.id). Using GENDER_TYPES directly with z.enum() fails because it's marked with 'as const' which makes it a readonly tuple type incompatible with Zod's enum.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Support zod schemas for medical data validation and FHIR compliance in CAREUI components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-08-15T19:51:24.937Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12882
File: public/locale/en.json:3356-3356
Timestamp: 2025-08-15T19:51:24.937Z
Learning: The redesigned clinical information components (AllergyTable, DiagnosisTable, SymptomTable) in care_fe use dynamic i18n lookups like `t(allergy.verification_status)`, `t(diagnosis.verification_status)`, and `t(symptom.verification_status)`. This means all possible verification status values (including "presumed", "confirmed", "unconfirmed", "refuted", "entered_in_error") need corresponding translation keys in the locale files, even if they're not directly referenced with explicit t() calls in the codebase.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-04-13T03:41:38.805Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11815
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:332-341
Timestamp: 2025-04-13T03:41:38.805Z
Learning: Textareas and other form inputs in the codebase should use the controlled component pattern (using `value` instead of `defaultValue`) to ensure they properly reflect changes from all sources.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-04-13T03:41:38.805Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11815
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:332-341
Timestamp: 2025-04-13T03:41:38.805Z
Learning: Form inputs in React components should use the controlled component pattern (using `value` instead of `defaultValue`) to ensure they properly reflect changes from all sources, particularly for textareas and form elements that may be updated from multiple places.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-09-22T19:02:08.124Z

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13799
File: src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx:115-122
Timestamp: 2025-09-22T19:02:08.124Z
Learning: In the care_fe project's form components (like CreateScheduleTemplateSheet.tsx), maintainers use the union/refine pattern (z.union([z.number().min(1), z.undefined()]).refine()) for numeric fields instead of z.number({ required_error, invalid_type_error }) because their forms initialize with undefined values and use onChange handlers that convert invalid inputs back to undefined. This pattern maintains consistency with existing form architecture and avoids requiring refactoring of initialization and input handling logic.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 controlled components for form inputs in page components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Handle controlled inputs with proper TypeScript typing for form state

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-12-11T01:32:56.923Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 8956
File: src/components/Shifting/ShiftDetailsUpdate.tsx:348-370
Timestamp: 2024-12-11T01:32:56.923Z
Learning: In the `ShiftDetailsUpdate` component (`src/components/Shifting/ShiftDetailsUpdate.tsx`), the field `approving_facility` is not required in `initForm`.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-08-22T14:24:18.226Z

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13297
File: src/pages/Facility/settings/productKnowledge/ProductKnowledgeForm.tsx:200-206
Timestamp: 2025-08-22T14:24:18.226Z
Learning: In React Hook Form with complex nested schemas, setting initial default values to null can cause forms to become immediately "dirty" when components auto-initialize object structures, which can interfere with form submission button disable logic that relies on isDirty state.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-09-02T04:58:06.800Z

Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13238
File: src/pages/Facility/settings/billing/discount/discount-components/DiscountMonetaryComponentForm.tsx:63-67
Timestamp: 2025-09-02T04:58:06.800Z
Learning: In the care_fe project's discount forms (DiscountMonetaryComponentForm.tsx), maintainers prefer using path: ["factor", "amount"] for cross-field validation rather than dynamic path binding like path: [valueType]. The approach of adding per-field FormMessage components for either/or validation was previously rejected by maintainers.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-07-14T20:52:10.752Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 12916
File: src/pages/Facility/settings/billing/discount/discount-codes/DiscountCodeForm.tsx:78-78
Timestamp: 2025-07-14T20:52:10.752Z
Learning: In the care_fe codebase, the pattern for aria-required attributes on FormLabel components is to use `aria-required` without an explicit value (e.g., `<FormLabel aria-required>`) rather than `aria-required="true"`. This is the consistent pattern used throughout the codebase.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-13T23:01:50.297Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/UserAddEditForm.tsx:655-719
Timestamp: 2024-11-13T23:01:50.297Z
Learning: The duplication in form submission logic in `handleSubmit` has already been addressed in a previous comment.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-06-25T05:54:03.491Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 12680
File: src/components/Questionnaire/QuestionnaireEditor.tsx:813-816
Timestamp: 2025-06-25T05:54:03.491Z
Learning: In React components using UI library Button components (like shadcn/ui), adding `type="submit"` to a Button with an onClick handler does not cause the double execution issues that might occur with native HTML buttons, as the UI library handles form submission differently.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-20T19:08:38.025Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/UserEditDetails.tsx:90-97
Timestamp: 2024-11-20T19:08:38.025Z
Learning: In the React component `UserEditDetails` (src/components/Users/UserEditDetails.tsx), error handling for form submissions is handled within the `UserAddEditForm` component, so additional error handling is unnecessary.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 handle prefix for event handlers (e.g., handleSubmit, handleTagsUpdate, handlePatientSelect)

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:51.914Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Add ARIA labels for critical medical data (patient names, vital signs, medication alerts)

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 proper ARIA labels and roles in page components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Implement proper ARIA attributes for accessibility

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-13T12:33:52.373Z

Learnt from: AnveshNalimela
Repo: ohcnetwork/care_fe PR: 9096
File: src/components/Resource/ResourceList.tsx:245-245
Timestamp: 2024-11-13T12:33:52.373Z
Learning: When displaying the resource status in `ResourceList.tsx`, use `{t("consent__status")}` instead of adding a new translation key `{t("resource_status")}`.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:50:46.407Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Implement comprehensive screen reader support - All medical data must be accessible via assistive technology with proper ARIA labels for medical context and urgency

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:50:10.786Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/components/**/*.{ts,tsx} : Implement WCAG 2.1 AA accessibility compliance in medical applications with screen reader compatibility and keyboard navigation

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-03-26T03:26:25.654Z

Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 11557
File: src/pages/Organization/OrganizationPatients.tsx:155-156
Timestamp: 2025-03-26T03:26:25.654Z
Learning: In the Patient interface (src/types/emr/newPatient.ts), phone_number is a required field according to the TypeScript type definition and doesn't need null checks before formatting.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-03-30T12:22:58.576Z

Learnt from: hrit2773
Repo: ohcnetwork/care_fe PR: 11447
File: src/components/Questionnaire/QuestionnaireEditor.tsx:1055-1069
Timestamp: 2025-03-30T12:22:58.576Z
Learning: In the QuestionnaireEditor component, React Hook Form's onChange handlers are intentionally overridden with custom updateField calls to maintain component-specific state management instead of relying on React Hook Form's internal state.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/*Form*.{ts,tsx} : Medical form type patterns should organize related fields into logical nested object groups: personalInfo, medicalHistory, insuranceInfo for patient admission forms

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PatientContext.tsx : Implement Patient Context for current patient selection and medical alerts

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/*.{ts,tsx} : Include proper error boundaries for medical data in context implementations

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-01-14T09:22:13.878Z

Learnt from: rajku-dev
Repo: ohcnetwork/care_fe PR: 9887
File: src/components/Users/CreateUserForm.tsx:93-93
Timestamp: 2025-01-14T09:22:13.878Z
Learning: The suggestion to use GENDER_TYPES.map(g => g.id) for gender enum validation in CreateUserForm.tsx was incorrect and caused an error.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/*.{ts,tsx} : Implement proper consent management in context implementations

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/**/*.{test,spec}.{ts,tsx} : Validate emergency override scenarios in context tests

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:51.914Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Maintain proper heading hierarchy for screen reader support in medical records display

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:52:19.758Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Use semantic HTML structure for accessibility in page components

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2024-11-28T04:24:30.394Z

Learnt from: nithish1018
Repo: ohcnetwork/care_fe PR: 9157
File: src/components/Patient/UpdateStatusDialog.tsx:235-244
Timestamp: 2024-11-28T04:24:30.394Z
Learning: The existing `FileUpload` component does not implement keyboard accessibility enhancements like adding role attributes, tabIndex, or onKeyDown handlers to labels.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:50:46.407Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Use standard medical component interface patterns with medicalContext, accessibility properties (ariaLabel, screenReaderText), clinical validation callbacks (onValidationError), and medical data properties (patientId, facilityId)

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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 **/*.{ts,tsx} : Avoid using `any` type; use proper type definitions in TypeScript

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:54:43.264Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T13:54:43.264Z
Learning: Applies to **/*.{ts,tsx} : Avoid explicit `any` types and maintain proper nullability with TypeScript strict null checks

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:53:49.727Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T13:53:49.727Z
Learning: Applies to **/*.{ts,tsx} : Avoid explicit `any` type in TypeScript

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:53:49.727Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T13:53:49.727Z
Learning: Applies to **/*.{ts,tsx} : Use proper nullability annotations in TypeScript types

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Avoid `any` type; use `unknown` or proper type assertions in utility code

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:54:35.875Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursor/rules/04-ui-components.mdc:0-0
Timestamp: 2025-11-25T13:54:35.875Z
Learning: Applies to **/*.{tsx,ts} : Use `navigate` and `useRedirect` from raviger for navigation and redirects

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:32.224Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/hooks.instructions.md:0-0
Timestamp: 2025-11-25T13:51:32.224Z
Learning: Applies to src/hooks/**/*.{ts,tsx} : Validate medical data inputs using `zod` schemas in custom hooks

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Format dates, numbers, and currencies appropriately in page components using i18n

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:49:43.065Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T13:49:43.065Z
Learning: Applies to **/*.{ts,tsx} : Use raviger for routing

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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} : Create reusable validation schemas in validation utilities

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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: React context definitions and patterns must follow context.instructions.md

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.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/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-11-25T13:51:23.408Z

Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/ShortcutContext.tsx : Implement ShortcutContext with medical workflow keyboard shortcuts for rapid clinical actions and emergency protocol shortcuts for rapid response scenarios, including accessibility shortcuts for clinical environments

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-12-17T19:47:58.152Z

Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14821
File: src/components/Location/LocationNavigation.tsx:161-163
Timestamp: 2025-12-17T19:47:58.152Z
Learning: To ensure the remove-unused-i18n.js cleanup script detects i18n keys, avoid wrapping keys inside a ternary expression passed directly to t(). Instead, call t() separately in each branch of a conditional, e.g. condition ? t("key1") : t("key2"), or compute the key in a variable before passing to t(). For LocationNavigation.tsx (and similar TSX files in the repo), prefer explicit separate i18n calls per branch or a shared precomputed key to guarantee all keys are statically detectable by the script.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

📚 Learning: 2025-12-22T10:16:36.690Z

Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 14804
File: src/pages/Facility/services/pharmacy/DispensesView.tsx:117-135
Timestamp: 2025-12-22T10:16:36.690Z
Learning: In the care_fe repository, prefer the native HTML title attribute for simple tooltips over using shadcn/ui Tooltip components. Use Tooltip components only when the tooltip requires richer content, interactivity, or accessibility enhancements that cannot be achieved with a plain title. For simple cases, add a title attribute to the element (e.g., <span title="...">). If a Tooltip is used, ensure it is accessible and necessary, and avoid duplicating content available in the title attribute.

Applied to files:

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

🧬 Code graph analysis (1)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx (4)

src/types/emr/template/template.ts (4)

TemplateStatuses (61-61)

TemplateFormats (64-64)

TemplateStatus (62-62)

TemplateFormat (65-65)

src/components/ui/form.tsx (6)

FormLabel (167-167)

Form (162-162)

FormField (165-165)

FormItem (166-166)

FormControl (163-163)

FormMessage (168-168)

src/components/ui/select.tsx (5)

Select (192-192)

SelectTrigger (200-200)

SelectValue (201-201)

SelectContent (193-193)

SelectItem (195-195)

src/hooks/useFilters.tsx (1)

value (153-155)

⏰ 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). (6)

GitHub Check: build
GitHub Check: Redirect rules - care-ohc
GitHub Check: Header rules - care-ohc
GitHub Check: Pages changed - care-ohc
GitHub Check: Test
GitHub Check: CodeQL-Build

🔇 Additional comments (4)

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx (4)

82-102: LGTM! Schema correctly moved inside component for i18n support.

The validation schema now properly uses useTranslation() within the component scope, enabling dynamic language switching. The .trim() method on name and slug_value fields prevents false validation failures from whitespace, and all validation messages are correctly localized.

This addresses the previous critical comment about module-level schema definition.

520-548: Good implementation of controlled context selector.

The context selector correctly implements the controlled component pattern with React Hook Form:

field.value binds to the Select's value

field.onChange(value) updates the form state

setSelectedContext keeps local state synchronized

FormMessage displays validation errors

The synchronization between form state and local state ensures consistency throughout the component lifecycle.

694-706: Good addition of FormMessage for validation feedback.

The FormMessage component correctly displays validation errors for the template_data field, ensuring users receive feedback when the required field is empty or invalid.

This addresses the PR objective of fixing validation error messages not showing for fields.

111-111: No action needed. The empty string default for template_type is an intentional pattern used across all required string fields in this form (name, context, template_type, template_data all default to "") to force users to provide input and display validation feedback. This approach is consistent with the form's design where enum fields (status, default_format) receive valid defaults, while string selection fields remain empty until explicitly set. The Select component's placeholder handling manages the empty string value appropriately without creating controlled component issues.

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx

Ishu Agrawal added 3 commits December 26, 2025 15:02

Removed * indicator and adjusted zod schema and fixed validation erro…

7d201ca

…r messages

fixed ohcnetwork#14922: fixed Create Template Form

be525a2

fixed error

3016c70

Ishu813 requested review from a team December 26, 2025 10:25

ohc-project-manager bot assigned Ishu813 Dec 26, 2025

ohc-project-manager bot added needs testing needs review labels Dec 26, 2025

coderabbitai bot reviewed Dec 26, 2025

View reviewed changes

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx Outdated Show resolved Hide resolved

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx Show resolved Hide resolved

AdityaJ2305 suggested changes Dec 26, 2025

View reviewed changes

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx Show resolved Hide resolved

added aria-required to fields and solved an error

3f25833

coderabbitai bot reviewed Dec 27, 2025

View reviewed changes

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx Show resolved Hide resolved

github-actions bot added needs-triage question Further information is requested labels Dec 30, 2025

Made context field as required

cba7082

coderabbitai bot reviewed Dec 30, 2025

View reviewed changes

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx Show resolved Hide resolved

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx Show resolved Hide resolved

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx Show resolved Hide resolved

nihal467 requested changes Jan 2, 2026

View reviewed changes

nihal467 removed question Further information is requested needs testing needs review needs-triage labels Jan 2, 2026

nihal467 added the Changes Required label Jan 2, 2026

Removed * indicator and added field required message

03ba222

coderabbitai bot reviewed Jan 3, 2026

View reviewed changes

AdityaJ2305 suggested changes Jan 4, 2026

View reviewed changes

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx Outdated Show resolved Hide resolved

Added .trim() to name

c0ace58

coderabbitai bot reviewed Jan 4, 2026

View reviewed changes

src/pages/Encounters/TemplateBuilder/TemplateBuilder.tsx Show resolved Hide resolved

Fixed Create template form validation messages #14949

Are you sure you want to change the base?

Fixed Create template form validation messages #14949

Uh oh!

Conversation

Ishu813 commented Dec 26, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Merge Checklist

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Dec 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Dec 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎭 Playwright Test Results

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

parvathyns-creator commented Dec 30, 2025

Uh oh!

Ishu813 commented Dec 30, 2025

Uh oh!

parvathyns-creator commented Dec 30, 2025 via email

Uh oh!

parvathyns-creator commented Dec 30, 2025 via email

Uh oh!

Ishu813 commented Dec 30, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nihal467 left a comment

Choose a reason for hiding this comment

Uh oh!

Ishu813 commented Jan 3, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

netlify bot commented Jan 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for care-ohc ready!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Ishu813 commented Dec 26, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 26, 2025 •

edited

Loading

github-actions bot commented Dec 26, 2025 •

edited

Loading

netlify bot commented Jan 4, 2026 •

edited

Loading