First commit

frontend/src/components/layout/AppHeader.vue

@@ -0,0 +1,259 @@
+<template>
+  <header class="sticky top-0 z-30 glass border-b border-gray-200/50 dark:border-dark-700/50">
+    <div class="flex items-center justify-between h-16 px-4 md:px-6">
+      <!-- Left: Mobile Menu Toggle + Page Title -->
+      <div class="flex items-center gap-4">
+        <button
+          @click="toggleMobileSidebar"
+          class="lg:hidden btn-ghost btn-icon"
+          aria-label="Toggle Menu"
+        >
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+          </svg>
+        </button>
+
+        <div class="hidden lg:block">
+          <h1 class="text-lg font-semibold text-gray-900 dark:text-white">
+            {{ pageTitle }}
+          </h1>
+          <p v-if="pageDescription" class="text-xs text-gray-500 dark:text-dark-400">
+            {{ pageDescription }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Right: Language + Subscriptions + Balance + User Dropdown -->
+      <div class="flex items-center gap-3">
+        <!-- Language Switcher -->
+        <LocaleSwitcher />
+
+        <!-- Subscription Progress (for users with active subscriptions) -->
+        <SubscriptionProgressMini v-if="user" />
+
+        <!-- Balance Display -->
+        <div v-if="user" class="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-xl bg-primary-50 dark:bg-primary-900/20">
+          <svg class="w-4 h-4 text-primary-600 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
+          </svg>
+          <span class="text-sm font-semibold text-primary-700 dark:text-primary-300">
+            ${{ user.balance?.toFixed(2) || '0.00' }}
+          </span>
+        </div>
+
+        <!-- User Dropdown -->
+        <div v-if="user" class="relative" ref="dropdownRef">
+          <button
+            @click="toggleDropdown"
+            class="flex items-center gap-2 p-1.5 rounded-xl hover:bg-gray-100 dark:hover:bg-dark-800 transition-colors"
+            aria-label="User Menu"
+          >
+            <div class="w-8 h-8 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 text-white flex items-center justify-center text-sm font-medium shadow-sm">
+              {{ userInitials }}
+            </div>
+            <div class="hidden md:block text-left">
+              <div class="text-sm font-medium text-gray-900 dark:text-white">
+                {{ displayName }}
+              </div>
+              <div class="text-xs text-gray-500 dark:text-dark-400 capitalize">
+                {{ user.role }}
+              </div>
+            </div>
+            <svg class="w-4 h-4 text-gray-400 hidden md:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+          </button>
+
+          <!-- Dropdown Menu -->
+          <transition name="dropdown">
+            <div
+              v-if="dropdownOpen"
+              class="dropdown right-0 mt-2 w-56"
+            >
+              <!-- User Info -->
+              <div class="px-4 py-3 border-b border-gray-100 dark:border-dark-700">
+                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ displayName }}</div>
+                <div class="text-xs text-gray-500 dark:text-dark-400">{{ user.email }}</div>
+              </div>
+
+              <!-- Balance (mobile only) -->
+              <div class="sm:hidden px-4 py-2 border-b border-gray-100 dark:border-dark-700">
+                <div class="text-xs text-gray-500 dark:text-dark-400">{{ t('common.balance') }}</div>
+                <div class="text-sm font-semibold text-primary-600 dark:text-primary-400">
+                  ${{ user.balance?.toFixed(2) || '0.00' }}
+                </div>
+              </div>
+
+              <div class="py-1">
+                <router-link
+                  to="/profile"
+                  @click="closeDropdown"
+                  class="dropdown-item"
+                >
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+                  </svg>
+                  {{ t('nav.profile') }}
+                </router-link>
+
+                <router-link
+                  to="/keys"
+                  @click="closeDropdown"
+                  class="dropdown-item"
+                >
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
+                  </svg>
+                  {{ t('nav.apiKeys') }}
+                </router-link>
+
+                <a
+                  href="https://github.com/fangyuan99/sub2api"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  @click="closeDropdown"
+                  class="dropdown-item"
+                >
+                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
+                  </svg>
+                  {{ t('nav.github') }}
+                </a>
+              </div>
+
+              <!-- Contact Support (only show if configured) -->
+              <div v-if="contactInfo" class="border-t border-gray-100 dark:border-dark-700 px-4 py-2.5">
+                <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+                  <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
+                  </svg>
+                  <span>{{ t('common.contactSupport') }}:</span>
+                  <span class="font-medium text-gray-700 dark:text-gray-300">{{ contactInfo }}</span>
+                </div>
+              </div>
+
+              <div class="border-t border-gray-100 dark:border-dark-700 py-1">
+                <button
+                  @click="handleLogout"
+                  class="dropdown-item w-full text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
+                >
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
+                  </svg>
+                  {{ t('nav.logout') }}
+                </button>
+              </div>
+            </div>
+          </transition>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAppStore, useAuthStore } from '@/stores';
+import { authAPI } from '@/api';
+import LocaleSwitcher from '@/components/common/LocaleSwitcher.vue';
+import SubscriptionProgressMini from '@/components/common/SubscriptionProgressMini.vue';
+
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+const appStore = useAppStore();
+const authStore = useAuthStore();
+
+const user = computed(() => authStore.user);
+const dropdownOpen = ref(false);
+const dropdownRef = ref<HTMLElement | null>(null);
+const contactInfo = ref('');
+
+const userInitials = computed(() => {
+  if (!user.value) return '';
+  // Prefer username, fallback to email
+  if (user.value.username) {
+    return user.value.username.substring(0, 2).toUpperCase();
+  }
+  if (user.value.email) {
+    // Get the part before @ and take first 2 chars
+    const localPart = user.value.email.split('@')[0];
+    return localPart.substring(0, 2).toUpperCase();
+  }
+  return '';
+});
+
+const displayName = computed(() => {
+  if (!user.value) return '';
+  return user.value.username || user.value.email?.split('@')[0] || '';
+});
+
+const pageTitle = computed(() => {
+  const titleKey = route.meta.titleKey as string;
+  if (titleKey) {
+    return t(titleKey);
+  }
+  return (route.meta.title as string) || '';
+});
+
+const pageDescription = computed(() => {
+  const descKey = route.meta.descriptionKey as string;
+  if (descKey) {
+    return t(descKey);
+  }
+  return (route.meta.description as string) || '';
+});
+
+function toggleMobileSidebar() {
+  appStore.toggleSidebar();
+}
+
+function toggleDropdown() {
+  dropdownOpen.value = !dropdownOpen.value;
+}
+
+function closeDropdown() {
+  dropdownOpen.value = false;
+}
+
+async function handleLogout() {
+  closeDropdown();
+  authStore.logout();
+  await router.push('/login');
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    closeDropdown();
+  }
+}
+
+onMounted(async () => {
+  document.addEventListener('click', handleClickOutside);
+  try {
+    const settings = await authAPI.getPublicSettings();
+    contactInfo.value = settings.contact_info || '';
+  } catch (error) {
+    console.error('Failed to load contact info:', error);
+  }
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<style scoped>
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.2s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: scale(0.95) translateY(-4px);
+}
+</style>

frontend/src/components/layout/AppLayout.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-dark-950">
+    <!-- Background Decoration -->
+    <div class="fixed inset-0 bg-mesh-gradient pointer-events-none"></div>
+
+    <!-- Sidebar -->
+    <AppSidebar />
+
+    <!-- Main Content Area -->
+    <div
+      class="relative min-h-screen transition-all duration-300"
+      :class="[
+        sidebarCollapsed ? 'lg:ml-[72px]' : 'lg:ml-64',
+      ]"
+    >
+      <!-- Header -->
+      <AppHeader />
+
+      <!-- Main Content -->
+      <main class="p-4 md:p-6 lg:p-8">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useAppStore } from '@/stores';
+import AppSidebar from './AppSidebar.vue';
+import AppHeader from './AppHeader.vue';
+
+const appStore = useAppStore();
+const sidebarCollapsed = computed(() => appStore.sidebarCollapsed);
+</script>
+

