87 lines
No EOL
2.9 KiB
Vue
87 lines
No EOL
2.9 KiB
Vue
<template>
|
|
<div class="space-y-8">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-2xl font-semibold">Dashboard</h1>
|
|
<div class="text-sm text-neutral-600">
|
|
Mode: {{ currentMode }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Simple Core Metrics -->
|
|
<UCard>
|
|
<template #header>
|
|
<h3 class="text-lg font-medium">Core Metrics</h3>
|
|
</template>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold text-green-600">{{ runwayDisplay }}</div>
|
|
<div class="text-sm text-neutral-600">Runway</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold text-blue-600">{{ coverageDisplay }}</div>
|
|
<div class="text-sm text-neutral-600">Coverage</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold text-purple-600">{{ streamCount }}</div>
|
|
<div class="text-sm text-neutral-600">Revenue Streams</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Simple Member List -->
|
|
<UCard>
|
|
<template #header>
|
|
<h3 class="text-lg font-medium">Members ({{ memberCount }})</h3>
|
|
</template>
|
|
<div class="space-y-2">
|
|
<div v-for="(member, index) in membersList" :key="index" class="flex items-center justify-between p-2 border border-neutral-200 rounded">
|
|
<span class="font-medium">{{ member.name }}</span>
|
|
<span class="text-sm text-neutral-600">{{ member.relationship }}</span>
|
|
</div>
|
|
<div v-if="memberCount === 0" class="text-sm text-neutral-500 italic p-4">
|
|
No members configured yet.
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Simple reactive data without complex computations
|
|
const currentMode = ref('minimum')
|
|
const runwayDisplay = ref('∞')
|
|
const coverageDisplay = ref('100%')
|
|
const streamCount = ref(0)
|
|
const memberCount = ref(0)
|
|
const membersList = ref([])
|
|
|
|
// Try to initialize with store data
|
|
onMounted(async () => {
|
|
try {
|
|
// Simple store access without composable
|
|
const membersStore = useMembersStore()
|
|
const streamsStore = useStreamsStore()
|
|
const policiesStore = usePoliciesStore()
|
|
|
|
// Update reactive values
|
|
currentMode.value = 'target' // Simplified - always use target mode
|
|
memberCount.value = membersStore.members?.length || 0
|
|
streamCount.value = streamsStore.streams?.length || 0
|
|
|
|
// Simple member list
|
|
membersList.value = membersStore.members?.map(m => ({
|
|
name: m.displayName || 'Unknown',
|
|
relationship: m.payRelationship || 'Unknown'
|
|
})) || []
|
|
|
|
console.log('Dashboard initialized:', {
|
|
mode: currentMode.value,
|
|
members: memberCount.value,
|
|
streams: streamCount.value
|
|
})
|
|
|
|
} catch (error) {
|
|
console.error('Error initializing simple dashboard:', error)
|
|
}
|
|
})
|
|
</script> |