Home Page redesign #14906
Home Page redesign #14906
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds four English translation keys and redesigns the Facility Overview page: introduces analytics gating, time‑of‑day greeting rendering, a 4‑column quick links Card layout, and a Playwright test suite validating overview navigation. Changes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Repository UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (2)
🧰 Additional context used📓 Path-based instructions (14)**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursorrules)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (.cursorrules)
Files:
**/*📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.ts📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
Files:
**/*.spec.ts📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
Files:
**/*.{tsx,ts}📄 CodeRabbit inference engine (.cursor/rules/04-ui-components.mdc)
Files:
**/*.{ts,tsx,js,jsx,json,css,scss,html}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{tsx,jsx}📄 CodeRabbit inference engine (.cursorrules)
Files:
src/**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{ts,tsx,css}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/pages/**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{tsx,ts}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{tsx,css}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/*.tsx📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
Files:
🧠 Learnings (93)📓 Common learnings📚 Learning: 2025-11-25T13:54:09.978ZApplied to files:
📚 Learning: 2024-11-18T10:46:56.270ZApplied to files:
📚 Learning: 2025-01-09T05:37:17.120ZApplied to files:
📚 Learning: 2024-12-04T18:58:47.241ZApplied to files:
📚 Learning: 2024-11-18T10:44:30.303ZApplied to files:
📚 Learning: 2025-11-25T13:50:46.407ZApplied to files:
📚 Learning: 2024-12-05T04:20:20.231ZApplied to files:
📚 Learning: 2025-11-25T13:51:07.680ZApplied to files:
📚 Learning: 2024-11-18T10:48:08.500ZApplied to files:
📚 Learning: 2025-11-25T13:52:33.081ZApplied to files:
📚 Learning: 2025-11-25T13:54:09.978ZApplied to files:
📚 Learning: 2025-11-20T09:48:26.486ZApplied to files:
📚 Learning: 2025-11-20T09:26:50.157ZApplied to files:
📚 Learning: 2025-11-25T13:51:23.408ZApplied to files:
📚 Learning: 2025-11-25T13:52:33.081ZApplied to files:
📚 Learning: 2025-11-25T13:50:46.407ZApplied to files:
📚 Learning: 2025-11-25T13:50:46.407ZApplied to files:
📚 Learning: 2025-11-25T13:50:46.407ZApplied to files:
📚 Learning: 2025-01-08T14:03:08.947ZApplied to files:
📚 Learning: 2025-04-26T18:53:15.058ZApplied to files:
📚 Learning: 2025-12-17T19:47:58.152ZApplied to files:
📚 Learning: 2025-11-25T13:53:40.623ZApplied to files:
📚 Learning: 2025-11-25T13:54:35.875ZApplied to files:
📚 Learning: 2025-11-25T13:50:10.786ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:54:35.875ZApplied to files:
📚 Learning: 2025-11-25T13:54:35.875ZApplied to files:
📚 Learning: 2025-11-25T13:53:57.496ZApplied to files:
📚 Learning: 2025-11-25T13:50:10.786ZApplied to files:
📚 Learning: 2025-11-25T13:50:10.786ZApplied to files:
📚 Learning: 2025-11-25T13:54:35.875ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2024-11-13T12:33:52.373ZApplied to files:
📚 Learning: 2025-01-23T02:20:55.489ZApplied to files:
📚 Learning: 2025-03-03T05:00:04.480ZApplied to files:
📚 Learning: 2025-08-15T19:51:24.937ZApplied to files:
📚 Learning: 2025-08-15T19:51:24.937ZApplied to files:
📚 Learning: 2025-11-25T13:51:23.408ZApplied to files:
📚 Learning: 2025-11-25T13:51:41.208ZApplied to files:
📚 Learning: 2025-08-26T06:35:18.610ZApplied to files:
📚 Learning: 2025-11-25T13:54:35.875ZApplied to files:
📚 Learning: 2025-11-25T13:54:35.875ZApplied to files:
📚 Learning: 2025-11-25T13:49:43.065ZApplied to files:
📚 Learning: 2025-11-25T13:54:09.978ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-25T13:53:40.623ZApplied to files:
📚 Learning: 2025-11-25T13:50:10.786ZApplied to files:
📚 Learning: 2025-11-25T13:53:40.623ZApplied to files:
📚 Learning: 2025-09-23T16:09:06.510ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:50:46.407ZApplied to files:
📚 Learning: 2025-11-25T13:54:35.875ZApplied to files:
📚 Learning: 2025-11-25T13:50:10.786ZApplied to files:
📚 Learning: 2025-11-25T13:50:46.407ZApplied to files:
📚 Learning: 2025-11-25T13:54:35.875ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-01-20T13:52:44.742ZApplied to files:
📚 Learning: 2025-11-25T13:51:23.408ZApplied to files:
📚 Learning: 2025-11-25T13:50:54.683ZApplied to files:
📚 Learning: 2025-11-25T13:50:54.683ZApplied to files:
📚 Learning: 2025-11-25T13:51:23.408ZApplied to files:
📚 Learning: 2025-11-25T13:50:54.683ZApplied to files:
📚 Learning: 2025-11-25T13:50:54.683ZApplied to files:
📚 Learning: 2024-11-06T07:49:19.355ZApplied to files:
📚 Learning: 2025-11-25T13:50:46.407ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:52:33.081ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-11-25T13:50:10.786ZApplied to files:
📚 Learning: 2025-11-25T13:50:10.786ZApplied to files:
📚 Learning: 2025-01-31T22:13:06.153ZApplied to files:
📚 Learning: 2024-11-12T12:46:55.920ZApplied to files:
📚 Learning: 2025-09-02T01:09:03.154ZApplied to files:
📚 Learning: 2025-04-11T20:28:51.054ZApplied to files:
📚 Learning: 2025-04-11T20:28:51.054ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-11-25T13:52:19.758ZApplied to files:
📚 Learning: 2025-03-04T13:11:05.207ZApplied to files:
📚 Learning: 2025-11-25T13:52:51.914ZApplied to files:
📚 Learning: 2025-12-22T10:16:36.690ZApplied to files:
🧬 Code graph analysis (2)tests/facility/overview/overview.spec.ts (1)
src/pages/Facility/overview.tsx (3)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
🔇 Additional comments (4)
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. Comment |
There was a problem hiding this comment.
Pull request overview
This PR redesigns the home page of the CARE application with a refreshed welcome section featuring a gradient background with decorative images, and updates the quick actions cards with a new two-tone layout. The changes focus on improving the visual presentation and user experience of the facility overview page.
Key Changes:
- Redesigned welcome banner with gradient background and decorative images
- Updated quick actions/links cards with new layout and styling
- Renamed "Schedules" to "Appointments" and updated related permissions
Reviewed changes
Copilot reviewed 2 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| src/pages/Facility/overview.tsx | Implements the home page redesign with new welcome banner styling, updated card layouts, and renamed shortcuts from "quick_actions" to "quick_links" |
| public/locale/en.json | Adds new translation keys for "analytics", "quick_links", "view_analytics", and greeting messages with time-based salutations |
| if (hour < 12) return "Morning"; | ||
| if (hour < 18) return "Afternoon"; | ||
| return "Evening"; |
There was a problem hiding this comment.
The getGreeting function returns hardcoded English strings instead of i18n keys. These strings should be internationalized to support multiple languages. Consider returning i18n keys like 'morning', 'afternoon', and 'evening' that can be translated, or handle the translation within the function using the t function.
| if (hour < 12) return "Morning"; | |
| if (hour < 18) return "Afternoon"; | |
| return "Evening"; | |
| if (hour < 12) return t("morning"); | |
| if (hour < 18) return t("afternoon"); | |
| return t("evening"); |
| <div className="relative border-3 border-white overflow-hidden text-gray-900 rounded-xl bg-[linear-gradient(to_right,#F9FAFB_0%,#F0F0E6_60%)] sm:bg-[linear-gradient(to_right,#F9FAFB_0%, #F9FAFB_70%, #F0F0E6_100%)] lg:bg-[linear-gradient(to_right,#F5F8FF_0%,#F9FAFB_50%,#F0F0E6_100%)]"> | ||
| <div | ||
| className="absolute w-full h-full bg-right bg-no-repeat bg-contain rounded-lg mix-blend-darken -right-8 md:right-0" | ||
| style={{ backgroundImage: "url('/images/home-banner-icon.webp')" }} |
There was a problem hiding this comment.
The background image URL uses a .webp format which may not be supported in older browsers or assistive technologies. Consider providing fallback images or using a more widely supported format for critical visual elements, especially in healthcare applications where various devices may be in use.
| style={{ backgroundImage: "url('/images/home-banner-icon.webp')" }} | |
| style={{ | |
| backgroundImage: | |
| "url('/images/home-banner-icon.webp'), url('/images/home-banner-icon.png')", | |
| }} |
| {t("welcome_back_to_hospital_dashboard")} | ||
| </p> | ||
| </div> | ||
| <div className="relative border-3 border-white overflow-hidden text-gray-900 rounded-xl bg-[linear-gradient(to_right,#F9FAFB_0%,#F0F0E6_60%)] sm:bg-[linear-gradient(to_right,#F9FAFB_0%, #F9FAFB_70%, #F0F0E6_100%)] lg:bg-[linear-gradient(to_right,#F5F8FF_0%,#F9FAFB_50%,#F0F0E6_100%)]"> |
There was a problem hiding this comment.
The inline gradient definitions with hex color codes are duplicated across multiple breakpoints. Consider extracting these gradient values into Tailwind configuration or CSS variables for better maintainability and consistency across the healthcare design system.
| /> | ||
|
|
||
| <div className="relative z-10 p-4 md:p-8 max-w-[250px] md:max-w-[280px] lg:max-w-lg"> | ||
| <h1 className="mb-2 font-bold text-gray-900 text-2xl wrap-break-word"> |
There was a problem hiding this comment.
The CSS class 'wrap-break-word' appears to be a non-standard Tailwind class. Standard Tailwind utilities for word wrapping are 'break-words', 'break-all', or 'break-normal'. Verify that this class exists in your custom Tailwind configuration or replace it with a standard utility.
| <h1 className="mb-2 font-bold text-gray-900 text-2xl wrap-break-word"> | |
| <h1 className="mb-2 font-bold text-gray-900 text-2xl break-words"> |
| "graph": "Graph", | ||
| "greater": "Greater Than", | ||
| "greater_or_equals": "Greater Than or Equal", | ||
| "greet_user": "<1>Good {{time_of_day}},</1> <2>{{user}}</2> 👋", |
There was a problem hiding this comment.
The greeting interpolates an untranslated time_of_day value (Morning/Afternoon/Evening) from the getGreeting function. This creates a mismatch where the greeting structure is translated but the time of day remains in English. The time_of_day values should also be translatable for proper internationalization in a global healthcare system.
| "greet_user": "<1>Good {{time_of_day}},</1> <2>{{user}}</2> 👋", | |
| "greet_user": "<1>Hello,</1> <2>{{user}}</2> 👋", |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/Facility/overview.tsx (1)
46-60: Consider handling loading state for facility data.When
facilityDatais loading,permissionsdefaults to an empty array, causing permission-gated shortcuts (appointments, encounters) to be hidden until the query completes. This may cause a brief flash where only non-permission-gated shortcuts are visible.Consider adding a loading skeleton or waiting for data before rendering shortcuts:
🔎 Possible approach
const { data: facilityData, isLoading } = useQuery({ queryKey: ["facility", facilityId], queryFn: query(facilityApi.get, { pathParams: { facilityId }, }), }); + if (isLoading) { + return <Page title=""><LoadingState /></Page>; + }Alternatively, you could show skeleton cards in the shortcuts grid while loading.
📜 Review details
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
public/images/home-banner-sun.pngis excluded by!**/*.png
📒 Files selected for processing (3)
public/images/home-banner-icon.webppublic/locale/en.jsonsrc/pages/Facility/overview.tsx
🧰 Additional context used
📓 Path-based instructions (13)
public/locale/**/*.json
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use i18n Locale files with English Locale files in
public/locale/en.json- non-English languages managed via Crowdin only
Files:
public/locale/en.json
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Use 2-space indentation
Files:
public/locale/en.jsonsrc/pages/Facility/overview.tsx
**/*.{ts,tsx,js,jsx,json,css,scss,html}
📄 CodeRabbit inference engine (AGENTS.md)
Use 2-space indentation
Files:
public/locale/en.jsonsrc/pages/Facility/overview.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types in TypeScript
Avoid explicitanytype in TypeScript
Use proper nullability annotations in TypeScript types
Use dedicated error handlers and TypeScript strict null checks
**/*.{ts,tsx}: Use TypeScript for all new code
Prefer interfaces over types for object definitions in TypeScript
Avoid usinganytype; use proper type definitions in TypeScript
Use type inference where possible in TypeScript
Use TanStack Query for API data management
Prefer React Context for global state management
**/*.{ts,tsx}: Use TanStack Query with thequeryandmutateutilities from@/Utils/request/
Use appropriate query keys following the resource pattern for TanStack Query
Leverage TanStack Query built-in features for pagination and debouncing
Implement proper error handling using the global error handler for TanStack Query operations
UseuseQueryhook withqueryKeyandqueryFnparameters, wherequeryFnwraps the API route with thequery()utility
UseuseMutationhook withmutationFnparameter wrapping API routes with themutate()utility, and implementonSuccesscallbacks to invalidate related queries
Support path parameters in TanStack Query using thepathParamsoption in query/mutate utilities
Support query parameters in TanStack Query using thequeryParamsoption in query/mutate utilities
Use thesilent: trueoption to suppress global error notifications when custom error handling is needed
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types
Avoid explicitanytypes and maint...
Files:
src/pages/Facility/overview.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names
**/*.{ts,tsx,js,jsx}: Use path aliases@/*for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names
Files:
src/pages/Facility/overview.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
Use declarative JSX
Files:
src/pages/Facility/overview.tsx
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{ts,tsx}: Use strict TypeScript configuration for medical data safety in all TypeScript source files
All literal strings must use i18next for multi-language support in healthcare interfaces
Use comprehensive error boundaries and user-friendly error messages for medical workflow debugging without exposing PHI
Follow ESLint configured rules for React hooks, accessibility, and code quality
Use @tanstack/react-query for server state management in API client code
Localize date and time formats for medical timestamps using locale-aware formatting functions
Use date-fns for date handling and manipulation with locale awareness for medical timestamps
Files:
src/pages/Facility/overview.tsx
src/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Prettier for consistent code formatting across the healthcare application
Files:
src/pages/Facility/overview.tsx
src/pages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use raviger for application routing in page components and route definitions
src/pages/**/*.{ts,tsx}: Keep page components insrc/pages/organized by feature
Use descriptive file names that reflect the page purpose
Export page components as default exports
Co-locate page-specific components and utilities with page components
Useravigerrouter for navigation (existing dependency)
Implement proper route parameters and query string handling
Handle navigation guards and authentication checks in page components
Implement proper loading states and error boundaries in page components
Use semantic HTML structure for accessibility in page components
Use@tanstack/react-queryfor API state management in page components (existing dependency)
Implement proper loading, error, and success states for data fetching
Handle pagination and infinite scroll patterns appropriately
Cache data appropriately in page components based on usage patterns
Use controlled components for form inputs in page components
Implement proper form validation withzodschemas in page components
Handle form submission states (loading, success, error) in page components
Use React hooks for local page state
Minimize unnecessary re-renders in page components
Implement proper authentication checks in page components
Handle different user roles and permissions in page components
Redirect to login when authentication is required in page components
Show appropriate UI based on user permissions in page components
Set appropriate page titles and meta descriptions in page components
Handle OpenGraph and Twitter card meta tags in page components
Implement structured data where applicable in page components
Implement code splitting for large page components
Use lazy loading for heavy components within page components
Optimize bundle size with proper imports in page components
Handle image optimization and lazy loading in page components
Implement comprehensive error boundaries in page components
Handle API e...
Files:
src/pages/Facility/overview.tsx
src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{tsx,ts}: Use React 19.1.1 features and patterns following React 19 Documentation for healthcare application development
Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Use framer-motion for animations in healthcare UI interfaces
Files:
src/pages/Facility/overview.tsx
src/**/*.{tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Tailwind CSS 4.1.3 utility classes with custom healthcare-specific design system for styling
Files:
src/pages/Facility/overview.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
**/*.tsx: Use functional components with proper type definitions in React
One component per file is preferred
Prefer default exports for React components
Follow the component naming pattern:ComponentName.tsxfor React components
Use Tailwind CSS for styling
Use Shadcn UI components when available
Use local state for component-specific data
Use PascalCase for component file names (e.g.,AuthWizard.tsx)
Files:
src/pages/Facility/overview.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/04-ui-components.mdc)
**/*.{tsx,ts}: Use Shadcn UI components as the primary component library
Follow the component documentation for proper usage
Customize components using Tailwind CSS
UsenavigateanduseRedirectfrom raviger for navigation and redirects
Use Tailwind's responsive classes and follow mobile-first approach
Implement proper ARIA attributes for accessibility
Ensure keyboard navigation works in components
Define component props using TypeScript interfaces
Use translation keys fromsrc/Locale/for internationalization
Support RTL languages in components
Use proper date/time formatting for multiple language support
Files:
src/pages/Facility/overview.tsx
🧠 Learnings (34)
📓 Common learnings
Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 9956
File: src/pages/Patient/index.tsx:71-71
Timestamp: 2025-01-15T04:16:14.978Z
Learning: In this project, new translation strings must only be added to the English locale (en.json) through pull requests. Translations for other languages (ta.json, mr.json, ml.json, hi.json, kn.json, etc.) are managed through Crowdin (https://crowdin.com/project/ohccarefe) and should not be modified directly in PRs.
Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 9956
File: src/pages/Patient/index.tsx:71-71
Timestamp: 2025-01-15T04:16:14.978Z
Learning: In this project, translations are only added to the English locale (en.json) through pull requests. Other locale files are managed through Crowdin and should not be modified directly in PRs.
📚 Learning: 2025-01-15T04:16:14.978Z
Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 9956
File: src/pages/Patient/index.tsx:71-71
Timestamp: 2025-01-15T04:16:14.978Z
Learning: In this project, new translation strings must only be added to the English locale (en.json) through pull requests. Translations for other languages (ta.json, mr.json, ml.json, hi.json, kn.json, etc.) are managed through Crowdin (https://crowdin.com/project/ohccarefe) and should not be modified directly in PRs.
Applied to files:
public/locale/en.json
📚 Learning: 2025-01-15T04:16:14.978Z
Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 9956
File: src/pages/Patient/index.tsx:71-71
Timestamp: 2025-01-15T04:16:14.978Z
Learning: In this project, translations are only added to the English locale (en.json) through pull requests. Other locale files are managed through Crowdin and should not be modified directly in PRs.
Applied to files:
public/locale/en.json
📚 Learning: 2025-01-14T09:50:51.248Z
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 or error strings in code, always ensure corresponding translation keys are added to the locale files (e.g., public/locale/en.json).
Applied to files:
public/locale/en.json
📚 Learning: 2025-01-14T09:50:51.248Z
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.
Applied to files:
public/locale/en.json
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Integrate CAREUI components cleanly with healthcare data sources and support live data updates for critical medical information
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/FacilityContext.tsx : Implement Facility Context for department location and resource availability
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Optimize CAREUI components for memory efficiency for long-running clinical applications
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Use standard medical component interface patterns with medicalContext, accessibility properties (ariaLabel, screenReaderText), clinical validation callbacks (onValidationError), and medical data properties (patientId, facilityId)
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Use CAREUI imports for medical-specific functionality and shadcn/ui imports for standard UI components - CAREUI for medical interactions/workflows/data, shadcn/ui for buttons, forms, modals, tables, navigation
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use healthcare-specific CAREUI custom components (Calendar, WeekdayCheckbox, Zoom) from `@/CAREUI/`
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{tsx,ts} : Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `PatientHoverCard` for patient info overlays
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Integrate CAREUI components with React Query for real-time data from medical API endpoints
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `tanstack/react-query` for server state management with facility data and patient records
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Use `tanstack/react-query` for API state management in page components (existing dependency)
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use named exports from `lucide-react` for icons (e.g., `import { SettingsIcon } from "lucide-react"`)
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:52:33.081Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/providers.instructions.md:0-0
Timestamp: 2025-11-25T13:52:33.081Z
Learning: Applies to src/Providers/**/*.{ts,tsx} : Integrate with tanstack/react-query for server state management in providers
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Import `useTranslation` from `react-i18next` for internationalization
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/**/*.{ts,tsx} : Use tanstack/react-query for server state management in API client code
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-01-31T22:13:06.153Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 10345
File: src/components/Resource/ResourceDetailsUpdate.tsx:132-145
Timestamp: 2025-01-31T22:13:06.153Z
Learning: The migration from useTanStackQueryInstead to useQuery in React components requires:
1. Updating types to use UseQueryResult instead of custom hook return type
2. Replacing loading with isLoading property
3. Using queryKey array for cache management
4. Using queryFn with query utility function
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Implement PermissionContext with medical role-based permissions (Doctor, Nurse, Admin, Pharmacist) including patient data access control with dynamic permission checking and facility-level permissions for multi-facility healthcare systems
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Custom React hooks for healthcare workflows must follow hooks.instructions.md
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Create PermissionContext type with userPermissions array, canAccessPatient method, canPrescribeMedication boolean, and emergencyOverride boolean properties, along with a usePermissions hook that throws an error if used outside PermissionProvider
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-09-02T01:09:03.154Z
Learnt from: abhimanyurajeesh
Repo: ohcnetwork/care_fe PR: 13576
File: src/hooks/useFacilityShortcuts.ts:76-80
Timestamp: 2025-09-02T01:09:03.154Z
Learning: In the useFacilityShortcuts hook for the CARE frontend, the developer prefers to handle permission checks at the handler level rather than at the keyboard shortcut registration level with dynamic canCreate conditions. The handler permission checks on lines 39-44 provide adequate control.
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-04-11T20:28:51.054Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 11884
File: src/pages/Landing/LandingPage.tsx:128-158
Timestamp: 2025-04-11T20:28:51.054Z
Learning: The LoginHeader component uses the AuthContext for authentication and includes the SignCompact component, making it incompatible with the token-based authentication flow used in the LandingPage. The custom header implementation in LandingPage is specifically designed for patient authentication with different navigation targets (/patient/home vs /dashboard) and different user information display.
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-04-11T20:28:51.054Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 11884
File: src/pages/Landing/LandingPage.tsx:128-158
Timestamp: 2025-04-11T20:28:51.054Z
Learning: The LoginHeader component includes both logged-in UI (with home button and dropdown) and logged-out UI (with sign-in button). When integrating authentication headers in pages that already have login sections (like LandingPage), custom header implementations may be needed to avoid duplicate login UI elements.
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Handle emergency and critical care scenarios appropriately in healthcare page components
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Maintain proper heading hierarchy for screen reader support in medical records display
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Show appropriate UI based on user permissions in page components
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-03-04T13:11:05.207Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 10940
File: src/components/Auth/Login.tsx:701-711
Timestamp: 2025-03-04T13:11:05.207Z
Learning: In the CARE frontend application, use the Button component with variant="link" for link-style action triggers rather than using <p> tags with onClick handlers or plain <button> elements, following the established pattern in the codebase.
Applied to files:
src/pages/Facility/overview.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Follow `<Card><CardHeader>` pattern for consistent card layouts
Applied to files:
src/pages/Facility/overview.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/Facility/overview.tsx
📚 Learning: 2025-12-17T19:47:58.152Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14821
File: src/components/Location/LocationNavigation.tsx:161-163
Timestamp: 2025-12-17T19:47:58.152Z
Learning: To ensure the remove-unused-i18n.js cleanup script detects i18n keys, avoid wrapping keys inside a ternary expression passed directly to t(). Instead, call t() separately in each branch of a conditional, e.g. condition ? t("key1") : t("key2"), or compute the key in a variable before passing to t(). For LocationNavigation.tsx (and similar TSX files in the repo), prefer explicit separate i18n calls per branch or a shared precomputed key to guarantee all keys are statically detectable by the script.
Applied to files:
src/pages/Facility/overview.tsx
🧬 Code graph analysis (1)
src/pages/Facility/overview.tsx (4)
src/hooks/useCareApps.tsx (1)
useCareApps(11-19)src/common/Permissions.tsx (1)
getPermissions(263-469)src/Utils/utils.ts (1)
formatName(54-75)src/components/ui/card.tsx (4)
Card(75-75)CardContent(76-76)CardTitle(80-80)CardDescription(77-77)
⏰ 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 (4)
public/locale/en.json (3)
643-643: Newanalyticslabel is clear and consistentLabel is concise and matches surrounding keys (e.g.,
financial_overview). No change needed, and adding it only toen.jsonaligns with the translation workflow.Based on learnings, this respects the “English-only in repo, other locales via Crowdin” rule.
4138-4138:quick_linkslabel fits existing home/quick-action namingText and casing are consistent with nearby keys like
quick_accessandquick_actions. No changes needed.
2431-2431: greet_user placeholders and Trans usage are correctThe component properly passes
time_of_dayanduservia thevaluesprop, uses<Trans>with two child elements at indices 1 and 2 matching the i18n string structure.src/pages/Facility/overview.tsx (1)
41-51: Well-structured component with proper patterns.The component follows project conventions well:
- Correct use of
useQuerywith query utility and proper queryKey- Permission context integration via
usePermissionshook- Proper use of shadcn/ui Card components
- Decorative images correctly marked with
aria-hidden="true"
| "view_all": "View All", | ||
| "view_all_deliveries": "View All Deliveries", | ||
| "view_all_details": "View All Details", | ||
| "view_analytics": "View and manage Analytics", |
There was a problem hiding this comment.
Normalize capitalization in view_analytics string
Other “view_and_manage_*” strings use lowercase for the resource (e.g., “View and manage invoices”), so this one is slightly inconsistent.
Suggested text tweak for consistency
- "view_analytics": "View and manage Analytics",
+ "view_analytics": "View and manage analytics",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "view_analytics": "View and manage Analytics", | |
| "view_analytics": "View and manage analytics", |
🤖 Prompt for AI Agents
In public/locale/en.json around line 5694, the string value for "view_analytics"
uses inconsistent capitalization ("View and manage Analytics"); update it to
match other "view_and_manage_*" entries by changing the resource to
lowercase—i.e., "View and manage analytics"—and keep the JSON formatting intact.
| const getGreeting = () => { | ||
| const hour = new Date().getHours(); | ||
| if (hour < 12) return "Morning"; | ||
| if (hour < 18) return "Afternoon"; | ||
| return "Evening"; | ||
| }; |
There was a problem hiding this comment.
Time-of-day greeting strings bypass i18n.
The function returns hardcoded English strings ("Morning", "Afternoon", "Evening") that are interpolated directly into the greet_user translation. This means the time-of-day portion won't be translated for non-English locales.
Consider returning lowercase keys and translating them:
🔎 Proposed fix
const getGreeting = () => {
const hour = new Date().getHours();
- if (hour < 12) return "Morning";
- if (hour < 18) return "Afternoon";
- return "Evening";
+ if (hour < 12) return t("morning");
+ if (hour < 18) return t("afternoon");
+ return t("evening");
};Then add the corresponding keys to en.json:
"morning": "Morning",
"afternoon": "Afternoon",
"evening": "Evening"🤖 Prompt for AI Agents
In src/pages/Facility/overview.tsx around lines 62-67, the getGreeting function
returns hardcoded English strings ("Morning", "Afternoon", "Evening") which
bypass i18n; change it to return lowercase keys (e.g., "morning", "afternoon",
"evening") instead, then pass the resulting key to the i18n translate function
where the greeting is composed; also add the three keys ("morning", "afternoon",
"evening") to locale files (e.g., en.json) with their translations so the
time-of-day portion is translated for all locales.
| { | ||
| title: t("encounters"), | ||
| description: t("manage_facility_users"), | ||
| icon: Users, | ||
| icon: Stethoscope, | ||
| href: `/facility/${facilityId}/encounters/patients/${careConfig.defaultEncounterType || "all"}`, | ||
| visible: canListEncounters, | ||
| }, |
There was a problem hiding this comment.
Incorrect description for encounters shortcut.
The encounters shortcut uses t("manage_facility_users") as its description, but encounters are about patient clinical visits, not facility user management. This appears to be a copy-paste error.
🔎 Proposed fix
{
title: t("encounters"),
- description: t("manage_facility_users"),
+ description: t("manage_encounters"),
icon: Stethoscope,
href: `/facility/${facilityId}/encounters/patients/${careConfig.defaultEncounterType || "all"}`,
visible: canListEncounters,
},Ensure the manage_encounters key is added to en.json with appropriate text like "manage_encounters": "View and manage patient encounters".
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/pages/Facility/overview.tsx around lines 78 to 84, the description for
the encounters shortcut incorrectly uses t("manage_facility_users"); change it
to use a new i18n key like t("manage_encounters") and update any usages
accordingly, then add the key "manage_encounters": "View and manage patient
encounters" to en.json (or the appropriate locale files) to provide the correct
description for encounters.
| /> | ||
|
|
||
| <div className="relative z-10 p-4 md:p-8 max-w-[250px] md:max-w-[280px] lg:max-w-lg"> | ||
| <h1 className="mb-2 font-bold text-gray-900 text-2xl wrap-break-word"> |
There was a problem hiding this comment.
Invalid Tailwind class wrap-break-word.
The class wrap-break-word is not a standard Tailwind CSS utility. For word-breaking behavior, use break-words instead.
🔎 Proposed fix
- <h1 className="mb-2 font-bold text-gray-900 text-2xl wrap-break-word">
+ <h1 className="mb-2 font-bold text-gray-900 text-2xl break-words">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <h1 className="mb-2 font-bold text-gray-900 text-2xl wrap-break-word"> | |
| <h1 className="mb-2 font-bold text-gray-900 text-2xl break-words"> |
🤖 Prompt for AI Agents
In src/pages/Facility/overview.tsx around line 140 the h1 uses an invalid
Tailwind class "wrap-break-word"; replace that class with the correct Tailwind
utility "break-words" to enable proper word-breaking (i.e., update the className
to remove "wrap-break-word" and add "break-words").
| <div className="flex items-center justify-between p-4"> | ||
| <span className="text-sm font-medium text-gray-700"> | ||
| {t("go_to")} {shortcut.title} | ||
| </span> | ||
| <ArrowUpRight className="text-gray-400 size-4" /> | ||
| </div> |
There was a problem hiding this comment.
String concatenation breaks i18n for RTL and non-English word orders.
The template {t("go_to")} {shortcut.title} concatenates translated strings, which doesn't work correctly for languages with different grammatical structures (e.g., German, Japanese, Arabic). Word order varies by language.
Use interpolation instead:
🔎 Proposed fix
<div className="flex items-center justify-between p-4">
<span className="text-sm font-medium text-gray-700">
- {t("go_to")} {shortcut.title}
+ {t("go_to_page", { page: shortcut.title })}
</span>
<ArrowUpRight className="text-gray-400 size-4" />
</div>Add to en.json:
"go_to_page": "Go to {{page}}"Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/pages/Facility/overview.tsx around lines 184 to 189, the code
concatenates translations with dynamic text ({t("go_to")} {shortcut.title}),
which breaks i18n for RTL and languages with different word order; replace the
concatenation with a single interpolated translation key (e.g., add
"go_to_page": "Go to {{page}}" to your locale JSONs) and call the translator
with the page variable (t('go_to_page', { page: shortcut.title })), updating all
locale files to include appropriate translations and adjusting any tests or
types if necessary.
🎭 Playwright Test ResultsStatus: ✅ Passed
📊 Detailed results are available in the playwright-final-report artifact. Run: #4183 |
nihal467
left a comment
nihal467
left a comment
There was a problem hiding this comment.
- The PR functionality looks good. Add a playwright test to verify that the redirection via card from the overview page is functional
done. added playwright tests to verify navigation from overview page |
| {t("welcome_back_to_hospital_dashboard")} | ||
| </p> | ||
| </div> | ||
| <div className="relative border-3 border-white overflow-hidden text-gray-900 rounded-xl bg-[linear-gradient(to_right,#F9FAFB_0%,#F0F0E6_60%)] sm:bg-[linear-gradient(to_right,#F9FAFB_0%, #F9FAFB_70%, #F0F0E6_100%)] lg:bg-[linear-gradient(to_right,#F5F8FF_0%,#F9FAFB_50%,#F0F0E6_100%)]"> |
There was a problem hiding this comment.
The decorative background image uses an inline style. While aria-hidden='true' is correctly applied, consider adding alt text explanation in a comment or documentation to clarify why these images are decorative and don't need screen reader description.
| <div className="relative border-3 border-white overflow-hidden text-gray-900 rounded-xl bg-[linear-gradient(to_right,#F9FAFB_0%,#F0F0E6_60%)] sm:bg-[linear-gradient(to_right,#F9FAFB_0%, #F9FAFB_70%, #F0F0E6_100%)] lg:bg-[linear-gradient(to_right,#F5F8FF_0%,#F9FAFB_50%,#F0F0E6_100%)]"> | |
| <div className="relative border-3 border-white overflow-hidden text-gray-900 rounded-xl bg-[linear-gradient(to_right,#F9FAFB_0%,#F0F0E6_60%)] sm:bg-[linear-gradient(to_right,#F9FAFB_0%, #F9FAFB_70%, #F0F0E6_100%)] lg:bg-[linear-gradient(to_right,#F5F8FF_0%,#F9FAFB_50%,#F0F0E6_100%)]"> | |
| {/* | |
| Decorative background illustrations: | |
| - Implemented as CSS background images on non-semantic divs | |
| - Marked aria-hidden="true" so they are ignored by screen readers | |
| - No alt text provided because they convey no clinical or functional information | |
| */} |
| "graph": "Graph", | ||
| "greater": "Greater Than", | ||
| "greater_or_equals": "Greater Than or Equal", | ||
| "greet_user": "<1>Good {{time_of_day}},</1> <2>{{user}}</2> 👋", |
There was a problem hiding this comment.
The emoji '👋' in the greeting may not be accessible to all screen readers. Consider adding aria-label to the emoji or replacing it with text/icon that has proper accessibility support.
| "greet_user": "<1>Good {{time_of_day}},</1> <2>{{user}}</2> 👋", | |
| "greet_user": "<1>Good {{time_of_day}},</1> <2>{{user}}</2> (wave)", |
SiddanthNayak
added
Playwright Test Code Review
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
public/locale/en.json (2)
2435-2435: Ensuretime_of_daypassed intogreet_useris localized
"greet_user": "<1>Good {{time_of_day}},</1> <2>{{user}}</2> 👋"assumes that{{time_of_day}}is already localized (e.g., “morning/afternoon/evening”). If those values are generated in code as English strings, this will break i18n for non‑English locales. Either localize thetime_of_daysource itself or remove the time‑of‑day word from this string.
5713-5713: Normalize capitalization inview_analyticsto match other “view_and_manage_*” stringsOther keys like
view_and_manage_invoicesuse lowercase for the resource name (“View and manage invoices”). For consistency:- "view_analytics": "View and manage Analytics", + "view_analytics": "View and manage analytics",
📜 Review details
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
public/locale/en.jsontests/facility/overview/overview.spec.ts
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types in TypeScript
Avoid explicitanytype in TypeScript
Use proper nullability annotations in TypeScript types
Use dedicated error handlers and TypeScript strict null checks
**/*.{ts,tsx}: Use TypeScript for all new code
Prefer interfaces over types for object definitions in TypeScript
Avoid usinganytype; use proper type definitions in TypeScript
Use type inference where possible in TypeScript
Use TanStack Query for API data management
Prefer React Context for global state management
**/*.{ts,tsx}: Use TanStack Query with thequeryandmutateutilities from@/Utils/request/
Use appropriate query keys following the resource pattern for TanStack Query
Leverage TanStack Query built-in features for pagination and debouncing
Implement proper error handling using the global error handler for TanStack Query operations
UseuseQueryhook withqueryKeyandqueryFnparameters, wherequeryFnwraps the API route with thequery()utility
UseuseMutationhook withmutationFnparameter wrapping API routes with themutate()utility, and implementonSuccesscallbacks to invalidate related queries
Support path parameters in TanStack Query using thepathParamsoption in query/mutate utilities
Support query parameters in TanStack Query using thequeryParamsoption in query/mutate utilities
Use thesilent: trueoption to suppress global error notifications when custom error handling is needed
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types
Avoid explicitanytypes and maint...
Files:
tests/facility/overview/overview.spec.ts
**/*.{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:
tests/facility/overview/overview.spec.ts
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Use 2-space indentation
Files:
tests/facility/overview/overview.spec.tspublic/locale/en.json
**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
Use camelCase for utility file names (e.g.,
useAuth.ts)
Files:
tests/facility/overview/overview.spec.ts
**/*.spec.ts
📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
**/*.spec.ts: Write E2E tests in Playwright following https://playwright.dev/docs/writing-tests
Write meaningful test descriptions
Files:
tests/facility/overview/overview.spec.ts
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/04-ui-components.mdc)
**/*.{tsx,ts}: Use Shadcn UI components as the primary component library
Follow the component documentation for proper usage
Customize components using Tailwind CSS
UsenavigateanduseRedirectfrom raviger for navigation and redirects
Use Tailwind's responsive classes and follow mobile-first approach
Implement proper ARIA attributes for accessibility
Ensure keyboard navigation works in components
Define component props using TypeScript interfaces
Use translation keys fromsrc/Locale/for internationalization
Support RTL languages in components
Use proper date/time formatting for multiple language support
Files:
tests/facility/overview/overview.spec.ts
**/*.{ts,tsx,js,jsx,json,css,scss,html}
📄 CodeRabbit inference engine (AGENTS.md)
Use 2-space indentation
Files:
tests/facility/overview/overview.spec.tspublic/locale/en.json
public/locale/**/*.json
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use i18n Locale files with English Locale files in
public/locale/en.json- non-English languages managed via Crowdin only
Files:
public/locale/en.json
🧠 Learnings (16)
📓 Common learnings
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 10106
File: src/components/Facility/FacilityHome.tsx:236-247
Timestamp: 2025-01-23T02:20:55.489Z
Learning: In the facility management UI, the facility actions menu button should include an aria-label for accessibility, using the translation key "facility_menu".
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 10104
File: src/pages/FacilityOrganization/components/FacilityOrganizationSelector.tsx:118-118
Timestamp: 2025-02-04T07:18:45.806Z
Learning: The project uses flat translation keys in locale files (e.g., "select_department", "has_sub_departments") without nesting (e.g., "facility.organization.select_department").
📚 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 **/*.spec.ts : Write E2E tests in Playwright following https://playwright.dev/docs/writing-tests
Applied to files:
tests/facility/overview/overview.spec.ts
📚 Learning: 2024-11-18T10:46:56.270Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9145
File: cypress/e2e/facility_spec/FacilityHomepage.cy.ts:229-317
Timestamp: 2024-11-18T10:46:56.270Z
Learning: In `cypress/e2e/facility_spec/FacilityHomepage.cy.ts`, when verifying the bed capacity badge reflection, the badge remains the same during multiple actions and only updates after a bed is attached to a patient during consultation. Therefore, it's appropriate to keep the test case consolidated rather than splitting it into smaller tests.
Applied to files:
tests/facility/overview/overview.spec.ts
📚 Learning: 2025-01-09T05:37:17.120Z
Learnt from: nihal467
Repo: ohcnetwork/care_fe PR: 9846
File: cypress/pageObject/facility/FacilityCreation.ts:14-47
Timestamp: 2025-01-09T05:37:17.120Z
Learning: In the care_fe project's Cypress tests, facility test data is managed through the facilityData.ts utility which provides pre-validated data through the FacilityTestData interface, making additional validation in the FacilityCreation page object unnecessary.
Applied to files:
tests/facility/overview/overview.spec.ts
📚 Learning: 2024-11-18T10:44:30.303Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9145
File: cypress/e2e/facility_spec/FacilityCreation.cy.ts:177-180
Timestamp: 2024-11-18T10:44:30.303Z
Learning: In `cypress/e2e/facility_spec/FacilityCreation.cy.ts`, when testing bed and staff capacity individually for additional error verification, we prefer to use separate method calls to handle bed and staff capacity, rather than using `facilityPage.createNewFacility(testFacilityData)` which also handles bed management.
Applied to files:
tests/facility/overview/overview.spec.ts
📚 Learning: 2024-12-04T18:58:47.241Z
Learnt from: kihan2518B
Repo: ohcnetwork/care_fe PR: 8956
File: cypress/e2e/facility_spec/FacilityCreation.cy.ts:261-261
Timestamp: 2024-12-04T18:58:47.241Z
Learning: In `cypress/e2e/facility_spec/FacilityCreation.cy.ts`, the test case titled "Create a new facility with no bed and doctor capacity" includes steps to select bed types and specializations before validation. This is done intentionally to verify that error messages are shown properly when no capacity is specified.
Applied to files:
tests/facility/overview/overview.spec.ts
📚 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/**/*.{test,spec}.{ts,tsx} : Implement comprehensive testing in CAREUI components including accessibility and medical workflow scenarios
Applied to files:
tests/facility/overview/overview.spec.ts
📚 Learning: 2024-12-05T04:20:20.231Z
Learnt from: nihal467
Repo: ohcnetwork/care_fe PR: 9301
File: cypress/e2e/facility_spec/FacilityLocation.cy.ts:220-220
Timestamp: 2024-12-05T04:20:20.231Z
Learning: In `FacilityLocation.cy.ts`, ensure not to suggest adding success message verifications if they are already present in the test steps.
Applied to files:
tests/facility/overview/overview.spec.ts
📚 Learning: 2024-11-18T10:48:08.500Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9145
File: cypress/e2e/patient_spec/PatientConsultationCreation.cy.ts:93-94
Timestamp: 2024-11-18T10:48:08.500Z
Learning: In `cypress/e2e/patient_spec/PatientConsultationCreation.cy.ts`, bed capacity verification assertions after patient admission are already being performed elsewhere, so adding them here is unnecessary.
Applied to files:
tests/facility/overview/overview.spec.ts
📚 Learning: 2025-11-25T13:52:33.081Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/providers.instructions.md:0-0
Timestamp: 2025-11-25T13:52:33.081Z
Learning: Applies to src/Providers/**/*.{test,spec}.{ts,tsx} : Test provider state management and updates with comprehensive unit tests
Applied to files:
tests/facility/overview/overview.spec.ts
📚 Learning: 2025-11-25T13:52:33.081Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/providers.instructions.md:0-0
Timestamp: 2025-11-25T13:52:33.081Z
Learning: Applies to src/Providers/**/*.{test,spec}.{ts,tsx} : Validate audit logging and compliance features in provider tests
Applied to files:
tests/facility/overview/overview.spec.ts
📚 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 **/*.spec.ts : Write meaningful test descriptions
Applied to files:
tests/facility/overview/overview.spec.ts
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/FacilityContext.tsx : Implement Facility Context for department location and resource availability
Applied to files:
tests/facility/overview/overview.spec.ts
📚 Learning: 2025-11-20T09:48:26.486Z
Learnt from: yash-learner
Repo: ohcnetwork/care_fe PR: 14108
File: tests/facility/settings/activityDefinitions/activityDefinitionCreate.spec.ts:86-147
Timestamp: 2025-11-20T09:48:26.486Z
Learning: In tests/facility/settings/activityDefinitions/activityDefinitionCreate.spec.ts, detailed verification of selected values (e.g., code from value sets) in the detail view is intentionally deferred to the list spec, as the creation test focuses on the happy path and basic verification only.
Applied to files:
tests/facility/overview/overview.spec.ts
📚 Learning: 2025-01-15T04:16:14.978Z
Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 9956
File: src/pages/Patient/index.tsx:71-71
Timestamp: 2025-01-15T04:16:14.978Z
Learning: In this project, new translation strings must only be added to the English locale (en.json) through pull requests. Translations for other languages (ta.json, mr.json, ml.json, hi.json, kn.json, etc.) are managed through Crowdin (https://crowdin.com/project/ohccarefe) and should not be modified directly in PRs.
Applied to files:
public/locale/en.json
📚 Learning: 2025-01-15T04:16:14.978Z
Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 9956
File: src/pages/Patient/index.tsx:71-71
Timestamp: 2025-01-15T04:16:14.978Z
Learning: In this project, translations are only added to the English locale (en.json) through pull requests. Other locale files are managed through Crowdin and should not be modified directly in PRs.
Applied to files:
public/locale/en.json
🧬 Code graph analysis (1)
tests/facility/overview/overview.spec.ts (1)
tests/support/facilityId.ts (1)
getFacilityId(12-43)
⏰ 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). (1)
- GitHub Check: Test
🔇 Additional comments (1)
public/locale/en.json (1)
643-643: Newanalyticsandquick_linkslabels look consistentBoth
"analytics": "Analytics"and"quick_links": "Quick Links"follow existing naming and casing conventions (e.g.,quick_actions,overview), and are flat keys as expected. No changes needed here.Also applies to: 4148-4148
| const { canViewAppointments, canListEncounters } = getPermissions( | ||
| hasPermission, | ||
| facilityData?.permissions ?? [], | ||
| ); |
There was a problem hiding this comment.
The destructured property 'canViewAppointments' is inconsistent with the original property name 'canViewSchedule'. If this represents a semantic change from schedules to appointments, ensure the getPermissions function has been updated to return 'canViewAppointments'. Otherwise, this should remain 'canViewSchedule' to match the actual permission being checked.
| const { canViewAppointments, canListEncounters } = getPermissions( | |
| hasPermission, | |
| facilityData?.permissions ?? [], | |
| ); | |
| const { canViewSchedule: canViewAppointments, canListEncounters } = | |
| getPermissions(hasPermission, facilityData?.permissions ?? []); |
| <div className="relative border-3 border-white overflow-hidden text-gray-900 rounded-xl bg-[linear-gradient(to_right,#F9FAFB_0%,#F0F0E6_60%)] sm:bg-[linear-gradient(to_right,#F9FAFB_0%, #F9FAFB_70%, #F0F0E6_100%)] lg:bg-[linear-gradient(to_right,#F5F8FF_0%,#F9FAFB_50%,#F0F0E6_100%)]"> | ||
| <div | ||
| className="absolute w-full h-full bg-right bg-no-repeat bg-contain rounded-lg mix-blend-darken -right-8 md:right-0" | ||
| style={{ backgroundImage: "url('/images/home-banner-icon.webp')" }} |
There was a problem hiding this comment.
Background image paths are hardcoded inline. Consider defining these as constants at the top of the file or in a configuration object for easier maintenance and reusability.
| /> | ||
| <div | ||
| className="absolute left-0 w-full h-full bg-left bg-no-repeat bg-contain mix-blend-darken" | ||
| style={{ backgroundImage: "url('/images/home-banner-sun.png')" }} |
There was a problem hiding this comment.
Background image paths are hardcoded inline. Consider defining these as constants at the top of the file or in a configuration object for easier maintenance and reusability.
| /> | ||
|
|
||
| <div className="relative z-10 p-4 md:p-8 max-w-[250px] md:max-w-[280px] lg:max-w-lg"> | ||
| <h1 className="mb-2 font-bold text-gray-900 text-2xl wrap-break-word"> |
There was a problem hiding this comment.
The CSS class 'wrap-break-word' appears to be non-standard. This should likely be 'break-words' (the standard Tailwind CSS utility class for word breaking).
| <h1 className="mb-2 font-bold text-gray-900 text-2xl wrap-break-word"> | |
| <h1 className="mb-2 font-bold text-gray-900 text-2xl break-words"> |
3 participants
Proposed Changes
Fixes #14322
Tagging: @ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Improvements
Localization
Tests
✏️ Tip: You can customize this high-level summary in your review settings.