Views

All page-level components live in apps/frontend/src/views/. They are lazy-loaded via dynamic imports in the router. Every authenticated view is rendered inside views/home.vue which provides the sidebar + header shell.

---

Authentication Views

signin.vue

The login page. Renders an email + password form with Element Plus validation. On success, calls authStore.setUserDetails() and navigates to /dashboard.

API: POST /api/v1/auth/signin

signup.vue

New account registration form. Fields: full_name, email, password, confirm_password.

API: POST /api/v1/auth/signup

signUpAndSignIn.vue

Shared layout wrapper for authentication pages. Renders the branded header and a centered card container.

---

Layout Shell

home.vue

The authenticated application shell. Contains:

• <components/sidebar.vue> — left navigation
• <components/header.vue> — top bar with user menu
• <components/tabs.vue> — open-tabs navigation bar
• <router-view> — active page content

Uses sidebarStore for collapse state and themeStore for sidebar/header colors.

---

User Views

dashboard.vue

Main landing page after login.

• Overview cards: total units, active alerts, online devices
• ECharts graphs: temperature/humidity trends per unit
• Quick statistics using the countup.vue component for animated numbers

API: GET /api/v1/unit/ + GET /api/v1/device/

---

live-alerts.vue

Displays all units that currently have at least one active threshold breach.

Each alert card shows:

• Unit name
• Alert type (e.g. HIGH_TEMP)
• Breach start time
• Current value vs. threshold

API: GET /api/v1/unit/live-alerts

---

current-conditions.vue

Shows the most recent sensor reading for every unit. Intended as a real-time snapshot page.

Fields per unit: temperature, humidity, voltage, last communicated time.

API: GET /api/v1/unit/

---

reports.vue

Allows users to download historical sensor data for a selected unit and date range.

• Unit selector dropdown
• Date range picker (Element Plus el-date-picker component)
• Format selector: CSV or PDF
• Download button triggers a GET /api/v1/report/download with query params and initiates a file download

API: GET /api/v1/report/download

---

notification-settings.vue

Configure alert thresholds per unit. For each unit:

• Edit min/max_temperature, min/max_humidity, min/max_volt
• Toggle email_alert and sms_alert
• Assign email/SMS recipients from the recipients list

API: GET /api/v1/unit/ + PATCH /api/v1/unit/ + PATCH /api/v1/unit/recipient

---

recipient-settings.vue

Manage notification recipients (email/SMS contacts).

• Table of existing active recipients
• Add/Edit modal with fields: name, email, phone
• Delete with confirmation dialog (soft-delete in backend)

API: GET /api/v1/recipient/ + POST /api/v1/recipient/ + PATCH /api/v1/recipient/:id + DELETE /api/v1/recipient/:id

---

device-settings.vue

Edit device display names and sensor configurations.

• Table of all user's devices
• Inline editable name fields
• Sensor config modal (advanced calibration settings per sensor)

API: GET /api/v1/device/ + PATCH /api/v1/device/ + PATCH /api/v1/device/:id/sensor-config

---

profile.vue

User profile editor.

• Fields: full_name, email, phone, organization, address, language
• Separate section for password change (requires current password)

API: GET /api/v1/user/profile + PUT /api/v1/user/profile + POST /api/v1/user/update-password

---

settings.vue

General application settings. Delegates to components/settingsMenu.vue for sub-navigation between:

• Notification settings
• Storage settings
• Profile

---

storage-settings.vue

Data retention and storage preferences (unit-level).

---

Admin Views

Admin views are only accessible to users with type === 'admin'. They use adminAuthCheck on the backend.

admin/devices.vue

Full device management for admins:

• List all devices (assigned + unassigned) with search and filters
• Create new devices (single or bulk)
• Assign devices to a user (select user + select devices)
• Remove device from user
• Batch settings update

API: GET /api/v1/admin/devices/ + POST /api/v1/admin/devices/ + POST /api/v1/admin/devices/users + DELETE /api/v1/admin/devices/users

---

admin/users.vue

List all registered users with device count. Click to view their units or devices.

API: GET /api/v1/admin/users/

---

admin/sensorData.vue

View paginated sensor data records for a selected device. Includes timestamp, temperature, humidity, volt columns.

API: GET /api/v1/admin/devices/:device_id/sensor-data

---

admin/diagnosticData.vue

View firmware diagnostic information (OS/SW/HW versions + device logs) for a selected device.

API: GET /api/v1/admin/devices/:device_id/diagnostic-data

---

admin/rawSensorData.vue

View raw IoT payload records for a device.

API: GET /api/v1/admin/devices/:device_id/raw-sensor-data

---

admin/deviceLogs.vue

Audit trail of device assignment and removal events.

API: GET /api/v1/admin/devices/logs

---

Error Pages

newPages/404.vue

Custom 404 page rendered when no route matches. Includes a "Go to Dashboard" button.