Redesign Bed Capacity Cards

[Ashesh3]

Fixes #6620
This pull request includes a redesign of the bed capacity cards in the FacilityBedCapacity component. The changes include adding a reverse-spin animation and adjusting the layout of the cards.

Referenced Figma Design

Design in the PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
care-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 2, 2024 3:36pm

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	f7e878a
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/65942d440a6f8800084fa4ec
😎 Deploy Preview	https://deploy-preview-6925--care-egov-staging.netlify.app/
📱 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 site configuration.

[cypress]

1 failed test on run #1812 ↗︎

1

94

0

0

0

Details:

Redesign Bed Capacity Cards
Project: CARE	Commit: f7e878a393
Status: Failed	Duration: 02:38 💡
Started: Jan 2, 2024 3:39 PM	Ended: Jan 2, 2024 3:41 PM

  cypress/e2e/patient_spec/patient_crud.cy.ts • 1 failed test

View Output

Test		Artifacts
Patient Creation with consultation > Patient Detail verification post registration		Test Replay Screenshots

Review all test suite changes for PR #6925 ↗︎

[rithviknishad]

Could we also change this to use useQuery while we have anyways refactored the BedTypeCard component?

[Ashesh3]

Could we also change this to use useQuery while we have anyways refactored the BedTypeCard component?

Yep, that'll be good. I've made the changes.

[nihal467]

@Ashesh3 we should be thinking about a replacement for the refresh button

[github-actions]

👋 Hi, @Ashesh3,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

---

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

[nihal467]

@Ashesh3 i believe we discussed replacing the icon with the percentage of bed usage or something more value adding

[nihal467]

LGTM

[nihal467]

new Ui updated view, LGTM approved

[rithviknishad]

instead of request, useQuery has support for managing loading states and auto refetching, but this is fine for now since we have migrated away from redux in this PR and it works.

cc: @Ashesh3

[github-actions]

@Ashesh3 We truly appreciate your efforts. Thank you for taking the time to contribute; this is a very valuable contribution to us 🥇. We always welcome your contribution 🙂, so feel free to contribute to anything anytime, and never lose that spirit of innovation 🙌.