frontend/src/components/layout/AppSidebar.vue

@@ -0,0 +1,331 @@
+<template>
+  <aside
+    class="sidebar"
+    :class="[
+      sidebarCollapsed ? 'w-[72px]' : 'w-64',
+      { '-translate-x-full lg:translate-x-0': !mobileOpen }
+    ]"
+  >
+    <!-- Logo/Brand -->
+    <div class="sidebar-header">
+      <!-- Custom Logo or Default Logo -->
+      <div class="w-9 h-9 rounded-xl overflow-hidden flex items-center justify-center shadow-glow">
+        <img :src="siteLogo || '/logo.png'" alt="Logo" class="w-full h-full object-contain" />
+      </div>
+      <transition name="fade">
+        <div v-if="!sidebarCollapsed" class="flex flex-col">
+          <span class="text-lg font-bold text-gray-900 dark:text-white">
+            {{ siteName }}
+          </span>
+          <!-- Version Badge -->
+          <VersionBadge :version="siteVersion" />
+        </div>
+      </transition>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="sidebar-nav scrollbar-hide">
+      <!-- Admin View: Admin menu first, then personal menu -->
+      <template v-if="isAdmin">
+        <!-- Admin Section -->
+        <div class="sidebar-section">
+          <router-link
+            v-for="item in adminNavItems"
+            :key="item.path"
+            :to="item.path"
+            class="sidebar-link mb-1"
+            :class="{ 'sidebar-link-active': isActive(item.path) }"
+            :title="sidebarCollapsed ? item.label : undefined"
+          >
+            <component :is="item.icon" class="w-5 h-5 flex-shrink-0" />
+            <transition name="fade">
+              <span v-if="!sidebarCollapsed">{{ item.label }}</span>
+            </transition>
+          </router-link>
+        </div>
+
+        <!-- Personal Section for Admin -->
+        <div class="sidebar-section">
+          <div v-if="!sidebarCollapsed" class="sidebar-section-title">
+            {{ t('nav.myAccount') }}
+          </div>
+          <div v-else class="h-px bg-gray-200 dark:bg-dark-700 mx-3 my-3"></div>
+
+          <router-link
+            v-for="item in personalNavItems"
+            :key="item.path"
+            :to="item.path"
+            class="sidebar-link mb-1"
+            :class="{ 'sidebar-link-active': isActive(item.path) }"
+            :title="sidebarCollapsed ? item.label : undefined"
+          >
+            <component :is="item.icon" class="w-5 h-5 flex-shrink-0" />
+            <transition name="fade">
+              <span v-if="!sidebarCollapsed">{{ item.label }}</span>
+            </transition>
+          </router-link>
+        </div>
+      </template>
+
+      <!-- Regular User View -->
+      <template v-else>
+        <div class="sidebar-section">
+          <router-link
+            v-for="item in userNavItems"
+            :key="item.path"
+            :to="item.path"
+            class="sidebar-link mb-1"
+            :class="{ 'sidebar-link-active': isActive(item.path) }"
+            :title="sidebarCollapsed ? item.label : undefined"
+          >
+            <component :is="item.icon" class="w-5 h-5 flex-shrink-0" />
+            <transition name="fade">
+              <span v-if="!sidebarCollapsed">{{ item.label }}</span>
+            </transition>
+          </router-link>
+        </div>
+      </template>
+    </nav>
+
+    <!-- Bottom Section -->
+    <div class="mt-auto border-t border-gray-100 dark:border-dark-800 p-3">
+      <!-- Theme Toggle -->
+      <button
+        @click="toggleTheme"
+        class="sidebar-link w-full mb-2"
+        :title="sidebarCollapsed ? (isDark ? t('nav.lightMode') : t('nav.darkMode')) : undefined"
+      >
+        <SunIcon v-if="isDark" class="w-5 h-5 flex-shrink-0 text-amber-500" />
+        <MoonIcon v-else class="w-5 h-5 flex-shrink-0" />
+        <transition name="fade">
+          <span v-if="!sidebarCollapsed">{{ isDark ? t('nav.lightMode') : t('nav.darkMode') }}</span>
+        </transition>
+      </button>
+
+      <!-- Collapse Button -->
+      <button
+        @click="toggleSidebar"
+        class="sidebar-link w-full"
+        :title="sidebarCollapsed ? t('nav.expand') : t('nav.collapse')"
+      >
+        <ChevronDoubleLeftIcon v-if="!sidebarCollapsed" class="w-5 h-5 flex-shrink-0" />
+        <ChevronDoubleRightIcon v-else class="w-5 h-5 flex-shrink-0" />
+        <transition name="fade">
+          <span v-if="!sidebarCollapsed">{{ t('nav.collapse') }}</span>
+        </transition>
+      </button>
+    </div>
+  </aside>
+
+  <!-- Mobile Overlay -->
+  <transition name="fade">
+    <div
+      v-if="mobileOpen"
+      class="fixed inset-0 bg-black/50 z-30 lg:hidden"
+      @click="closeMobile"
+    ></div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { computed, h, ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAppStore, useAuthStore } from '@/stores';
+import { getPublicSettings } from '@/api/auth';
+import VersionBadge from '@/components/common/VersionBadge.vue';
+
+const { t } = useI18n();
+
+const route = useRoute();
+const appStore = useAppStore();
+const authStore = useAuthStore();
+
+const sidebarCollapsed = computed(() => appStore.sidebarCollapsed);
+const isAdmin = computed(() => authStore.isAdmin);
+const isDark = ref(document.documentElement.classList.contains('dark'));
+const mobileOpen = ref(false);
+
+// Site settings
+const siteName = ref('Sub2API');
+const siteLogo = ref('');
+const siteVersion = ref('');
+
+onMounted(async () => {
+  try {
+    const settings = await getPublicSettings();
+    siteName.value = settings.site_name || 'Sub2API';
+    siteLogo.value = settings.site_logo || '';
+    siteVersion.value = settings.version || '';
+  } catch (error) {
+    console.error('Failed to load public settings:', error);
+  }
+});
+
+// SVG Icon Components
+const DashboardIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z' })
+  ])
+};
+
+const KeyIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z' })
+  ])
+};
+
+const ChartIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z' })
+  ])
+};
+
+const GiftIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z' })
+  ])
+};
+
+const UserIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z' })
+  ])
+};
+
+const UsersIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z' })
+  ])
+};
+
+const FolderIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z' })
+  ])
+};
+
+const CreditCardIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z' })
+  ])
+};
+
+const GlobeIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418' })
+  ])
+};
+
+const ServerIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z' })
+  ])
+};
+
+const TicketIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z' })
+  ])
+};
+
+const CogIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z' }),
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z' })
+  ])
+};
+
+const SunIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z' })
+  ])
+};
+
+const MoonIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z' })
+  ])
+};
+
+const ChevronDoubleLeftIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'm18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5' })
+  ])
+};
+
+const ChevronDoubleRightIcon = {
+  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'm5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5' })
+  ])
+};
+
+// User navigation items (for regular users)
+const userNavItems = computed(() => [
+  { path: '/dashboard', label: t('nav.dashboard'), icon: DashboardIcon },
+  { path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon },
+  { path: '/usage', label: t('nav.usage'), icon: ChartIcon },
+  { path: '/subscriptions', label: t('nav.mySubscriptions'), icon: CreditCardIcon },
+  { path: '/redeem', label: t('nav.redeem'), icon: GiftIcon },
+  { path: '/profile', label: t('nav.profile'), icon: UserIcon },
+]);
+
+// Personal navigation items (for admin's "My Account" section, without Dashboard)
+const personalNavItems = computed(() => [
+  { path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon },
+  { path: '/usage', label: t('nav.usage'), icon: ChartIcon },
+  { path: '/subscriptions', label: t('nav.mySubscriptions'), icon: CreditCardIcon },
+  { path: '/redeem', label: t('nav.redeem'), icon: GiftIcon },
+  { path: '/profile', label: t('nav.profile'), icon: UserIcon },
+]);
+
+// Admin navigation items
+const adminNavItems = computed(() => [
+  { path: '/admin/dashboard', label: t('nav.dashboard'), icon: DashboardIcon },
+  { path: '/admin/users', label: t('nav.users'), icon: UsersIcon },
+  { path: '/admin/groups', label: t('nav.groups'), icon: FolderIcon },
+  { path: '/admin/subscriptions', label: t('nav.subscriptions'), icon: CreditCardIcon },
+  { path: '/admin/accounts', label: t('nav.accounts'), icon: GlobeIcon },
+  { path: '/admin/proxies', label: t('nav.proxies'), icon: ServerIcon },
+  { path: '/admin/redeem', label: t('nav.redeemCodes'), icon: TicketIcon },
+  { path: '/admin/usage', label: t('nav.usage'), icon: ChartIcon },
+  { path: '/admin/settings', label: t('nav.settings'), icon: CogIcon },
+]);
+
+function toggleSidebar() {
+  appStore.toggleSidebar();
+}
+
+function toggleTheme() {
+  isDark.value = !isDark.value;
+  document.documentElement.classList.toggle('dark', isDark.value);
+  localStorage.setItem('theme', isDark.value ? 'dark' : 'light');
+}
+
+function closeMobile() {
+  mobileOpen.value = false;
+}
+
+function isActive(path: string): boolean {
+  return route.path === path || route.path.startsWith(path + '/');
+}
+
+// Initialize theme
+const savedTheme = localStorage.getItem('theme');
+if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+  isDark.value = true;
+  document.documentElement.classList.add('dark');
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

