Initial commit

src/views/SecurityPanel.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useIntegrationStore } from '@KTXC/stores/integrationStore';
+import type { User } from '@/types';
+
+interface SecurityPanel {
+  id: string;
+  label: string;
+  icon?: string;
+  priority: number;
+  component: any;
+}
+
+const props = defineProps<{
+  user: User;
+}>();
+
+const emit = defineEmits<{
+  update: [];
+}>();
+
+const integrationStore = useIntegrationStore();
+const panels = ref<SecurityPanel[]>([]);
+const loading = ref(false);
+
+// Load panels from integration store and resolve component promises
+const loadPanels = async () => {
+  const integrations = integrationStore.getItems('user_manager_security_panels');
+  const components = [];
+  
+  for (const panel of integrations) {
+    try {
+      if (panel.component) {
+        const module = await panel.component();
+        components.push({
+          id: panel.id,
+          label: panel.label || panel.id,
+          icon: panel.icon,
+          priority: panel.priority ?? 100,
+          component: module.default
+        });
+      }
+    } catch (error) {
+      console.error('[UserManager] Failed to load security panel component for', panel.id, ':', error);
+    }
+  }
+  
+  panels.value = components.sort((a, b) => a.priority - b.priority);
+};
+
+const handleUpdate = () => {
+  emit('update');
+};
+
+onMounted(async () => {
+  await loadPanels();
+});
+</script>
+
+<template>
+  <div>
+    <VRow v-if="loading" class="mb-4">
+      <VCol cols="12">
+        <VProgressCircular indeterminate color="primary" />
+      </VCol>
+    </VRow>
+
+    <VRow v-else-if="panels.length === 0">
+      <VCol cols="12">
+        <VAlert type="info">
+          No security management options are available.
+        </VAlert>
+      </VCol>
+    </VRow>
+
+    <div v-else class="security-panels-container">
+      <VRow>
+        <VCol
+          v-for="panel in panels"
+          :key="panel.id"
+          cols="12"
+          md="6"
+        >
+          <component
+            :is="panel.component"
+            :user="user"
+            @update="handleUpdate"
+          />
+        </VCol>
+      </VRow>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.security-panels-container {
+  max-height: 600px;
+  overflow-y: auto;
+}
+</style>