Components

Reusable UI components live in apps/frontend/src/components/.

---

Layout Components

header.vue

The top navigation bar rendered inside home.vue.

Features:

• Application logo / title
• Hamburger button for toggling sidebar collapse (sidebarStore.handleCollapse())
• Breadcrumb navigation
• User dropdown menu: profile link + logout
• Logout calls POST /api/v1/user/logout, clears authStore, redirects to /signin

sidebar.vue

The left navigation menu rendered inside home.vue.

Features:

• Collapsible (respects sidebarStore.collapse)
• Menu items grouped by section (Dashboard, Monitoring, Settings, Admin)
• Active item highlighted using vue-router's active class
• Background + text colors driven by sidebarStore.bgColor / sidebarStore.textColor
• Admin section shown only if authStore.user_details?.type === 'admin'

tabs.vue

An open-tabs navigation bar displayed below the header when multiple pages are open.

Features:

• Renders one tab per entry in tabsStore.list
• Click tab → navigate to that route
• Close button on each tab (tabsStore.delTabsItem)
• Right-click context menu: Close Others, Close All

navBar.vue

Alternative navigation bar variant. Used in specific layout contexts.

settingsMenu.vue

Settings sub-navigation component rendered inside the settings-related views. Provides links to:

• Profile
• Notification Settings
• Recipient Settings
• Device Settings
• Storage Settings

---

Auth Components

signUpAndSignInHeader.vue

Branded header used exclusively on the SignUpAndSignIn layout. Displays the company logo and name.

---

Utility Components

countup.vue

Animated count-up number component. Used on the dashboard for displaying total counts (devices, alerts, units) with a smooth counting animation.

Props:

Prop	Type	Default	Description
endVal	number	0	Target value to count up to
duration	number	1500	Animation duration in milliseconds
prefix	string	''	Text before the number
suffix	string	''	Text after the number
decimals	number	0	Number of decimal places

---

Page-Specific Sub-Components

components/pages/ contains sub-components used within specific view pages. These are not globally reused but are split out to keep view files manageable.

---

Element Plus Components (Auto-Imported)

The following Element Plus components are commonly used throughout the app via auto-import — no import statements required:

Component	Usage
el-card	Page section containers
el-form	Forms with built-in validation
el-form-item	Labelled form fields
el-input	Text inputs
el-select	Dropdown selects
el-date-picker	Date & range picker
el-table	Data tables with pagination
el-button	Buttons
el-dialog	Modal dialogs
el-tag	Status / alert badges
el-switch	Toggle switches
el-pagination	Pagination controls
el-loading	Loading overlay directive
el-notification	Toast notifications (via composables)

---

Global CSS Classes (App.vue)

These utility classes are defined in the root App.vue and are available globally:

Class	Description
.btn-primary	Styled primary action button
.color-good	Green text (value within safe range)
.color-bad	Red text (value outside safe range)
.fill-good	Green background fill
.fill-bad	Red background fill
.bg-good	Light green background
.bg-bad	Light red background
.bg-between	Yellow/amber background (borderline)