LL-350 add connected state to device card

[aematei]

PR Description

Added a connection status indicator to the device display on the dashboard. The indicator shows whether an IoT device is currently connected (green dot) or disconnected (red dot) as a read-only visual element at the top of the device card.

What type of PR is this? (check all applicable)

• 🔧 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🔨 Build
• 🔁 CI

Why is this PR important?

Users need to know at a glance whether their physical LED devices are currently connected to the system. This visual feedback is essential for IoT device management and helps users quickly identify connection issues without needing to interact with the device.

Related Tickets & Documents

LL-350

Screenshots

The connection status indicator appears at the top of the device card:

• 🟢 Green dot + "Connected" when device is online
• 🔴 Red dot + "Disconnected" when device is offline

How to test

1. Navigate to the dashboard page after logging in
2. Select a device from the dropdown
3. Observe the connection status indicator at the top of the device card
4. The status shows as "Disconnected" by default (devices need to implement heartbeat mechanism to show as connected)
5. Run npm test to verify all tests pass (10/10 tests passing)

Added to documentation?

• 📜 README.md (added .env.example)
• 📓 Github pages
• 📕 Confluence
• 🆕 Other (if so please list here)
• ❌ no documentation needed

Testing & CI Improvements

This PR includes several important test infrastructure fixes that were discovered and resolved during development:

Issues Fixed:

1. Missing Test Infrastructure: Branch was created before test infrastructure was merged to master. Resolved by merging master to bring in PR LL-354 Pull Request #12 test setup.

2. JWT Token Secret Missing: Tests were failing in CI with secretOrPrivateKey must have a value because TOKEN_SECRET wasn't set in test environment. Fixed by adding process.env.TOKEN_SECRET to tests/setup.ts.

3. Email Sending in Tests: Signup tests were attempting to send real emails via sendEmail(). Fixed by mocking @/app/helpers/mailer in test files.

4. Limited CI Output: Test failures weren't showing detailed error messages. Enhanced CI workflow with --reporters=default --reporters=jest-junit --verbose flags for better debugging.

5. MongoDB Teardown Warnings: Added force: true flag to MongoDB cleanup in tests/setup.ts to ensure clean shutdown.

[optional] Are there any post-deployment tasks we need to perform?

None required. The connected field already exists in the device schema and defaults to true for new devices. Future work will involve implementing a heartbeat mechanism for physical devices to update their connection status.

[optional] What gif best describes this PR?

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (master@6e598bc). Learn more about missing BASE report.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff            @@
##             master      #14   +/-   ##
=========================================
  Coverage          ?   33.60%           
=========================================
  Files             ?       14           
  Lines             ?      247           
  Branches          ?       47           
=========================================
  Hits              ?       83           
  Misses            ?      164           
  Partials          ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

This PR adds a visual connection status indicator to IoT device cards on the dashboard, enabling users to quickly identify whether their LED devices are currently connected to the system. The implementation includes proper type handling, test infrastructure improvements, and documentation updates.

• Added a connection status display with colored indicators (green for connected, red for disconnected) at the top of each device card
• Improved test setup with JWT token secrets and email mocking to enable proper test execution
• Added .env.example file to document required environment variables for new developers

Reviewed changes

Copilot reviewed 5 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
app/dashboard/page.tsx	Adds connection status UI with visual indicator and text, excludes connected field from editable values
tests/setup.ts	Adds TOKEN_SECRET environment variable for JWT signing in test environment
tests/account/account.api.test.ts	Mocks sendEmail helper to prevent actual email sending during tests
.env.example	Documents required environment variables (MongoDB URL, JWT secret, SMTP config, domain)
.gitignore	Changes pattern from .env* to .env to allow .env.example to be committed
.github/workflows/coverage.yml	Adds verbose and default reporters to test output for better CI visibility
package-lock.json	Automatic npm updates adding peer dependency flags to various packages

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.