43 lines
1.5 KiB
Vue
43 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
usePageTitle('Business Analytics')
|
|
|
|
const domains = [
|
|
{ id: 'production', label: 'Producción' },
|
|
{ id: 'claims', label: 'Siniestros' },
|
|
{ id: 'pipeline', label: 'Pipeline' },
|
|
{ id: 'service', label: 'Servicio' },
|
|
]
|
|
|
|
const activeDomain = ref('production')
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h1 class="text-2xl font-semibold text-[var(--text-primary)]">Business Analytics</h1>
|
|
<p class="text-[var(--text-muted)] mt-1">Track production, claims, pipeline, and service metrics</p>
|
|
</div>
|
|
|
|
<!-- Domain tabs -->
|
|
<div class="flex gap-2">
|
|
<button
|
|
v-for="domain in domains"
|
|
:key="domain.id"
|
|
type="button"
|
|
class="px-4 py-2 rounded-lg font-medium transition-colors"
|
|
:class="activeDomain === domain.id ? 'bg-[var(--brand)] text-white' : 'bg-[var(--surface)] text-[var(--text-muted)] hover:bg-[var(--card-border)]'"
|
|
@click="activeDomain = domain.id"
|
|
>
|
|
{{ domain.label }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Empty state -->
|
|
<div class="border border-[var(--card-border)] rounded-lg p-12 text-center">
|
|
<UIcon name="i-heroicons-chart-bar" class="w-16 h-16 mx-auto text-[var(--text-muted)] mb-4" />
|
|
<h3 class="text-lg font-medium text-[var(--text-primary)] mb-2">Analytics unavailable</h3>
|
|
<p class="text-[var(--text-muted)]">Analytics data will be available once you have policies and quotes in the system.</p>
|
|
</div>
|
|
</div>
|
|
</template>
|