frontend/src/components/layout/AuthLayout.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="min-h-screen flex items-center justify-center p-4 relative overflow-hidden">
+    <!-- Background -->
+    <div class="absolute inset-0 bg-gradient-to-br from-gray-50 via-primary-50/30 to-gray-100 dark:from-dark-950 dark:via-dark-900 dark:to-dark-950"></div>
+
+    <!-- Decorative Elements -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <!-- Gradient Orbs -->
+      <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary-400/20 rounded-full blur-3xl"></div>
+      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-primary-500/15 rounded-full blur-3xl"></div>
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-primary-300/10 rounded-full blur-3xl"></div>
+
+      <!-- Grid Pattern -->
+      <div class="absolute inset-0 bg-[linear-gradient(rgba(20,184,166,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(20,184,166,0.03)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
+    </div>
+
+    <!-- Content Container -->
+    <div class="relative w-full max-w-md z-10">
+      <!-- Logo/Brand -->
+      <div class="text-center mb-8">
+        <!-- Custom Logo or Default Logo -->
+        <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl overflow-hidden shadow-lg shadow-primary-500/30 mb-4">
+          <img :src="siteLogo || '/logo.png'" alt="Logo" class="w-full h-full object-contain" />
+        </div>
+        <h1 class="text-3xl font-bold text-gradient mb-2">
+          {{ siteName }}
+        </h1>
+        <p class="text-sm text-gray-500 dark:text-dark-400">
+          {{ siteSubtitle }}
+        </p>
+      </div>
+
+      <!-- Card Container -->
+      <div class="card-glass rounded-2xl p-8 shadow-glass">
+        <slot />
+      </div>
+
+      <!-- Footer Links -->
+      <div class="text-center mt-6 text-sm">
+        <slot name="footer" />
+      </div>
+
+      <!-- Copyright -->
+      <div class="text-center mt-8 text-xs text-gray-400 dark:text-dark-500">
+        &copy; {{ currentYear }} {{ siteName }}. All rights reserved.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { getPublicSettings } from '@/api/auth';
+
+const siteName = ref('Sub2API');
+const siteLogo = ref('');
+const siteSubtitle = ref('Subscription to API Conversion Platform');
+
+const currentYear = computed(() => new Date().getFullYear());
+
+onMounted(async () => {
+  try {
+    const settings = await getPublicSettings();
+    siteName.value = settings.site_name || 'Sub2API';
+    siteLogo.value = settings.site_logo || '';
+    siteSubtitle.value = settings.site_subtitle || 'Subscription to API Conversion Platform';
+  } catch (error) {
+    console.error('Failed to load public settings:', error);
+  }
+});
+</script>
+
+<style scoped>
+.text-gradient {
+  @apply bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent;
+}
+</style>

