first init

fe/src/stores/auth.ts

@@ -0,0 +1,101 @@
+import { defineStore } from 'pinia'
+import { fetchCurrentUser, switchActiveRole } from '@/modules/auth/services/auth.service'
+import { fetchImpersonationStatus } from '@/modules/user/services/impersonate.service'
+import type { AuthRole, AuthUser } from '@/modules/auth/types/auth.types'
+
+interface AuthState {
+  user: AuthUser | null
+  activeRole: AuthRole | null
+  canSwitchRole: boolean
+  isImpersonating: boolean
+  loading: boolean
+}
+
+export const useAuthStore = defineStore('auth', {
+  state: (): AuthState => ({
+    user: null,
+    activeRole: null,
+    canSwitchRole: false,
+    isImpersonating: false,
+    loading: false,
+  }),
+
+  getters: {
+    userName: (state) => state.user?.name ?? '',
+    userActiveRole: (state) => state.activeRole?.name ?? '',
+    userPosition: (state) => state.user?.position ?? '',
+    userImageUrl: (state) => state.user?.image_url ?? null,
+    isAuthenticated: (state) => state.user !== null,
+    isAccountPending: (state) => state.user?.status === 'pending',
+    isAccountActive: (state) => state.user?.status === 'active',
+    roles: (state) => state.user?.roles ?? [],
+  },
+
+  actions: {
+    setSession(user: AuthUser, activeRole: AuthRole | null, canSwitchRole = false) {
+      this.user = user
+      this.activeRole = activeRole
+      this.canSwitchRole = canSwitchRole
+    },
+
+    applySession(payload: {
+      data: AuthUser
+      active_role: AuthRole | null
+      can_switch_role: boolean
+    }) {
+      this.user = payload.data
+      this.activeRole = payload.active_role
+      this.canSwitchRole = payload.can_switch_role
+    },
+
+    clearSession() {
+      this.user = null
+      this.activeRole = null
+      this.canSwitchRole = false
+      this.isImpersonating = false
+    },
+
+    async refreshImpersonationStatus() {
+      try {
+        const status = await fetchImpersonationStatus()
+        this.isImpersonating = status.is_impersonating
+      } catch {
+        this.isImpersonating = false
+      }
+    },
+
+    async fetchSession() {
+      this.loading = true
+
+      try {
+        const session = await fetchCurrentUser()
+        this.user = session.data
+        this.activeRole = session.active_role
+        this.canSwitchRole = session.can_switch_role
+        await this.refreshImpersonationStatus()
+      } catch {
+        this.clearSession()
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async switchRole(roleId: string) {
+      this.loading = true
+
+      try {
+        const res = await switchActiveRole(roleId)
+        this.user = res.data
+        this.activeRole = res.active_role
+        this.canSwitchRole = res.can_switch_role
+        return res
+      } finally {
+        this.loading = false
+      }
+    },
+
+    setUserProfile(user: AuthUser) {
+      this.user = user
+    },
+  },
+})

fe/src/stores/color-scheme.ts

@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+
+const colorSchemes = ['default', '1', '2', '3', '4', '5'] as const
+
+export type ColorSchemes = (typeof colorSchemes)[number]
+
+interface ColorSchemeState {
+  colorSchemeValue: ColorSchemes
+}
+
+const getColorScheme = () => {
+  const colorScheme = localStorage.getItem('colorScheme')
+  return (
+    colorSchemes.filter((item, key) => {
+      return item === colorScheme
+    })[0] ?? 'default'
+  )
+}
+
+export const useColorSchemeStore = defineStore('colorScheme', {
+  state: (): ColorSchemeState => ({
+    colorSchemeValue: localStorage.getItem('colorScheme') === null ? 'default' : getColorScheme(),
+  }),
+  getters: {
+    colorScheme(state) {
+      if (localStorage.getItem('colorScheme') === null) {
+        localStorage.setItem('colorScheme', 'default')
+      }
+
+      return state.colorSchemeValue
+    },
+  },
+  actions: {
+    setColorScheme(colorScheme: ColorSchemes) {
+      localStorage.setItem('colorScheme', colorScheme)
+      this.colorSchemeValue = colorScheme
+    },
+  },
+})

fe/src/stores/dark-mode.ts

@@ -0,0 +1,26 @@
+import { defineStore } from "pinia";
+
+interface DarkModeState {
+  darkModeValue: boolean;
+}
+
+export const useDarkModeStore = defineStore("darkMode", {
+  state: (): DarkModeState => ({
+    darkModeValue: localStorage.getItem("darkMode") === "true",
+  }),
+  getters: {
+    darkMode(state) {
+      if (localStorage.getItem("darkMode") === null) {
+        localStorage.setItem("darkMode", "false");
+      }
+
+      return state.darkModeValue;
+    },
+  },
+  actions: {
+    setDarkMode(darkMode: boolean) {
+      localStorage.setItem("darkMode", darkMode.toString());
+      this.darkModeValue = darkMode;
+    },
+  },
+});

fe/src/stores/theme.ts

@@ -0,0 +1,76 @@
+import { defineStore } from 'pinia'
+import EnigmaSideMenu from '@/themes/Enigma/SideMenu'
+
+export const themes = [
+  {
+    name: 'enigma',
+    layout: 'side-menu',
+    component: EnigmaSideMenu,
+  },
+] as const
+
+export type Themes = (typeof themes)[number]
+
+interface ThemeState {
+  themeValue: {
+    name: Themes['name']
+    layout: Themes['layout']
+  }
+}
+
+export const getTheme = (search?: { name: Themes['name']; layout: Themes['layout'] }) => {
+  const searchValues =
+    search === undefined
+      ? {
+        name: localStorage.getItem('theme'),
+        layout: localStorage.getItem('layout'),
+      }
+      : search
+  return (
+    themes.filter((item, key) => {
+      return item.name === searchValues.name && item.layout === searchValues.layout
+    })[0] || themes[0]
+  )
+}
+
+export const useThemeStore = defineStore('theme', {
+  state: (): ThemeState => ({
+    themeValue: {
+      name: localStorage.getItem('theme') === null ? themes[0].name : getTheme().name,
+      layout: localStorage.getItem('layout') === null ? themes[0].layout : getTheme().layout,
+    },
+  }),
+  getters: {
+    theme(state) {
+      if (localStorage.getItem('theme') === null) {
+        localStorage.setItem('theme', 'enigma')
+      }
+
+      if (localStorage.getItem('layout') === null) {
+        localStorage.setItem('layout', 'side-menu')
+      }
+
+      return state.themeValue
+    },
+  },
+  actions: {
+    // Theme
+    setTheme(theme: Themes['name']) {
+      this.themeValue = {
+        name: theme,
+        layout: this.themeValue.layout,
+      }
+
+      localStorage.setItem('theme', theme)
+    },
+    // Layout
+    setLayout(layout: Themes['layout']) {
+      this.themeValue = {
+        name: this.themeValue.name,
+        layout: layout,
+      }
+
+      localStorage.setItem('layout', layout)
+    },
+  },
+})