search

ohcnetwork / care_fe

Care is a Digital Public Good enabling TeleICU & Decentralised Administration of Healthcare Capacity across States.
https://care.ohc.network
MIT License
256 stars 449 forks source link

Consultation update page form UI updated #9074

Open modamaan opened 2 weeks ago

modamaan commented 2 weeks ago

Proposed Changes

Updated UI Screenshot 2024-11-10 070815

@ohcnetwork/care-fe-code-reviewers

Merge Checklist

Summary by CodeRabbit

Release Notes

These updates significantly enhance the user experience and improve the overall presentation of patient information.

coderabbitai[bot] commented 2 weeks ago

Walkthrough

The pull request introduces significant updates to several components in the application, particularly the DailyRoundListDetails component, which now employs a card-based layout for improved organization and visual hierarchy. New components such as Badge, Card, and Separator have been created to enhance the UI, and various health metrics are presented in a grid format with accompanying icons. The overall structure and design of the components have been refined for better readability and user experience.

Changes

File Change Summary
src/components/Patient/DailyRoundListDetails.tsx Refactored to use Card, CardHeader, and CardContent for layout; added icons and restructured health metrics display.
src/components/ui/badge.tsx Introduced Badge component with variants for different styles; exported BadgeProps and badgeVariants.
src/components/ui/card.tsx Added new card UI components: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter.
src/components/ui/separator.tsx Introduced Separator component for horizontal and vertical separation with customizable styles.
src/components/LogUpdate/CriticalCarePreview.tsx Updated layout to use grid and flexbox for various sections; improved organization of displayed details.
.eslintrc.json Modified ESLint rules to disable Prettier formatting and updated handling of unused variables.

Assessment against linked issues

Objective Addressed Explanation
Update the form UI on the Consultation Update page (#9067) ✅

Suggested labels

tested

Suggested reviewers

Poem

In the garden of code, we hop and play,
New cards and badges brighten the day.
With icons that dance and layouts that gleam,
Our UI's a wonder, a developer's dream!
So let’s celebrate with a joyful cheer,
For each little change brings us all near! 🐇✨

[!WARNING] There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 eslint (1.23.1) > If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.
src/components/LogUpdate/CriticalCarePreview.tsx Oops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.json': Cannot find module '@typescript-eslint/parser' Require stack: - /.eslintrc.json at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15) at Function.resolve (node:internal/modules/helpers:145:19) at Object.resolve (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2346:46) at ConfigArrayFactory._loadParser (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3325:39) at ConfigArrayFactory._normalizeObjectConfigDataBody (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3099:43) at _normalizeObjectConfigDataBody.next () at ConfigArrayFactory._normalizeObjectConfigData (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3040:20) at _normalizeObjectConfigData.next () at ConfigArrayFactory.loadInDirectory (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2886:28) at CascadingConfigArrayFactory._loadConfigInAncestors (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3871:46)

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
🪧 Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
netlify[bot] commented 2 weeks ago

Deploy Preview for care-ohc ready!

Name Link
Latest commit 1f276229126f1ed48b6ee3387889f231ff219f7a
Latest deploy log https://app.netlify.com/sites/care-ohc/deploys/674382204b66620008eb2176
Deploy Preview https://deploy-preview-9074--care-ohc.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

modamaan commented 2 weeks ago

Screenshot 2024-11-11 203615 @rithviknishad Do you want to update this component?

rithviknishad commented 2 weeks ago

Yup

rithviknishad commented 2 weeks ago

Do delete the old component too once done

modamaan commented 2 weeks ago

@rithviknishad https://github.com/user-attachments/assets/8e856e82-a938-4c07-9867-1cc4834674f5 Screenshot 2024-11-12 114306

nihal467 commented 1 week ago

@modamaan the build itself is failing, tag me for QA review once the PR is review