frontend/src/components/layout/EXAMPLES.md

@@ -0,0 +1,424 @@
+# Layout Component Examples
+
+## Example 1: Dashboard Page
+
+```vue
+<template>
+  <AppLayout>
+    <div class="space-y-6">
+      <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <!-- Stats Cards -->
+        <div class="bg-white p-6 rounded-lg shadow">
+          <div class="text-sm text-gray-600">API Keys</div>
+          <div class="text-2xl font-bold text-gray-900">5</div>
+        </div>
+
+        <div class="bg-white p-6 rounded-lg shadow">
+          <div class="text-sm text-gray-600">Total Usage</div>
+          <div class="text-2xl font-bold text-gray-900">1,234</div>
+        </div>
+
+        <div class="bg-white p-6 rounded-lg shadow">
+          <div class="text-sm text-gray-600">Balance</div>
+          <div class="text-2xl font-bold text-indigo-600">${{ balance }}</div>
+        </div>
+
+        <div class="bg-white p-6 rounded-lg shadow">
+          <div class="text-sm text-gray-600">Status</div>
+          <div class="text-2xl font-bold text-green-600">Active</div>
+        </div>
+      </div>
+
+      <div class="bg-white p-6 rounded-lg shadow">
+        <h2 class="text-xl font-semibold mb-4">Recent Activity</h2>
+        <p class="text-gray-600">No recent activity</p>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { AppLayout } from '@/components/layout';
+import { useAuthStore } from '@/stores';
+
+const authStore = useAuthStore();
+const balance = computed(() => authStore.user?.balance.toFixed(2) || '0.00');
+</script>
+```
+
+---
+
+## Example 2: Login Page
+
+```vue
+<template>
+  <AuthLayout>
+    <h2 class="text-2xl font-bold text-gray-900 mb-6">Welcome Back</h2>
+
+    <form @submit.prevent="handleSubmit" class="space-y-4">
+      <div>
+        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">
+          Username
+        </label>
+        <input
+          id="username"
+          v-model="form.username"
+          type="text"
+          required
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+          placeholder="Enter your username"
+        />
+      </div>
+
+      <div>
+        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
+          Password
+        </label>
+        <input
+          id="password"
+          v-model="form.password"
+          type="password"
+          required
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+          placeholder="Enter your password"
+        />
+      </div>
+
+      <button
+        type="submit"
+        :disabled="loading"
+        class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+      >
+        {{ loading ? 'Logging in...' : 'Login' }}
+      </button>
+    </form>
+
+    <template #footer>
+      <p class="text-gray-600">
+        Don't have an account?
+        <router-link to="/register" class="text-indigo-600 hover:underline font-medium">
+          Sign up
+        </router-link>
+      </p>
+    </template>
+  </AuthLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { AuthLayout } from '@/components/layout';
+import { useAuthStore, useAppStore } from '@/stores';
+
+const router = useRouter();
+const authStore = useAuthStore();
+const appStore = useAppStore();
+
+const form = ref({
+  username: '',
+  password: '',
+});
+
+const loading = ref(false);
+
+async function handleSubmit() {
+  loading.value = true;
+  try {
+    await authStore.login(form.value);
+    appStore.showSuccess('Login successful!');
+    await router.push('/dashboard');
+  } catch (error) {
+    appStore.showError('Invalid username or password');
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+```
+
+---
+
+## Example 3: API Keys Page with Custom Header Title
+
+```vue
+<template>
+  <AppLayout>
+    <div class="space-y-6">
+      <!-- Custom page header -->
+      <div class="flex items-center justify-between">
+        <h1 class="text-3xl font-bold text-gray-900">API Keys</h1>
+        <button
+          @click="showCreateModal = true"
+          class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors"
+        >
+          Create New Key
+        </button>
+      </div>
+
+      <!-- API Keys List -->
+      <div class="bg-white rounded-lg shadow overflow-hidden">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Name
+              </th>
+              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Key
+              </th>
+              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Status
+              </th>
+              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Created
+              </th>
+              <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-200">
+            <tr v-for="key in apiKeys" :key="key.id">
+              <td class="px-6 py-4 whitespace-nowrap">{{ key.name }}</td>
+              <td class="px-6 py-4 font-mono text-sm">{{ key.key }}</td>
+              <td class="px-6 py-4">
+                <span
+                  class="px-2 py-1 text-xs rounded-full"
+                  :class="key.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'"
+                >
+                  {{ key.status }}
+                </span>
+              </td>
+              <td class="px-6 py-4 text-sm text-gray-500">
+                {{ new Date(key.created_at).toLocaleDateString() }}
+              </td>
+              <td class="px-6 py-4 text-right">
+                <button class="text-red-600 hover:text-red-800 text-sm">
+                  Delete
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { AppLayout } from '@/components/layout';
+import type { ApiKey } from '@/types';
+
+const showCreateModal = ref(false);
+const apiKeys = ref<ApiKey[]>([]);
+
+// Fetch API keys on mount
+// fetchApiKeys();
+</script>
+```
+
+---
+
+## Example 4: Admin Users Page
+
+```vue
+<template>
+  <AppLayout>
+    <div class="space-y-6">
+      <div class="flex items-center justify-between">
+        <h1 class="text-3xl font-bold text-gray-900">User Management</h1>
+        <button
+          @click="showCreateUser = true"
+          class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors"
+        >
+          Create User
+        </button>
+      </div>
+
+      <!-- Users Table -->
+      <div class="bg-white rounded-lg shadow">
+        <div class="p-6">
+          <div class="space-y-4">
+            <div v-for="user in users" :key="user.id" class="flex items-center justify-between border-b pb-4">
+              <div>
+                <div class="font-medium text-gray-900">{{ user.username }}</div>
+                <div class="text-sm text-gray-500">{{ user.email }}</div>
+              </div>
+              <div class="flex items-center space-x-4">
+                <span
+                  class="px-2 py-1 text-xs rounded-full"
+                  :class="user.role === 'admin' ? 'bg-purple-100 text-purple-800' : 'bg-blue-100 text-blue-800'"
+                >
+                  {{ user.role }}
+                </span>
+                <span class="text-sm font-medium text-gray-700">
+                  ${{ user.balance.toFixed(2) }}
+                </span>
+                <button class="text-indigo-600 hover:text-indigo-800 text-sm">
+                  Edit
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { AppLayout } from '@/components/layout';
+import type { User } from '@/types';
+
+const showCreateUser = ref(false);
+const users = ref<User[]>([]);
+
+// Fetch users on mount
+// fetchUsers();
+</script>
+```
+
+---
+
+## Example 5: Profile Page
+
+```vue
+<template>
+  <AppLayout>
+    <div class="max-w-2xl space-y-6">
+      <h1 class="text-3xl font-bold text-gray-900">Profile Settings</h1>
+
+      <!-- User Info Card -->
+      <div class="bg-white rounded-lg shadow p-6 space-y-4">
+        <h2 class="text-xl font-semibold text-gray-900">Account Information</h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">
+              Username
+            </label>
+            <div class="px-3 py-2 bg-gray-50 rounded-lg text-gray-900">
+              {{ user?.username }}
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">
+              Email
+            </label>
+            <div class="px-3 py-2 bg-gray-50 rounded-lg text-gray-900">
+              {{ user?.email }}
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">
+              Role
+            </label>
+            <div class="px-3 py-2 bg-gray-50 rounded-lg">
+              <span
+                class="px-2 py-1 text-xs rounded-full"
+                :class="user?.role === 'admin' ? 'bg-purple-100 text-purple-800' : 'bg-blue-100 text-blue-800'"
+              >
+                {{ user?.role }}
+              </span>
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">
+              Balance
+            </label>
+            <div class="px-3 py-2 bg-gray-50 rounded-lg text-indigo-600 font-semibold">
+              ${{ user?.balance.toFixed(2) }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Change Password Card -->
+      <div class="bg-white rounded-lg shadow p-6 space-y-4">
+        <h2 class="text-xl font-semibold text-gray-900">Change Password</h2>
+
+        <form @submit.prevent="handleChangePassword" class="space-y-4">
+          <div>
+            <label for="old-password" class="block text-sm font-medium text-gray-700 mb-1">
+              Current Password
+            </label>
+            <input
+              id="old-password"
+              v-model="passwordForm.old_password"
+              type="password"
+              required
+              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
+            />
+          </div>
+
+          <div>
+            <label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">
+              New Password
+            </label>
+            <input
+              id="new-password"
+              v-model="passwordForm.new_password"
+              type="password"
+              required
+              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
+            />
+          </div>
+
+          <button
+            type="submit"
+            class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors"
+          >
+            Update Password
+          </button>
+        </form>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { AppLayout } from '@/components/layout';
+import { useAuthStore, useAppStore } from '@/stores';
+
+const authStore = useAuthStore();
+const appStore = useAppStore();
+
+const user = computed(() => authStore.user);
+
+const passwordForm = ref({
+  old_password: '',
+  new_password: '',
+});
+
+async function handleChangePassword() {
+  try {
+    // await changePasswordAPI(passwordForm.value);
+    appStore.showSuccess('Password updated successfully!');
+    passwordForm.value = { old_password: '', new_password: '' };
+  } catch (error) {
+    appStore.showError('Failed to update password');
+  }
+}
+</script>
+```
+
+---
+
+## Tips for Using Layouts
+
+1. **Page Titles**: Set route meta to automatically display page titles in the header
+2. **Loading States**: Use `appStore.setLoading(true/false)` for global loading indicators
+3. **Toast Notifications**: Use `appStore.showSuccess()`, `appStore.showError()`, etc.
+4. **Authentication**: All authenticated pages should use `AppLayout`
+5. **Auth Pages**: Login and Register pages should use `AuthLayout`
+6. **Sidebar State**: The sidebar state persists across navigation
+7. **Mobile First**: All examples are responsive by default using Tailwind's mobile-first approach

