Skip to content

Add IoT integration dashboard UI#344

Open
Adeolu01 wants to merge 1 commit into
SwiftChainn:mainfrom
Adeolu01:feat/product-iot-dashboard
Open

Add IoT integration dashboard UI#344
Adeolu01 wants to merge 1 commit into
SwiftChainn:mainfrom
Adeolu01:feat/product-iot-dashboard

Conversation

@Adeolu01

Copy link
Copy Markdown

Summary

Implements the IoT integration dashboard interface (Live Fleet Stream) with metric cards, charts, and telemetry visualization, following the project's Component -> Hook -> Service architecture.

  • Live Fleet Stream banner with an animated live indicator
  • Highlight cards for Cold Chain Integrity (current temperature, compliance rate) and Shock Monitoring (current G-force, impact event count)
  • Four-column metrics section: Temperature, Humidity, GPS Signal, Battery Level
  • Two Recharts visualizations: a temperature/humidity area+line chart over time, and a bar chart of shock events by G-force
  • Charts are wrapped with role="img" and descriptive aria-label/sr-only trend summaries for screen reader accessibility

Architecture

  • Service: services/iotDashboardService.ts - getIoTDashboardData(), axios-based, follows the existing faqService.ts pattern
  • Hook: hooks/useIoTDashboard.ts - useQuery wrapper with a 10s refetchInterval to simulate a live stream
  • Component: components/product/IoTDashboard.tsx - consumes useIoTDashboard() only, no inline mock data; renders a skeleton while loading and an alert on error

Integration

  • New route at app/product/iot-dashboard/page.tsx rendering IoTDashboard
  • Does not touch the existing, unrelated components/fleet/ (driver location) feature

Testing

  • npx tsc --noEmit: no errors in files touched by this change (pre-existing unrelated errors elsewhere in the repo are untouched)
  • npx eslint on the changed files: 0 errors, 0 warnings
  • Manually verified chart rendering, loading skeleton, and responsive grid at mobile/tablet/desktop widths

Notes

  • Backend endpoint /api/iot/dashboard is assumed per the issue spec. Until it exists, the page shows its loading/error state.

closes #310

Implements the Live Fleet Stream product showcase (issue SwiftChainn#310): cold
chain integrity and shock monitoring highlight cards, a four-metric
telemetry grid (temperature, humidity, GPS signal, battery), and
Recharts area/line and bar charts for temperature-humidity trends and
shock events. Follows the repo's service/hook/component layering
(iotDashboardService -> useIoTDashboard -> IoTDashboard), polling every
10s to simulate a live stream, with a skeleton loading state and
accessible chart summaries for screen readers. Exposed at
/product/iot-dashboard.
@drips-wave

drips-wave Bot commented Jul 26, 2026

Copy link
Copy Markdown

@Adeolu01 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Frontend: IoT Integration Dashboard UI

1 participant