login with api

frontend_management/components/common/AppCard.vue

@@ -0,0 +1,59 @@
+<template>
+  <q-card 
+    :class="[
+      'rounded-lg shadow-md transition-shadow',
+      hoverable && 'hover:shadow-lg cursor-pointer',
+      customClass
+    ]"
+    style="border: 1px solid #e5e7eb;"
+    @click="handleClick"
+  >
+    <!-- Card Header -->
+    <q-card-section v-if="$slots.header || title" class="border-b border-gray-200">
+      <div class="flex justify-between items-center">
+        <div>
+          <h3 v-if="title" class="text-lg font-semibold text-gray-900">{{ title }}</h3>
+          <p v-if="subtitle" class="text-sm text-gray-600 mt-1">{{ subtitle }}</p>
+        </div>
+        <slot name="header-actions"></slot>
+      </div>
+      <slot name="header"></slot>
+    </q-card-section>
+
+    <!-- Card Content -->
+    <q-card-section :class="contentClass">
+      <slot></slot>
+    </q-card-section>
+
+    <!-- Card Footer -->
+    <q-card-section v-if="$slots.footer" class="border-t border-gray-200">
+      <slot name="footer"></slot>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title?: string;
+  subtitle?: string;
+  hoverable?: boolean;
+  customClass?: string;
+  contentClass?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+  subtitle: '',
+  hoverable: false,
+  customClass: '',
+  contentClass: ''
+});
+
+const emit = defineEmits<{
+  click: [];
+}>();
+
+const handleClick = () => {
+  emit('click');
+};
+</script>