frontend/src/components/layout/INTEGRATION.md

@@ -0,0 +1,480 @@
+# Layout Components Integration Guide
+
+## Quick Start
+
+### 1. Import Layout Components
+
+```typescript
+// In your view files
+import { AppLayout, AuthLayout } from '@/components/layout';
+```
+
+### 2. Use in Routes
+
+```typescript
+// src/router/index.ts
+import { createRouter, createWebHistory } from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
+
+// Views
+import DashboardView from '@/views/DashboardView.vue';
+import LoginView from '@/views/auth/LoginView.vue';
+import RegisterView from '@/views/auth/RegisterView.vue';
+
+const routes: RouteRecordRaw[] = [
+  // Auth routes (no layout needed - views use AuthLayout internally)
+  {
+    path: '/login',
+    name: 'Login',
+    component: LoginView,
+    meta: { requiresAuth: false },
+  },
+  {
+    path: '/register',
+    name: 'Register',
+    component: RegisterView,
+    meta: { requiresAuth: false },
+  },
+
+  // User routes (use AppLayout)
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: DashboardView,
+    meta: { requiresAuth: true, title: 'Dashboard' },
+  },
+  {
+    path: '/api-keys',
+    name: 'ApiKeys',
+    component: () => import('@/views/ApiKeysView.vue'),
+    meta: { requiresAuth: true, title: 'API Keys' },
+  },
+  {
+    path: '/usage',
+    name: 'Usage',
+    component: () => import('@/views/UsageView.vue'),
+    meta: { requiresAuth: true, title: 'Usage Statistics' },
+  },
+  {
+    path: '/redeem',
+    name: 'Redeem',
+    component: () => import('@/views/RedeemView.vue'),
+    meta: { requiresAuth: true, title: 'Redeem Code' },
+  },
+  {
+    path: '/profile',
+    name: 'Profile',
+    component: () => import('@/views/ProfileView.vue'),
+    meta: { requiresAuth: true, title: 'Profile Settings' },
+  },
+
+  // Admin routes (use AppLayout, admin only)
+  {
+    path: '/admin/dashboard',
+    name: 'AdminDashboard',
+    component: () => import('@/views/admin/DashboardView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, title: 'Admin Dashboard' },
+  },
+  {
+    path: '/admin/users',
+    name: 'AdminUsers',
+    component: () => import('@/views/admin/UsersView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, title: 'User Management' },
+  },
+  {
+    path: '/admin/groups',
+    name: 'AdminGroups',
+    component: () => import('@/views/admin/GroupsView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, title: 'Groups' },
+  },
+  {
+    path: '/admin/accounts',
+    name: 'AdminAccounts',
+    component: () => import('@/views/admin/AccountsView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, title: 'Accounts' },
+  },
+  {
+    path: '/admin/proxies',
+    name: 'AdminProxies',
+    component: () => import('@/views/admin/ProxiesView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, title: 'Proxies' },
+  },
+  {
+    path: '/admin/redeem-codes',
+    name: 'AdminRedeemCodes',
+    component: () => import('@/views/admin/RedeemCodesView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, title: 'Redeem Codes' },
+  },
+
+  // Default redirect
+  {
+    path: '/',
+    redirect: '/dashboard',
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+// Navigation guards
+router.beforeEach((to, from, next) => {
+  const authStore = useAuthStore();
+
+  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+    // Redirect to login if not authenticated
+    next('/login');
+  } else if (to.meta.requiresAdmin && !authStore.isAdmin) {
+    // Redirect to dashboard if not admin
+    next('/dashboard');
+  } else {
+    next();
+  }
+});
+
+export default router;
+```
+
+### 3. Initialize Stores in main.ts
+
+```typescript
+// src/main.ts
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+import router from './router';
+import './style.css';
+
+const app = createApp(App);
+const pinia = createPinia();
+
+app.use(pinia);
+app.use(router);
+
+// Initialize auth state on app startup
+import { useAuthStore } from '@/stores';
+const authStore = useAuthStore();
+authStore.checkAuth();
+
+app.mount('#app');
+```
+
+### 4. Update App.vue
+
+```vue
+<!-- src/App.vue -->
+<template>
+  <router-view />
+</template>
+
+<script setup lang="ts">
+// App.vue just renders the router view
+// Layouts are handled by individual views
+</script>
+```
+
+---
+
+## View Component Templates
+
+### Authenticated Page Template
+
+```vue
+<!-- src/views/DashboardView.vue -->
+<template>
+  <AppLayout>
+    <div class="space-y-6">
+      <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
+
+      <!-- Your content here -->
+    </div>
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import { AppLayout } from '@/components/layout';
+
+// Your component logic here
+</script>
+```
+
+### Auth Page Template
+
+```vue
+<!-- src/views/auth/LoginView.vue -->
+<template>
+  <AuthLayout>
+    <h2 class="text-2xl font-bold text-gray-900 mb-6">Login</h2>
+
+    <!-- Your login form here -->
+
+    <template #footer>
+      <p class="text-gray-600">
+        Don't have an account?
+        <router-link to="/register" class="text-indigo-600 hover:underline">
+          Sign up
+        </router-link>
+      </p>
+    </template>
+  </AuthLayout>
+</template>
+
+<script setup lang="ts">
+import { AuthLayout } from '@/components/layout';
+
+// Your login logic here
+</script>
+```
+
+---
+
+## Customization
+
+### Changing Colors
+
+The components use Tailwind's indigo color scheme by default. To change:
+
+```vue
+<!-- Change all instances of indigo-* to your preferred color -->
+<div class="bg-blue-600">   <!-- Instead of bg-indigo-600 -->
+<div class="text-blue-600">  <!-- Instead of text-indigo-600 -->
+```
+
+### Adding Custom Icons
+
+Replace HTML entity icons with your preferred icon library:
+
+```vue
+<!-- Before (HTML entities) -->
+<span class="text-lg">&#128200;</span>
+
+<!-- After (Heroicons example) -->
+<ChartBarIcon class="w-5 h-5" />
+```
+
+### Sidebar Customization
+
+Modify navigation items in `AppSidebar.vue`:
+
+```typescript
+// Add/remove/modify navigation items
+const userNavItems = [
+  { path: '/dashboard', label: 'Dashboard', icon: '&#128200;' },
+  { path: '/new-page', label: 'New Page', icon: '&#128196;' }, // Add new item
+  // ...
+];
+```
+
+### Header Customization
+
+Modify user dropdown in `AppHeader.vue`:
+
+```vue
+<!-- Add new dropdown items -->
+<router-link
+  to="/settings"
+  @click="closeDropdown"
+  class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+>
+  <span class="mr-2">&#9881;</span>
+  Settings
+</router-link>
+```
+
+---
+
+## Mobile Responsive Behavior
+
+### Sidebar
+- **Desktop (md+)**: Always visible, can be collapsed to icon-only view
+- **Mobile**: Hidden by default, shown via menu toggle in header
+
+### Header
+- **Desktop**: Shows full user info and balance
+- **Mobile**: Shows compact view with hamburger menu
+
+To improve mobile experience, you can add overlay and transitions:
+
+```vue
+<!-- AppSidebar.vue enhancement for mobile -->
+<aside
+  class="fixed left-0 top-0 h-screen transition-transform duration-300 z-40"
+  :class="[
+    sidebarCollapsed ? 'w-16' : 'w-64',
+    // Hide on mobile when collapsed
+    'md:translate-x-0',
+    sidebarCollapsed ? '-translate-x-full md:translate-x-0' : 'translate-x-0'
+  ]"
+>
+  <!-- ... -->
+</aside>
+
+<!-- Add overlay for mobile -->
+<div
+  v-if="!sidebarCollapsed"
+  @click="toggleSidebar"
+  class="fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden"
+></div>
+```
+
+---
+
+## State Management Integration
+
+### Auth Store Usage
+
+```typescript
+import { useAuthStore } from '@/stores';
+
+const authStore = useAuthStore();
+
+// Check if user is authenticated
+if (authStore.isAuthenticated) {
+  // User is logged in
+}
+
+// Check if user is admin
+if (authStore.isAdmin) {
+  // User has admin role
+}
+
+// Get current user
+const user = authStore.user;
+```
+
+### App Store Usage
+
+```typescript
+import { useAppStore } from '@/stores';
+
+const appStore = useAppStore();
+
+// Toggle sidebar
+appStore.toggleSidebar();
+
+// Show notifications
+appStore.showSuccess('Operation completed!');
+appStore.showError('Something went wrong');
+appStore.showInfo('Did you know...');
+appStore.showWarning('Be careful!');
+
+// Loading state
+appStore.setLoading(true);
+// ... perform operation
+appStore.setLoading(false);
+
+// Or use helper
+await appStore.withLoading(async () => {
+  // Your async operation
+});
+```
+
+---
+
+## Accessibility Features
+
+All layout components include:
+
+- **Semantic HTML**: Proper use of `<nav>`, `<header>`, `<main>`, `<aside>`
+- **ARIA labels**: Buttons have descriptive labels
+- **Keyboard navigation**: All interactive elements are keyboard accessible
+- **Focus management**: Proper focus states with Tailwind's `focus:` utilities
+- **Color contrast**: WCAG AA compliant color combinations
+
+To enhance further:
+
+```vue
+<!-- Add skip to main content link -->
+<a
+  href="#main-content"
+  class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-white px-4 py-2 rounded"
+>
+  Skip to main content
+</a>
+
+<main id="main-content">
+  <!-- Content -->
+</main>
+```
+
+---
+
+## Testing
+
+### Unit Testing Layout Components
+
+```typescript
+// AppHeader.test.ts
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import AppHeader from '@/components/layout/AppHeader.vue';
+
+describe('AppHeader', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('renders user info when authenticated', () => {
+    const wrapper = mount(AppHeader);
+    // Add assertions
+  });
+
+  it('shows dropdown when clicked', async () => {
+    const wrapper = mount(AppHeader);
+    await wrapper.find('button').trigger('click');
+    expect(wrapper.find('.dropdown').exists()).toBe(true);
+  });
+});
+```
+
+---
+
+## Performance Optimization
+
+### Lazy Loading
+
+Views using layouts are already lazy loaded in the router example above.
+
+### Code Splitting
+
+Layout components are automatically code-split when imported:
+
+```typescript
+// This creates a separate chunk for layout components
+import { AppLayout } from '@/components/layout';
+```
+
+### Reducing Re-renders
+
+Layout components use `computed` refs to prevent unnecessary re-renders:
+
+```typescript
+const sidebarCollapsed = computed(() => appStore.sidebarCollapsed);
+// This only re-renders when sidebarCollapsed changes
+```
+
+---
+
+## Troubleshooting
+
+### Sidebar not showing
+- Check if `useAppStore` is properly initialized
+- Verify Tailwind classes are being processed
+- Check z-index conflicts with other components
+
+### Routes not highlighting in sidebar
+- Ensure route paths match exactly
+- Check `isActive()` function logic
+- Verify `useRoute()` is working correctly
+
+### User info not displaying
+- Ensure auth store is initialized with `checkAuth()`
+- Verify user is logged in
+- Check localStorage for auth data
+
+### Mobile menu not working
+- Verify `toggleSidebar()` is called correctly
+- Check responsive breakpoints (md:)
+- Test on actual mobile device or browser dev tools

