Pinia Stores

State is managed with Pinia (pinia@^2.1.7) and the pinia-plugin-persistedstate plugin.

All stores live in apps/frontend/src/store/.

---

authStore — User Session

File: store/authStore.js
Store ID: 'auth'
Persisted: ✅ (survives page reload)

State

Field	Type	Description
user_details	Object | null	Full user object from the API
isAuthenticated	boolean	Whether the user is currently signed in

Actions

Method	Description
setUserDetails(details)	Sets user_details and isAuthenticated: true
getUserDetails()	Returns user_details
logout()	Clears user_details, sets isAuthenticated: false
checkAuth()	Returns isAuthenticated

Usage

import { useAuthStore } from '@/store/authStore'

const auth = useAuthStore()

// After sign-in API call:
auth.setUserDetails(response.user_details)

// In components:
const user = auth.getUserDetails()
const isAdmin = user?.type === 'admin'

// On logout:
auth.logout()
router.push({ name: 'signin' })

Persistence

authStore is persisted via pinia-plugin-persistedstate to localStorage. The user remains signed in across browser refreshes until they explicitly log out or the JWT cookie expires.

---

menuStore — Sidebar Menu

File: store/menuStore.ts
Store ID: 'menu'
Persisted: ❌

State

Field	Type	Description
isMenuExpanded	boolean	Whether the sidebar is currently expanded

Actions

Method	Description
toggleMenu()	Toggles isMenuExpanded; adds/removes a global click listener
closeMenu()	Sets isMenuExpanded: false; removes click listener
handleOutsideClick(e)	Closes menu if click target is outside #layout-menu

Click-Outside Behaviour

When the menu is opened via toggleMenu(), a click listener is added to the document. If the next click lands outside #layout-menu, it calls closeMenu() automatically (mobile-friendly pattern).

---

themeStore — Theme Colors

File: store/theme.ts
Store ID: 'theme'
Persisted: ❌ (reads/writes localStorage directly)

State

Field	Type	Description
primary	string	Primary color hex
success	string	Success color hex
warning	string	Warning color hex
danger	string	Danger/error color hex
info	string	Info color hex
headerBgColor	string	Header background (default #242f42)
headerTextColor	string	Header text color (default #fff)

Actions

Method	Description
initTheme()	Reads stored hex values from localStorage; applies CSS vars
setPropertyColor(color, type)	Sets --el-color-{type} + generated light/dark variants
setHeaderBgColor(color)	Updates header CSS var + localStorage
setHeaderTextColor(color)	Updates header text CSS var + localStorage
resetTheme()	Restores all colors to their defaults

Colors are applied directly as CSS custom properties on document.documentElement, making them available to all Element Plus components that respect --el-color-*.

---

tabsStore — Tab Navigation

File: store/tabs.ts
Store ID: 'tabs'
Persisted: ❌

Manages the open-tabs navigation bar displayed in the Home layout.

State

state: { list: ListItem[] }
// ListItem: { name: string, path: string, title: string }

Getters

Getter	Description
show	Whether to show the tab bar (list.length > 0)
nameList	Array of route names in open tabs

Actions

Method	Description
setTabsItem(item)	Add a tab (if not already open)
delTabsItem(item)	Remove a specific tab
clearTabs()	Close all tabs
closeTabsOther(item)	Close all except the specified tab
closeCurrentTag(route, router)	Close current tab and navigate to last open

---

sidebarStore — Sidebar Appearance

File: store/sidebar.ts
Store ID: 'sidebar'
Persisted: ❌ (reads/writes localStorage directly)

State

Field	Type	Default	Description
collapse	boolean	false	Whether sidebar is collapsed
bgColor	string	'#324157'	Sidebar background color
textColor	string	'#bfcbd9'	Sidebar text/icon color

Actions

Method	Description
handleCollapse()	Toggles collapse state
setBgColor(color)	Updates bgColor + saves to localStorage
setTextColor(color)	Updates textColor + saves to localStorage

Colors are restored from localStorage on component mount (initTheme pattern).