login with api

frontend_management/components/common/AppHeader.vue

@@ -0,0 +1,53 @@
+<template>
+  <header class="bg-white shadow-sm border-b border-gray-200 px-8 py-4">
+    <div class="flex justify-between items-center">
+      <!-- Left: Page Title -->
+      <div>
+        <h1 v-if="title" class="text-2xl font-bold text-gray-900">{{ title }}</h1>
+        <p v-if="subtitle" class="text-sm text-gray-600 mt-1">{{ subtitle }}</p>
+      </div>
+
+      <!-- Right: Actions & User -->
+      <div class="flex items-center gap-4">
+        <!-- Action Buttons Slot -->
+        <slot name="actions"></slot>
+
+        <!-- User Avatar & Info -->
+        <div class="flex items-center gap-3">
+          <div class="text-right">
+            <div class="text-sm font-semibold text-gray-900">{{ userName }}</div>
+            <div class="text-xs text-gray-500">{{ userRole }}</div>
+          </div>
+          <div 
+            class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center text-lg cursor-pointer hover:bg-primary-200 transition"
+            @click="$emit('avatar-click')"
+          >
+            {{ userAvatar }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title?: string;
+  subtitle?: string;
+  userName?: string;
+  userRole?: string;
+  userAvatar?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+  subtitle: '',
+  userName: 'ผู้ใช้งาน',
+  userRole: 'User',
+  userAvatar: '👤'
+});
+
+defineEmits<{
+  'avatar-click': [];
+}>();
+</script>