frontend/src/components/layout/README.md

@@ -0,0 +1,212 @@
+# Layout Components
+
+Vue 3 layout components for the Sub2API frontend, built with Composition API, TypeScript, and TailwindCSS.
+
+## Components
+
+### 1. AppLayout.vue
+Main application layout with sidebar and header.
+
+**Usage:**
+```vue
+<template>
+  <AppLayout>
+    <!-- Your page content here -->
+    <h1>Dashboard</h1>
+    <p>Welcome to your dashboard!</p>
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import { AppLayout } from '@/components/layout';
+</script>
+```
+
+**Features:**
+- Responsive sidebar (collapsible)
+- Fixed header at top
+- Main content area with slot
+- Automatically adjusts margin based on sidebar state
+
+---
+
+### 2. AppSidebar.vue
+Navigation sidebar with user and admin sections.
+
+**Features:**
+- Logo/brand at top
+- User navigation links:
+  - Dashboard
+  - API Keys
+  - Usage
+  - Redeem
+  - Profile
+- Admin navigation links (shown only if user is admin):
+  - Admin Dashboard
+  - Users
+  - Groups
+  - Accounts
+  - Proxies
+  - Redeem Codes
+- Collapsible sidebar with toggle button
+- Active route highlighting
+- Icons using HTML entities
+- Responsive (mobile-friendly)
+
+**Used automatically by AppLayout** - no need to import separately.
+
+---
+
+### 3. AppHeader.vue
+Top header with user info and actions.
+
+**Features:**
+- Mobile menu toggle button
+- Page title (from route meta or slot)
+- User balance display (desktop only)
+- User dropdown menu with:
+  - Profile link
+  - Logout button
+- User avatar with initials
+- Click-outside handling for dropdown
+- Responsive design
+
+**Usage with custom title:**
+```vue
+<template>
+  <AppLayout>
+    <template #title>
+      Custom Page Title
+    </template>
+
+    <!-- Your content -->
+  </AppLayout>
+</template>
+```
+
+**Used automatically by AppLayout** - no need to import separately.
+
+---
+
+### 4. AuthLayout.vue
+Simple centered layout for authentication pages (login/register).
+
+**Usage:**
+```vue
+<template>
+  <AuthLayout>
+    <!-- Login/Register form content -->
+    <h2 class="text-2xl font-bold mb-6">Login</h2>
+
+    <form @submit.prevent="handleLogin">
+      <!-- Form fields -->
+    </form>
+
+    <!-- Optional footer slot -->
+    <template #footer>
+      <p>
+        Don't have an account?
+        <router-link to="/register" class="text-indigo-600 hover:underline">
+          Sign up
+        </router-link>
+      </p>
+    </template>
+  </AuthLayout>
+</template>
+
+<script setup lang="ts">
+import { AuthLayout } from '@/components/layout';
+
+function handleLogin() {
+  // Login logic
+}
+</script>
+```
+
+**Features:**
+- Centered card container
+- Gradient background
+- Logo/brand at top
+- Main content slot
+- Optional footer slot for links
+- Fully responsive
+
+---
+
+## Route Configuration
+
+To set page titles in the header, add meta to your routes:
+
+```typescript
+// router/index.ts
+const routes = [
+  {
+    path: '/dashboard',
+    component: DashboardView,
+    meta: { title: 'Dashboard' },
+  },
+  {
+    path: '/api-keys',
+    component: ApiKeysView,
+    meta: { title: 'API Keys' },
+  },
+  // ...
+];
+```
+
+---
+
+## Store Dependencies
+
+These components use the following Pinia stores:
+
+- **useAuthStore**: For user authentication state, role checking, and logout
+- **useAppStore**: For sidebar state management and toast notifications
+
+Make sure these stores are properly initialized in your app.
+
+---
+
+## Styling
+
+All components use TailwindCSS utility classes. Make sure your `tailwind.config.js` includes the component paths:
+
+```js
+module.exports = {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+  ],
+  // ...
+}
+```
+
+---
+
+## Icons
+
+Components use HTML entity icons for simplicity:
+- &#128200; Chart (Dashboard)
+- &#128273; Key (API Keys)
+- &#128202; Bar Chart (Usage)
+- &#127873; Gift (Redeem)
+- &#128100; User (Profile)
+- &#128268; Admin
+- &#128101; Users
+- &#128193; Folder (Groups)
+- &#127760; Globe (Accounts)
+- &#128260; Network (Proxies)
+- &#127991; Ticket (Redeem Codes)
+
+You can replace these with your preferred icon library (e.g., Heroicons, Font Awesome) if needed.
+
+---
+
+## Mobile Responsiveness
+
+All components are fully responsive:
+- **AppSidebar**: Fixed positioning on desktop, hidden by default on mobile
+- **AppHeader**: Shows mobile menu toggle on small screens, hides balance display
+- **AuthLayout**: Adapts padding and card size for mobile devices
+
+The sidebar uses Tailwind's responsive breakpoints (md:) to adjust behavior.

frontend/src/components/layout/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Layout Components
+ * Export all layout components for easy importing
+ */
+
+export { default as AppLayout } from './AppLayout.vue';
+export { default as AppSidebar } from './AppSidebar.vue';
+export { default as AppHeader } from './AppHeader.vue';
+export { default as AuthLayout } from './AuthLayout.vue';