first commit, i i have no idea what i have done

management-ui/src/lib/api.ts

@@ -0,0 +1,28 @@
+import axios from 'axios'
+import { auth } from './auth'
+
+export const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL || '/api',
+  timeout: 10_000,
+  headers: { 'Content-Type': 'application/json' },
+  // withCredentials: false // bearer tokens don't need cookies
+})
+
+api.interceptors.request.use((config) => {
+  const t = auth.token.value
+  if (t) config.headers.Authorization = `Bearer ${t}`
+  return config
+})
+
+api.interceptors.response.use(
+  (res) => res,
+  (err) => {
+    if (err?.response?.status === 401) {
+      auth.clear()
+      if (window.location.pathname !== '/login') {
+        window.location.href = '/login'
+      }
+    }
+    return Promise.reject(err)
+  }
+)

management-ui/src/lib/auth.ts

@@ -0,0 +1,61 @@
+import { ref, computed } from 'vue'
+
+export type JwtPayload = {
+  sub?: string
+  exp?: number
+  iat?: number
+  role?: string | string[]
+  roles?: string[]
+  scope?: string
+  [k: string]: unknown
+}
+
+function decodeJwt(token: string): JwtPayload | null {
+  try {
+    const [, payload] = token.split('.')
+    if (!payload) return null
+    // URL-safe Base64 → Base64
+    const base64 = payload.replace(/-/g, '+').replace(/_/g, '/')
+    const json = decodeURIComponent(
+      atob(base64)
+        .split('')
+        .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+        .join('')
+    )
+    return JSON.parse(json)
+  } catch {
+    return null
+  }
+}
+
+const token = ref<string | null>(sessionStorage.getItem('accessToken'))
+const payload = ref<JwtPayload | null>(token.value ? decodeJwt(token.value) : null)
+
+const isAuthenticated = computed(() => {
+  if (!token.value) return false
+  const exp = payload.value?.exp
+  return !exp || exp * 1000 > Date.now()
+})
+
+const roles = computed<string[]>(() => {
+  const p = payload.value
+  if (!p) return []
+  if (Array.isArray(p.roles)) return p.roles
+  if (typeof p.role === 'string') return [p.role]
+  if (typeof p.scope === 'string') return p.scope.split(' ') // e.g., "admin user"
+  return []
+})
+
+function setToken(t: string) {
+  token.value = t
+  payload.value = decodeJwt(t)
+  sessionStorage.setItem('accessToken', t)
+}
+
+function clear() {
+  token.value = null
+  payload.value = null
+  sessionStorage.removeItem('accessToken')
+}
+
+export const auth = { token, payload, roles, isAuthenticated, setToken, clear }

management-ui/src/lib/interfaces.ts

@@ -0,0 +1,11 @@
+export interface Device {
+  guid: string
+  devicename: string
+  assigned_users: string
+}
+
+export interface Users {
+    id: number,
+    username: string,
+    role: string
+}

management-ui/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}