Technical Task 2: Error & loading state integration across all admin pages

[mankiratt]

Technical Task 2: Error & Loading State Integration Across All HMI Admin Pages

Overview

This pull request introduces admin-page-state.js, a centralised reusable utility for managing loading and error states across all HMI admin dashboard pages, and integrates it across every page in the admin panel.

---

New File — admin-page-state.js

Created a shared utility using the IIFE pattern that exposes a factory function createAdminPageState(). Each page calls this once and gets back a clean API:

Method	Description
showLoading()	Displays the loading spinner
hideLoading()	Hides the loading spinner
showError(message)	Displays the error banner with a custom message
hideError()	Hides the error banner
resetPageState()	Hides both on page load

The dismiss button is automatically wired on creation — no manual listener needed on any page.

---

UI Components

Two polished UI components are included on every page:

Error Banner — bold red (#e03131) with left accent border, shadow, and fade-in animation. Displays a user-facing message when any API call fails.

Loading Spinner — Echo brand green (#2F6E4F / #26583f) with matching left accent border and shadow. Displays while any fetch is in-flight.

Both components use custom CSS added to styles.min.css and are consistent across all pages.

---

Pages Integrated

Live API pages — full error and loading handling wired

Page	API Endpoint	Errors Handled
dashboard.html	/cumulativeDonations	Timeout, network, bad status
admin-request.html	/api/requests, /api/requests/:id, /api/updateConservationStatus/:animal	All actions covered
donations.html	/donations	Timeout, network, bad status, content-type validation
admin-nodes.html	/iot/nodes	Graceful fallback to dummy data with banner message
alerts.html	/sensors/alerts	Via script.js and charts.js
reboot.html	/sensors/:id/reboot, /sensors/reboots/recent	All actions covered
sensor_health/settings.html	/sensors/__default__/settings	Load and save covered

Static/dummy data pages — ready for future API integration

resetPageState() is called on load so banners are hidden immediately. When these pages are connected to real APIs in future, error handling can be wired with no HTML changes needed.

• sensor-health.html
• notifications.html
• profile.html
• projects.html
• hmi-data-insights.html
• feedback.html
• add-project.html

---

Error Handling Coverage

For all live API pages, the following error types are handled and surface a user-facing message via the error banner:

• ✅ Request timeout — AbortController fires after per-page timeout
• ✅ Network failure — TypeError caught in catch block
• ✅ Bad HTTP status — res.ok checked before parsing
• ✅ Malformed JSON — res.json() inside try/catch
• ✅ Content-type validation — checked before parsing on donations.html
• ✅ Empty/unexpected data shape — handled with fallback rendering

---

Files Changed

New

• admin/js/admin-page-state.js

Modified

• admin/css/styles.min.css — added banner and spinner styles
• admin/dashboard.html
• admin/admin-request.html
• admin/donations.html
• admin/admin-nodes.html
• admin/sensor-health.html
• admin/notifications.html
• admin/profile.html
• admin/projects.html
• admin/hmi-data-insights.html
• admin/feedback.html
• admin/template.html
• admin/sensor_health/alerts.html
• admin/sensor_health/reboot.html
• admin/sensor_health/settings.html
• admin/sensor_health/add-project.html
• admin/sensor_health/script.js
• admin/sensor_health/charts.js

[mraula]

everything looks good