Initial commit: admin dashboard for GameNo.

Vue 3 + Vite dashboard with PrimeVue, i18n, and API integration for institution management.

src/stores/authStore.js

@@ -0,0 +1,84 @@
+// /src/stores/authStore.js
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import { authApi } from '@/api/authApi';
+import Cookies from 'js-cookie';
+import { usePermissionStore } from './permissionStore';
+
+export const useAuthStore = defineStore('auth', () => {
+  const accessToken = ref(localStorage.getItem('accessToken') || Cookies.get('accessToken') || '');
+  const refreshToken = ref(localStorage.getItem('refreshToken') || Cookies.get('refreshToken') || '');
+  const user = ref(JSON.parse(localStorage.getItem('user') || 'null'));
+
+  const isAuthenticated = computed(() => !!accessToken.value);
+
+  function setTokens(access, refresh) {
+    accessToken.value = access;
+    refreshToken.value = refresh;
+    if (access) {
+      localStorage.setItem('accessToken', access);
+      Cookies.set('accessToken', access);
+    } else {
+      localStorage.removeItem('accessToken');
+      Cookies.remove('accessToken');
+    }
+    if (refresh) {
+      localStorage.setItem('refreshToken', refresh);
+      Cookies.set('refreshToken', refresh);
+    } else {
+      localStorage.removeItem('refreshToken');
+      Cookies.remove('refreshToken');
+    }
+  }
+
+  function setUser(userData) {
+    user.value = userData;
+    if (userData) {
+      localStorage.setItem('user', JSON.stringify(userData));
+    } else {
+      localStorage.removeItem('user');
+    }
+  }
+
+  async function login(credentials) {
+    const response = await authApi.login(credentials);
+    const data = response.data || response;
+    
+    // Server response: accessToken, refreshToken, user, permissions / role
+    setTokens(data.accessToken, data.refreshToken);
+    setUser(data.user);
+
+    const permissionStore = usePermissionStore();
+    const perms = data.user?.role?.permissions || data.permissions || [];
+    const roleName = data.user?.role?.name || data.role || '';
+    permissionStore.setPermissions(perms, roleName);
+
+    return data;
+  }
+
+  async function logout() {
+    try {
+      if (refreshToken.value) {
+        await authApi.logout(refreshToken.value);
+      }
+    } catch (e) {
+      console.warn('Logout API error:', e);
+    } finally {
+      setTokens('', '');
+      setUser(null);
+      const permissionStore = usePermissionStore();
+      permissionStore.clearPermissions();
+    }
+  }
+
+  return {
+    accessToken,
+    refreshToken,
+    user,
+    isAuthenticated,
+    setTokens,
+    setUser,
+    login,
+    logout
+  };
+});

src/stores/permissionStore.js

@@ -0,0 +1,63 @@
+// /src/stores/permissionStore.js
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { authApi } from '@/api/authApi';
+
+export const usePermissionStore = defineStore('permission', () => {
+  const permissions = ref(JSON.parse(localStorage.getItem('permissions') || '[]'));
+  const roleName = ref(localStorage.getItem('roleName') || '');
+  const isLoaded = ref(permissions.value.length > 0);
+
+  function setPermissions(permsArray = [], role = '') {
+    permissions.value = Array.isArray(permsArray) ? permsArray : [];
+    roleName.value = role;
+    isLoaded.value = true;
+    localStorage.setItem('permissions', JSON.stringify(permissions.value));
+    localStorage.setItem('roleName', roleName.value);
+  }
+
+  function clearPermissions() {
+    permissions.value = [];
+    roleName.value = '';
+    isLoaded.value = false;
+    localStorage.removeItem('permissions');
+    localStorage.removeItem('roleName');
+  }
+
+  async function fetchPermissions() {
+    try {
+      const response = await authApi.getSelf();
+      const userData = response.data || response;
+      const perms = userData.role?.permissions || [];
+      const role = userData.role?.name || '';
+      setPermissions(perms, role);
+      return permissions.value;
+    } catch (err) {
+      console.error('Failed to fetch user permissions:', err);
+      clearPermissions();
+      throw err;
+    }
+  }
+
+  function hasPermission(perm) {
+    if (!perm) return true;
+    if (permissions.value.includes('*') || permissions.value.includes('admin:all')) return true;
+    return permissions.value.includes(perm);
+  }
+
+  function hasAnyPermission(permsArray) {
+    if (!Array.isArray(permsArray) || permsArray.length === 0) return true;
+    return permsArray.some(p => hasPermission(p));
+  }
+
+  return {
+    permissions,
+    roleName,
+    isLoaded,
+    setPermissions,
+    clearPermissions,
+    fetchPermissions,
+    hasPermission,
+    hasAnyPermission
+  };
+});

src/stores/themeStore.js

@@ -0,0 +1,35 @@
+// /src/stores/themeStore.js
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useThemeStore = defineStore('theme', () => {
+  const savedTheme = localStorage.getItem('theme');
+  const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const isDarkMode = ref(savedTheme ? savedTheme === 'dark' : prefersDark);
+
+  function applyTheme() {
+    const htmlEl = document.documentElement;
+    if (isDarkMode.value) {
+      htmlEl.classList.add('dark-mode', 'dark');
+      localStorage.setItem('theme', 'dark');
+    } else {
+      htmlEl.classList.remove('dark-mode', 'dark');
+      localStorage.setItem('theme', 'light');
+    }
+  }
+
+  function toggleTheme() {
+    isDarkMode.value = !isDarkMode.value;
+    applyTheme();
+  }
+
+  function initTheme() {
+    applyTheme();
+  }
+
+  return {
+    isDarkMode,
+    toggleTheme,
+    initTheme
+  };
+});

src/stores/uiStore.js

@@ -0,0 +1,30 @@
+// /src/stores/uiStore.js
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useUiStore = defineStore('ui', () => {
+  const isSidebarOpen = ref(true);
+  const isMobileSidebarOpen = ref(false);
+  const breadcrumbs = ref([]);
+
+  function toggleSidebar() {
+    isSidebarOpen.value = !isSidebarOpen.value;
+  }
+
+  function toggleMobileSidebar() {
+    isMobileSidebarOpen.value = !isMobileSidebarOpen.value;
+  }
+
+  function setBreadcrumbs(items) {
+    breadcrumbs.value = items;
+  }
+
+  return {
+    isSidebarOpen,
+    isMobileSidebarOpen,
+    breadcrumbs,
+    toggleSidebar,
+    toggleMobileSidebar,
+    setBreadcrumbs
+  };
+});