feat: Implement appointment notification bell in sidebar

[suhaan-24]

• Added AppointmentNotificationBell component with appointment count badge
• Integrated bell into AppSidebar footer (centered)
• Added appointments.list API integration with silent mode
• Added necessary translations
• Fixes Notification bell with numbers for appointments #11568

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

  • Added an appointment notification bell in the sidebar showing today’s scheduled appointments with a pulsing icon while loading, a capped badge count (99+), contextual tooltip text, and one-click navigation to the appointments page.

• Localization

  • Added English strings for appointment notifications, today’s appointment count, and “no appointments today.”

[github-actions]

⚠️ Merge Checklist Incomplete

Thank you for your contribution! To help us review your PR efficiently, please complete the merge checklist in your PR description.

Your PR will be reviewed once you have marked the appropriate checklist items.

To update the checklist:

• Change - [ ] to - [x] for completed items
• Only check items that are relevant to your PR
• Leave items unchecked if they don't apply

The checklist helps ensure code quality, testing coverage, and documentation are properly addressed.

[coderabbitai]

Walkthrough

Adds an appointment notification bell component to the sidebar (shows today's appointment count), adds three localization keys, updates REACT_CARE_API_URL in .env, and corrects ExcalidrawElement type import paths in three source files.

Changes

Cohort / File(s)	Summary
Configuration & Localization ./.env, public/locale/en.json	Updated REACT_CARE_API_URL value to http://localhost:9000. Added localization keys appointments_notification, appointments_today_count, and no_appointments_today in public/locale/en.json.
ExcalidrawElement Import Updates src/components/Common/Drawings/ExcalidrawEditor.tsx, src/components/Files/DrawingSubTab.tsx, src/types/metaArtifact/metaArtifact.ts	Corrected import path for the ExcalidrawElement type from @excalidraw/excalidraw/dist/types/element/src/types to @excalidraw/excalidraw/dist/types/excalidraw/element/types. No behavioral changes.
Appointment Notification Feature src/components/ui/sidebar/AppointmentNotificationBell.tsx	Added exported AppointmentNotificationBell component that queries today's booked appointment count (React Query), displays a bell with a capped badge (99+), shows loading pulse and tooltip, links to /facility/{facilityId}/appointments, refetches every 60s, stale time 30s, no retry.
Sidebar Integration src/components/ui/sidebar/app-sidebar.tsx	Imported and conditionally renders AppointmentNotificationBell in SidebarFooter when facilityId exists and not in patient-sidebar mode.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR includes minor out-of-scope changes: updating Excalidraw import paths and changing the API endpoint in .env, which are unrelated to the notification bell feature.	Remove or move the Excalidraw import path updates and .env API endpoint change to separate PRs focused on those specific concerns.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and concisely summarizes the main change: implementing an appointment notification bell component in the sidebar.
Linked Issues check	✅ Passed	The PR successfully implements a notification bell displaying appointment counts [#11568], meeting the core objective of providing users visibility into scheduled appointments.
Description check	✅ Passed	PR description follows the template structure with proposed changes, issue reference, tagging, and a completed merge checklist.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

• ✨ 136.113.208.247/32 (new)
• 34.170.211.100/32
• 35.222.179.152/32

Failure to add the new IP will result in interrupted reviews.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

🚀 Preview Deployment Ready!

🔗 Preview URL: https://pr-15247.care-preview-a7w.pages.dev

📱 Mobile Access:
Scan the QR code below to open the preview on your mobile device.

---

This preview will be automatically updated when you push new commits to this PR.

[coderabbitai]

Actionable comments posted: 4

🤖 Fix all issues with AI agents

In @.env:
- Around line 11-13: Update the tracked REACT_CARE_API_URL in .env to the
production fallback (use https://careapi.ohc.network as in .example.env) and
remove the localhost value; then create a local-only .env.local containing
REACT_CARE_API_URL=http://127.0.0.1:9000 for development. Keep
REACT_SBOM_BASE_URL unchanged in the shared .env. Ensure .env.local is listed in
.gitignore so local overrides are not committed.

In `@public/locale/en.json`:
- Around line 682-685: Replace the non-pluralized key appointments_today_count
that uses "(s)" with proper pluralization — either convert it to an ICU plural
string or create separate keys (e.g., appointments_today_count_one and
appointments_today_count_other) and use the existing pattern used by
appointments_scheduled_for_day_link_one/other; then update the call site that
reads appointments_today_count to pass the count and select the correct plural
key or use ICU plural formatting so screen readers and translations get correct
singular/plural forms.

In `@src/components/ui/sidebar/AppointmentNotificationBell.tsx`:
- Around line 15-17: Reorder the imports so third-party modules come first: move
the useQuery import from "@tanstack/react-query" into the third-party group
above the internal/aliased imports (scheduleApi and query); update the import
ordering around the symbols useQuery, scheduleApi, and query so linter/style
rules for import groups are satisfied.
- Around line 29-30: The current computation of today uses UTC via toISOString()
which can produce the wrong local date; update AppointmentNotificationBell.tsx
to compute the local date using date-fns (e.g. import format from 'date-fns' and
set the today variable with format(new Date(), 'yyyy-MM-dd')) so the component
uses the user’s local date; ensure you add the date-fns import at the top and
replace the existing today assignment that references toISOString().

[abhi-battula]

Hi @suhaan-24 ,
please refrain from opening a PR until the issue is assigned. Thanks.

[suhaan-24]

I am Sorry @abhi-battula. I will look upto it

[abhi-battula]

I am Sorry @abhi-battula. I will look upto it

No worries, thanks for understanding. And no need to call me sir 🙂

[adarsh-priydarshi-5646]

@suhaan-24 Kindly ensure that an issue is assigned to you before creating a PR. PRs without assigned issues will be treated as spam.

[suhaan-24]

I am sorry @adarsh-priydarshi-5646 , I am new to open source, This won't be repeated