WIP jordan
This commit is contained in:
Jordan Weingarten
7
app/components/AppBackToHome.vue
Normal file
7
app/components/AppBackToHome.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<NuxtLink to="/" class="inline-flex">
|
||||
<UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-home">
|
||||
Home
|
||||
</UButton>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
129
app/components/account/AccountThemeSection.vue
Normal file
129
app/components/account/AccountThemeSection.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<script setup lang="ts">
|
||||
import type { AppThemeId } from '~/types/app-theme'
|
||||
|
||||
const { themeId, themeOptions, applyTheme } = useAppTheme()
|
||||
|
||||
const themeGradients: Record<string, string> = {
|
||||
light: 'from-sky-100 via-blue-50 to-indigo-100',
|
||||
purple: 'from-violet-100 via-fuchsia-50 to-purple-100',
|
||||
dark: 'from-slate-700 via-slate-800 to-slate-900',
|
||||
'dark-purple': 'from-violet-900 via-purple-950 to-slate-900'
|
||||
}
|
||||
|
||||
const themeIcons: Record<string, string> = {
|
||||
light: 'i-heroicons-sun',
|
||||
purple: 'i-heroicons-sparkles',
|
||||
dark: 'i-heroicons-moon',
|
||||
'dark-purple': 'i-heroicons-star'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<p class="text-sm leading-relaxed text-[var(--text-muted)]">
|
||||
Choose a theme for the entire application. Colors, inputs, buttons, cards, sidebar, and top bar all follow your choice.
|
||||
Your preference is saved to this browser.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Theme grid -->
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<button
|
||||
v-for="opt in themeOptions"
|
||||
:key="opt.id"
|
||||
type="button"
|
||||
class="app-theme-card text-left"
|
||||
:class="themeId === opt.id ? 'app-theme-card-selected' : ''"
|
||||
@click="applyTheme(opt.id as AppThemeId)"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div
|
||||
class="flex h-8 w-8 items-center justify-center rounded-lg"
|
||||
:class="themeId === opt.id ? 'bg-[var(--brand-soft)] text-[var(--brand)]' : 'bg-[var(--badge-muted-bg)] text-[var(--text-muted)]'"
|
||||
>
|
||||
<UIcon :name="themeIcons[opt.id]" class="h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-[var(--text-primary)]">{{ opt.label }}</p>
|
||||
<p class="mt-0.5 text-xs text-[var(--text-muted)]">{{ opt.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Transition
|
||||
enter-active-class="transition duration-200 ease-out"
|
||||
enter-from-class="opacity-0 scale-75"
|
||||
enter-to-class="opacity-100 scale-100"
|
||||
leave-active-class="transition duration-150 ease-in"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0 scale-75"
|
||||
>
|
||||
<UIcon
|
||||
v-if="themeId === opt.id"
|
||||
name="i-heroicons-check-circle-solid"
|
||||
class="h-6 w-6 shrink-0 text-[var(--brand)]"
|
||||
/>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<!-- Gradient preview bar -->
|
||||
<div
|
||||
class="mt-4 h-8 overflow-hidden rounded-lg bg-gradient-to-r"
|
||||
:class="themeGradients[opt.id]"
|
||||
/>
|
||||
|
||||
<!-- Component preview (scoped to this theme) -->
|
||||
<div
|
||||
class="mt-3 rounded-lg border border-[var(--sidebar-border)] bg-[var(--page-bg)] p-3"
|
||||
:data-theme="opt.id"
|
||||
>
|
||||
<div class="space-y-3">
|
||||
<!-- Buttons row -->
|
||||
<div>
|
||||
<p class="mb-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Buttons</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<UButton size="xs" color="primary">Primary</UButton>
|
||||
<UButton size="xs" color="primary" variant="soft">Soft</UButton>
|
||||
<UButton size="xs" color="primary" variant="outline">Outline</UButton>
|
||||
<UButton size="xs" color="neutral" variant="ghost">Ghost</UButton>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Input preview -->
|
||||
<div>
|
||||
<p class="mb-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Input</p>
|
||||
<div class="max-w-[200px]">
|
||||
<UInput size="xs" placeholder="Search policies..." icon="i-heroicons-magnifying-glass" disabled />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Badges row -->
|
||||
<div>
|
||||
<p class="mb-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Badges</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<UBadge color="primary" variant="soft" size="xs">Active</UBadge>
|
||||
<UBadge color="success" variant="soft" size="xs">Bound</UBadge>
|
||||
<UBadge color="warning" variant="soft" size="xs">Pending</UBadge>
|
||||
<UBadge color="error" variant="soft" size="xs">Overdue</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Extra info -->
|
||||
<div class="rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-4 shadow-sm">
|
||||
<div class="flex gap-3">
|
||||
<UIcon name="i-heroicons-information-circle" class="mt-0.5 h-5 w-5 shrink-0 text-[var(--brand)]" />
|
||||
<div class="text-sm text-[var(--text-muted)]">
|
||||
<p>
|
||||
Theme applies instantly to all pages including sidebar navigation, cards, inputs, buttons, badges, and KPI panels.
|
||||
You can also quickly switch themes from the
|
||||
<UIcon name="i-heroicons-swatch" class="inline h-3.5 w-3.5" />
|
||||
icon in the top bar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
55
app/components/home/DashboardWidgetBlocks.vue
Normal file
55
app/components/home/DashboardWidgetBlocks.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import type { DashboardWidgetId } from '~/composables/useDashboardHomeWidgets'
|
||||
|
||||
const props = defineProps<{
|
||||
widgetOrder: DashboardWidgetId[]
|
||||
widgets: Record<DashboardWidgetId, boolean>
|
||||
layoutUnlocked: boolean
|
||||
draggingWidget: DashboardWidgetId | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
dragStart: [wid: DashboardWidgetId, e: DragEvent]
|
||||
dragEnd: []
|
||||
drop: [wid: DashboardWidgetId, e: DragEvent]
|
||||
}>()
|
||||
|
||||
function shellClass(wid: DashboardWidgetId) {
|
||||
return [
|
||||
props.layoutUnlocked ? 'rounded-2xl ring-1 ring-dashed ring-[var(--brand-soft)]/50' : '',
|
||||
props.draggingWidget === wid ? 'opacity-[0.58]' : ''
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto max-w-6xl space-y-10">
|
||||
<template v-for="wid in widgetOrder" :key="'dash-' + wid">
|
||||
<section
|
||||
v-show="widgets[wid]"
|
||||
:class="shellClass(wid)"
|
||||
@dragover.prevent
|
||||
@drop.prevent="emit('drop', wid, $event)"
|
||||
>
|
||||
<div class="flex items-start gap-1 sm:gap-3">
|
||||
<div v-if="layoutUnlocked" class="flex shrink-0 flex-col pt-1">
|
||||
<button
|
||||
type="button"
|
||||
draggable="true"
|
||||
class="select-none cursor-grab rounded-lg border border-[var(--card-border)]/90 bg-[var(--surface)] p-2 text-[var(--text-muted)] shadow-sm hover:bg-[var(--badge-muted-bg)] active:cursor-grabbing"
|
||||
tabindex="-1"
|
||||
aria-label="Drag to reorder section"
|
||||
@dragstart.stop="emit('dragStart', wid, $event)"
|
||||
@dragend="emit('dragEnd')"
|
||||
>
|
||||
<UIcon name="i-heroicons-bars-3" class="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<slot :name="wid" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
439
app/components/layout/AppCommandSearch.vue
Normal file
439
app/components/layout/AppCommandSearch.vue
Normal file
@@ -0,0 +1,439 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* Global command palette — searches customers, policies, claims, and app pages.
|
||||
* Keyboard: Ctrl/Cmd+K to focus, Escape to close, ↑↓ to navigate, Enter to go.
|
||||
*/
|
||||
import { MOCK_CUSTOMERS, fmtMoney } from '~/data/mock-customers'
|
||||
|
||||
const router = useRouter()
|
||||
const open = ref(false)
|
||||
const q = ref('')
|
||||
const inputRef = ref<HTMLElement | null>(null)
|
||||
const activeIndex = ref(-1)
|
||||
|
||||
/* ── Build searchable records from mock data ── */
|
||||
|
||||
type SearchHit = {
|
||||
id: string
|
||||
kind: 'customer' | 'policy' | 'claim' | 'page'
|
||||
icon: string
|
||||
title: string
|
||||
meta: string
|
||||
detail?: string
|
||||
to: string
|
||||
}
|
||||
|
||||
const allRecords = computed<SearchHit[]>(() => {
|
||||
const hits: SearchHit[] = []
|
||||
|
||||
for (const c of MOCK_CUSTOMERS) {
|
||||
// Customer record
|
||||
hits.push({
|
||||
id: `cust-${c.id}`,
|
||||
kind: 'customer',
|
||||
icon: 'i-heroicons-user',
|
||||
title: c.name,
|
||||
meta: `${c.type} · ${c.documentId}`,
|
||||
detail: `${c.policies.length} policies · ${fmtMoney(c.policies.reduce((s, p) => s + p.premium, 0))}/yr · Agent: ${c.agent}`,
|
||||
to: `/customers/${c.id}`
|
||||
})
|
||||
|
||||
// Each policy
|
||||
for (const p of c.policies) {
|
||||
hits.push({
|
||||
id: `pol-${p.id}`,
|
||||
kind: 'policy',
|
||||
icon: p.icon,
|
||||
title: p.id,
|
||||
meta: `${p.line} · ${p.carrier} · ${c.name}`,
|
||||
detail: p.product,
|
||||
to: `/customers/${c.id}`
|
||||
})
|
||||
}
|
||||
|
||||
// Each claim
|
||||
for (const cl of c.claims) {
|
||||
hits.push({
|
||||
id: `claim-${cl.id}`,
|
||||
kind: 'claim',
|
||||
icon: 'i-heroicons-shield-exclamation',
|
||||
title: cl.id,
|
||||
meta: `${cl.type} · ${cl.status} · ${c.name}`,
|
||||
detail: `Policy ${cl.policy} · $${cl.amount.toLocaleString()}`,
|
||||
to: `/customers/${c.id}`
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return hits
|
||||
})
|
||||
|
||||
/* ── App pages / destinations ── */
|
||||
const APP_PAGES: SearchHit[] = [
|
||||
{ id: 'p-home', kind: 'page', icon: 'i-heroicons-squares-2x2', title: 'My Dashboard', meta: 'Home', to: '/' },
|
||||
{ id: 'p-calendar', kind: 'page', icon: 'i-heroicons-calendar-days', title: 'Calendar', meta: 'Agenda & reminders', to: '/calendar' },
|
||||
|
||||
// Quotes
|
||||
{ id: 'p-quotes', kind: 'page', icon: 'i-heroicons-calculator', title: 'Quotes Overview', meta: 'Quotes', to: '/quotes' },
|
||||
{ id: 'p-quotes-auto', kind: 'page', icon: 'i-heroicons-truck', title: 'Auto Quotes', meta: 'Quotes · Motor & fleet', to: '/quotes/auto' },
|
||||
{ id: 'p-quotes-health', kind: 'page', icon: 'i-heroicons-heart', title: 'Health Quotes', meta: 'Quotes · Collective & individual', to: '/quotes/health' },
|
||||
{ id: 'p-quotes-life', kind: 'page', icon: 'i-heroicons-shield-check', title: 'Life Quotes', meta: 'Quotes · Individual & corporate', to: '/quotes/life' },
|
||||
{ id: 'p-quotes-risk', kind: 'page', icon: 'i-heroicons-building-office-2', title: 'General Risk', meta: 'Quotes · Liability & specialty', to: '/quotes/general-risk' },
|
||||
|
||||
// Sales
|
||||
{ id: 'p-ql', kind: 'page', icon: 'i-heroicons-bolt', title: 'Quick Lead', meta: 'Sales · Fast lead capture', to: '/sales/quick-lead' },
|
||||
{ id: 'p-pipeline', kind: 'page', icon: 'i-heroicons-funnel', title: 'Sales Pipeline', meta: 'Sales · Kanban board', to: '/onboarding' },
|
||||
{ id: 'p-solicitud', kind: 'page', icon: 'i-heroicons-document-text', title: 'New Solicitud', meta: 'Sales · Onboarding intake', to: '/onboarding/solicitud' },
|
||||
{ id: 'p-emissions', kind: 'page', icon: 'i-heroicons-paper-airplane', title: 'Emissions Review', meta: 'Sales · QA & carrier submit', to: '/onboarding/emissions' },
|
||||
{ id: 'p-nombra', kind: 'page', icon: 'i-heroicons-document-arrow-up', title: 'Nombramiento', meta: 'Sales · Broker-of-record transfer', to: '/onboarding/policy-upload/new' },
|
||||
|
||||
// Operations
|
||||
{ id: 'p-customers', kind: 'page', icon: 'i-heroicons-users', title: 'Customers', meta: 'Operations · CRM', to: '/customers' },
|
||||
{ id: 'p-new-customer', kind: 'page', icon: 'i-heroicons-user-plus', title: 'New Customer', meta: 'Operations · Registration', to: '/customers/new' },
|
||||
{ id: 'p-policies', kind: 'page', icon: 'i-heroicons-briefcase', title: 'Policies', meta: 'Operations · Book of business', to: '/policies' },
|
||||
|
||||
// Workstations
|
||||
{ id: 'p-collectivos', kind: 'page', icon: 'i-heroicons-user-group', title: 'Collectivos', meta: 'Workstations · Group management', to: '/workstation/collectivos' },
|
||||
{ id: 'p-collections', kind: 'page', icon: 'i-heroicons-banknotes', title: 'Collections', meta: 'Workstations', to: '/workstation/collections' },
|
||||
{ id: 'p-claims-ws', kind: 'page', icon: 'i-heroicons-shield-exclamation', title: 'Claims', meta: 'Workstations', to: '/workstation/claims' },
|
||||
{ id: 'p-renewals', kind: 'page', icon: 'i-heroicons-arrow-path', title: 'Renewals', meta: 'Workstations', to: '/workstation/renewals' },
|
||||
{ id: 'p-cs', kind: 'page', icon: 'i-heroicons-chat-bubble-left-right', title: 'Customer Service', meta: 'Workstations', to: '/workstation/customer-service' },
|
||||
{ id: 'p-sales-factory', kind: 'page', icon: 'i-heroicons-rocket-launch', title: 'Sales Factory', meta: 'AI Tools · Lead gen & cross-sell', to: '/ai-tools/sales-factory' },
|
||||
{ id: 'p-facturacion', kind: 'page', icon: 'i-heroicons-document-text', title: 'Facturación', meta: 'Workstations · Invoicing', to: '/workstation/facturacion' },
|
||||
|
||||
// AI Tools
|
||||
{ id: 'p-comparator', kind: 'page', icon: 'i-heroicons-scale', title: 'Policy Comparator', meta: 'AI Tools', to: '/ai-tools/policy-comparator' },
|
||||
{ id: 'p-email', kind: 'page', icon: 'i-heroicons-envelope', title: 'Email Writer', meta: 'AI Tools', to: '/ai-tools/email-writer' },
|
||||
{ id: 'p-case', kind: 'page', icon: 'i-heroicons-light-bulb', title: 'Case Assistant', meta: 'AI Tools', to: '/ai-tools/case-assistant' },
|
||||
|
||||
// Reports
|
||||
{ id: 'p-production', kind: 'page', icon: 'i-heroicons-chart-bar', title: 'Production Report', meta: 'Reports & Analysis', to: '/analysis/production' },
|
||||
{ id: 'p-commissions', kind: 'page', icon: 'i-heroicons-currency-dollar', title: 'Commissions', meta: 'Reports & Analysis', to: '/analysis/commissions' },
|
||||
{ id: 'p-claims-report', kind: 'page', icon: 'i-heroicons-chart-pie', title: 'Claims Report', meta: 'Reports & Analysis', to: '/analysis/claims' },
|
||||
|
||||
// Settings
|
||||
{ id: 'p-account', kind: 'page', icon: 'i-heroicons-user-circle', title: 'My Account', meta: 'Settings · Profile & theme', to: '/account' },
|
||||
{ id: 'p-settings', kind: 'page', icon: 'i-heroicons-cog-6-tooth', title: 'Software Settings', meta: 'Settings', to: '/settings' },
|
||||
{ id: 'p-agents', kind: 'page', icon: 'i-heroicons-user-group', title: 'Agents & Commissions', meta: 'Settings · Producer management', to: '/settings/agents' },
|
||||
{ id: 'p-org', kind: 'page', icon: 'i-heroicons-building-office', title: 'Organization', meta: 'Settings · Company & logo', to: '/settings/organization' },
|
||||
{ id: 'p-forms', kind: 'page', icon: 'i-heroicons-clipboard-document-list', title: 'Forms Library', meta: 'Settings · Insurer forms', to: '/settings/forms' },
|
||||
{ id: 'p-providers', kind: 'page', icon: 'i-heroicons-building-storefront', title: 'Providers', meta: 'Settings · Carrier setup', to: '/settings/providers' },
|
||||
{ id: 'p-permissions', kind: 'page', icon: 'i-heroicons-lock-closed', title: 'Permissions', meta: 'Settings · Roles & access', to: '/settings/permissions' },
|
||||
|
||||
// Tasks
|
||||
{ id: 'p-tasks', kind: 'page', icon: 'i-heroicons-clipboard-document-check', title: 'Tasks', meta: 'Work management', to: '/tasks' },
|
||||
]
|
||||
|
||||
/* ── Search filtering ── */
|
||||
const needle = computed(() => q.value.trim().toLowerCase())
|
||||
|
||||
const filteredRecords = computed(() => {
|
||||
if (!needle.value) return []
|
||||
const n = needle.value
|
||||
return allRecords.value.filter(
|
||||
(x) =>
|
||||
x.title.toLowerCase().includes(n) ||
|
||||
x.meta.toLowerCase().includes(n) ||
|
||||
(x.detail?.toLowerCase().includes(n) ?? false)
|
||||
).slice(0, 8)
|
||||
})
|
||||
|
||||
const filteredPages = computed(() => {
|
||||
if (!needle.value) return APP_PAGES.slice(0, 6) // show top pages when empty
|
||||
const n = needle.value
|
||||
return APP_PAGES.filter(
|
||||
(x) =>
|
||||
x.title.toLowerCase().includes(n) ||
|
||||
x.meta.toLowerCase().includes(n)
|
||||
).slice(0, 8)
|
||||
})
|
||||
|
||||
const allFiltered = computed(() => [...filteredRecords.value, ...filteredPages.value])
|
||||
|
||||
/* ── Keyboard navigation ── */
|
||||
function navigate(hit: SearchHit) {
|
||||
open.value = false
|
||||
q.value = ''
|
||||
activeIndex.value = -1
|
||||
router.push(hit.to)
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (!open.value) return
|
||||
|
||||
const total = allFiltered.value.length
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
activeIndex.value = (activeIndex.value + 1) % Math.max(total, 1)
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault()
|
||||
activeIndex.value = activeIndex.value <= 0 ? total - 1 : activeIndex.value - 1
|
||||
} else if (e.key === 'Enter' && activeIndex.value >= 0 && activeIndex.value < total) {
|
||||
e.preventDefault()
|
||||
navigate(allFiltered.value[activeIndex.value]!)
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault()
|
||||
open.value = false
|
||||
activeIndex.value = -1
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Global Cmd/Ctrl+K ── */
|
||||
function onGlobalKey(e: KeyboardEvent) {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault()
|
||||
open.value = true
|
||||
nextTick(() => {
|
||||
const el = inputRef.value
|
||||
if (el) {
|
||||
const input = el.querySelector('input') ?? (el as HTMLInputElement)
|
||||
input?.focus()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Click outside ── */
|
||||
const containerRef = ref<HTMLElement | null>(null)
|
||||
function onDocClick(e: MouseEvent) {
|
||||
const el = containerRef.value
|
||||
if (!el || !open.value) return
|
||||
if (!el.contains(e.target as Node)) {
|
||||
open.value = false
|
||||
activeIndex.value = -1
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', onDocClick)
|
||||
document.addEventListener('keydown', onGlobalKey)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', onDocClick)
|
||||
document.removeEventListener('keydown', onGlobalKey)
|
||||
})
|
||||
|
||||
watch(q, () => {
|
||||
open.value = true
|
||||
activeIndex.value = -1
|
||||
})
|
||||
|
||||
/* ── Kind colors ── */
|
||||
const kindColor: Record<string, string> = {
|
||||
customer: '#01696f',
|
||||
policy: '#7c3aed',
|
||||
claim: '#c13838',
|
||||
page: '#8a8a86',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="containerRef" class="relative w-full max-w-xl min-w-0 flex-1">
|
||||
<div ref="inputRef">
|
||||
<UInput
|
||||
v-model="q"
|
||||
icon="i-heroicons-magnifying-glass"
|
||||
placeholder="Search customers, policies, pages… (⌘K)"
|
||||
class="w-full"
|
||||
@focus="open = true"
|
||||
@keydown="onKeydown"
|
||||
/>
|
||||
</div>
|
||||
<Transition
|
||||
enter-active-class="transition duration-150 ease-out"
|
||||
enter-from-class="opacity-0 translate-y-1"
|
||||
enter-to-class="opacity-100 translate-y-0"
|
||||
leave-active-class="transition duration-100 ease-in"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div
|
||||
v-show="open"
|
||||
class="cs-dropdown"
|
||||
>
|
||||
<div class="max-h-[min(70vh,460px)] overflow-y-auto">
|
||||
<!-- Records section (customers, policies, claims) -->
|
||||
<template v-if="filteredRecords.length > 0">
|
||||
<div class="cs-section-head">
|
||||
<span>Records</span>
|
||||
<span class="cs-section-count">{{ filteredRecords.length }}</span>
|
||||
</div>
|
||||
<ul class="py-1">
|
||||
<li v-for="(r, i) in filteredRecords" :key="r.id">
|
||||
<button
|
||||
type="button"
|
||||
class="cs-hit"
|
||||
:class="activeIndex === i ? 'cs-hit-active' : ''"
|
||||
@click="navigate(r)"
|
||||
@mouseenter="activeIndex = i"
|
||||
>
|
||||
<div class="cs-hit-icon" :style="`color: ${kindColor[r.kind] || '#8a8a86'}`">
|
||||
<UIcon :name="r.icon" style="width: 16px; height: 16px;" />
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="truncate text-[13px] font-medium text-[var(--text-primary)]">{{ r.title }}</p>
|
||||
<span class="cs-kind-badge" :style="`background: ${kindColor[r.kind]}15; color: ${kindColor[r.kind]}`">
|
||||
{{ r.kind }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="truncate text-[11px] text-[var(--text-muted)]">{{ r.meta }}</p>
|
||||
<p v-if="r.detail" class="truncate text-[11px] text-[var(--text-muted)] opacity-70">{{ r.detail }}</p>
|
||||
</div>
|
||||
<UIcon name="i-heroicons-arrow-right" class="shrink-0 opacity-30" style="width: 12px; height: 12px;" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<!-- No record results message -->
|
||||
<template v-if="needle && filteredRecords.length === 0">
|
||||
<div class="cs-section-head">
|
||||
<span>Records</span>
|
||||
</div>
|
||||
<p class="px-4 py-3 text-[12px] text-[var(--text-muted)]">
|
||||
No customers, policies, or claims match "{{ q.trim() }}"
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<!-- Pages / Go to section -->
|
||||
<template v-if="filteredPages.length > 0">
|
||||
<div class="cs-section-head" :class="filteredRecords.length > 0 ? 'cs-section-border' : ''">
|
||||
<span>{{ needle ? 'Pages' : 'Quick access' }}</span>
|
||||
</div>
|
||||
<ul class="py-1 pb-2">
|
||||
<li v-for="(a, ai) in filteredPages" :key="a.id">
|
||||
<button
|
||||
type="button"
|
||||
class="cs-hit"
|
||||
:class="activeIndex === filteredRecords.length + ai ? 'cs-hit-active' : ''"
|
||||
@click="navigate(a)"
|
||||
@mouseenter="activeIndex = filteredRecords.length + ai"
|
||||
>
|
||||
<div class="cs-hit-icon" style="color: #8a8a86;">
|
||||
<UIcon :name="a.icon" style="width: 16px; height: 16px;" />
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-[13px] text-[var(--text-primary)]">{{ a.title }}</p>
|
||||
<p class="truncate text-[11px] text-[var(--text-muted)]">{{ a.meta }}</p>
|
||||
</div>
|
||||
<UIcon name="i-heroicons-arrow-top-right-on-square" class="shrink-0 opacity-30" style="width: 12px; height: 12px;" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<!-- Keyboard hint -->
|
||||
<div class="cs-footer">
|
||||
<span class="cs-kbd">↑↓</span> navigate
|
||||
<span class="cs-kbd">↵</span> go
|
||||
<span class="cs-kbd">esc</span> close
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cs-dropdown {
|
||||
position: absolute;
|
||||
left: 0; right: 0;
|
||||
top: calc(100% + 6px);
|
||||
z-index: 50;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
background: var(--surface, #ffffff);
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.cs-section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: #8a8a86;
|
||||
}
|
||||
.cs-section-border {
|
||||
border-top: 1px solid rgba(0,0,0,0.06);
|
||||
margin-top: 2px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.cs-section-count {
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
background: rgba(0,0,0,0.05);
|
||||
color: #8a8a86;
|
||||
}
|
||||
|
||||
.cs-hit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 100ms ease;
|
||||
}
|
||||
.cs-hit:hover,
|
||||
.cs-hit-active {
|
||||
background: rgba(1,105,111,0.04);
|
||||
}
|
||||
|
||||
.cs-hit-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: rgba(0,0,0,0.03);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cs-kind-badge {
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cs-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-top: 1px solid rgba(0,0,0,0.06);
|
||||
font-size: 10px;
|
||||
color: #a0a09c;
|
||||
}
|
||||
|
||||
.cs-kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
background: rgba(0,0,0,0.03);
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
color: #8a8a86;
|
||||
}
|
||||
</style>
|
||||
339
app/components/layout/AppTopBar.vue
Normal file
339
app/components/layout/AppTopBar.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<script setup lang="ts">
|
||||
import type { AppThemeId } from '~/types/app-theme'
|
||||
import { APP_THEME_OPTIONS } from '~/types/app-theme'
|
||||
|
||||
defineProps<{
|
||||
sidebarCollapsed: boolean
|
||||
brandTitle?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
toggleSidebar: []
|
||||
refresh: []
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const isHome = computed(() => route.path === '/')
|
||||
const { themeId, applyTheme } = useAppTheme()
|
||||
|
||||
const themeIcons: Record<string, string> = {
|
||||
light: 'i-heroicons-sun',
|
||||
purple: 'i-heroicons-sparkles',
|
||||
dark: 'i-heroicons-moon',
|
||||
'dark-purple': 'i-heroicons-star',
|
||||
}
|
||||
|
||||
const userMenuOpen = ref(false)
|
||||
const userMenuRoot = ref<HTMLElement | null>(null)
|
||||
const themeMenuOpen = ref(false)
|
||||
const themeMenuRoot = ref<HTMLElement | null>(null)
|
||||
|
||||
function closeUserMenu() {
|
||||
userMenuOpen.value = false
|
||||
}
|
||||
|
||||
function onDocClick(e: MouseEvent) {
|
||||
const userEl = userMenuRoot.value
|
||||
if (userEl && userMenuOpen.value && !userEl.contains(e.target as Node)) {
|
||||
userMenuOpen.value = false
|
||||
}
|
||||
const themeEl = themeMenuRoot.value
|
||||
if (themeEl && themeMenuOpen.value && !themeEl.contains(e.target as Node)) {
|
||||
themeMenuOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => document.addEventListener('click', onDocClick))
|
||||
onUnmounted(() => document.removeEventListener('click', onDocClick))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="app-topbar">
|
||||
<!-- Left: sidebar toggle + brand -->
|
||||
<div class="flex shrink-0 items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="app-topbar-icon-btn"
|
||||
title="Show / hide sidebar"
|
||||
aria-label="Toggle sidebar"
|
||||
@click="emit('toggleSidebar')"
|
||||
>
|
||||
<UIcon :name="sidebarCollapsed ? 'i-heroicons-bars-3' : 'i-heroicons-chevron-double-left'" style="width: 16px; height: 16px;" />
|
||||
</button>
|
||||
<NuxtLink to="/" class="flex items-center gap-1.5 rounded-lg px-1.5 py-1 transition hover:opacity-80">
|
||||
<span class="text-[12px] font-medium tracking-tight text-[#a0a09c]">{{ brandTitle || 'Segur-OS' }}</span>
|
||||
<span class="rounded-sm px-0.5 py-px text-[8px] font-medium uppercase tracking-wider text-[#c0c0bc]">Beta</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Center: search (absolutely centered) -->
|
||||
<div class="app-topbar-search-wrap">
|
||||
<LayoutAppCommandSearch />
|
||||
</div>
|
||||
|
||||
<!-- Center-right: contextual actions (home page) -->
|
||||
<div v-if="isHome" class="ml-auto mr-1 hidden items-center gap-1.5 sm:flex">
|
||||
<NuxtLink to="/onboarding">
|
||||
<button type="button" class="app-topbar-action-btn">
|
||||
<UIcon name="i-heroicons-arrow-trending-up" style="width: 13px; height: 13px;" />
|
||||
Pipeline
|
||||
</button>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/sales/quick-lead">
|
||||
<button type="button" class="app-topbar-action-btn">
|
||||
<UIcon name="i-heroicons-bolt" style="width: 13px; height: 13px;" />
|
||||
Quick Lead
|
||||
</button>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/quotes">
|
||||
<button type="button" class="app-topbar-action-btn app-topbar-action-primary">
|
||||
<UIcon name="i-heroicons-document-text" style="width: 13px; height: 13px;" />
|
||||
New quote
|
||||
</button>
|
||||
</NuxtLink>
|
||||
<span class="mx-0.5 h-3 w-px" style="background: rgba(0,0,0,0.06);" />
|
||||
</div>
|
||||
|
||||
<!-- Right: actions -->
|
||||
<div class="flex shrink-0 items-center gap-1" :class="isHome ? '' : 'ml-auto'">
|
||||
<button
|
||||
type="button"
|
||||
class="app-topbar-icon-btn hidden sm:inline-flex"
|
||||
title="Refresh data"
|
||||
aria-label="Refresh"
|
||||
@click="emit('refresh')"
|
||||
>
|
||||
<UIcon name="i-heroicons-arrow-path" style="width: 16px; height: 16px;" />
|
||||
</button>
|
||||
|
||||
<!-- Quick theme switcher -->
|
||||
<div ref="themeMenuRoot" class="relative">
|
||||
<button
|
||||
type="button"
|
||||
class="app-topbar-icon-btn"
|
||||
title="Switch theme"
|
||||
aria-label="Theme"
|
||||
@click.stop="themeMenuOpen = !themeMenuOpen"
|
||||
>
|
||||
<UIcon :name="themeIcons[themeId] ?? 'i-heroicons-swatch'" style="width: 16px; height: 16px;" />
|
||||
</button>
|
||||
<Transition
|
||||
enter-active-class="transition duration-150 ease-out"
|
||||
enter-from-class="opacity-0 scale-95 translate-y-1"
|
||||
enter-to-class="opacity-100 scale-100 translate-y-0"
|
||||
leave-active-class="transition duration-100 ease-in"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0 scale-95"
|
||||
>
|
||||
<div
|
||||
v-show="themeMenuOpen"
|
||||
class="absolute right-0 top-[calc(100%+8px)] z-50 w-52 overflow-hidden rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] py-1.5 shadow-xl ring-1 ring-black/5"
|
||||
>
|
||||
<p class="px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Theme</p>
|
||||
<button
|
||||
v-for="opt in APP_THEME_OPTIONS"
|
||||
:key="opt.id"
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm transition hover:bg-[var(--brand-faint)]"
|
||||
:class="themeId === opt.id ? 'text-[var(--brand)] font-medium' : 'text-[var(--text-primary)]'"
|
||||
@click="applyTheme(opt.id as AppThemeId); themeMenuOpen = false"
|
||||
>
|
||||
<UIcon :name="themeIcons[opt.id]" class="h-4 w-4 shrink-0" :class="themeId === opt.id ? 'text-[var(--brand)]' : 'opacity-60'" />
|
||||
<span class="flex-1">{{ opt.label }}</span>
|
||||
<UIcon
|
||||
v-if="themeId === opt.id"
|
||||
name="i-heroicons-check"
|
||||
class="h-3.5 w-3.5 text-[var(--brand)]"
|
||||
/>
|
||||
</button>
|
||||
<div class="mx-3 my-1.5 border-t border-[var(--sidebar-border)]" />
|
||||
<NuxtLink
|
||||
to="/account"
|
||||
class="flex items-center gap-2.5 px-3 py-1.5 text-xs text-[var(--text-muted)] transition hover:text-[var(--brand)]"
|
||||
@click="themeMenuOpen = false"
|
||||
>
|
||||
<UIcon name="i-heroicons-cog-6-tooth" class="h-3.5 w-3.5" />
|
||||
All appearance settings
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<NuxtLink to="/settings" class="inline-flex" title="Software settings">
|
||||
<span class="app-topbar-icon-btn">
|
||||
<UIcon name="i-heroicons-cog-6-tooth" style="width: 16px; height: 16px;" />
|
||||
</span>
|
||||
</NuxtLink>
|
||||
|
||||
<span class="mx-0.5 h-3 w-px" style="background: rgba(0,0,0,0.06);" />
|
||||
|
||||
<!-- User / Account -->
|
||||
<div ref="userMenuRoot" class="relative">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex w-auto items-center gap-1 rounded-md px-1.5 py-0.5 text-[#a0a09c] transition hover:bg-[rgba(0,0,0,0.04)] hover:text-[#6b6b68]"
|
||||
aria-label="Account menu"
|
||||
:aria-expanded="userMenuOpen"
|
||||
@click.stop="userMenuOpen = !userMenuOpen"
|
||||
>
|
||||
<UIcon name="i-heroicons-user-circle" style="width: 15px; height: 15px;" />
|
||||
<span class="hidden text-[11px] font-medium lg:inline">Account</span>
|
||||
<UIcon name="i-heroicons-chevron-down" style="width: 8px; height: 8px; opacity: 0.35;" />
|
||||
</button>
|
||||
<Transition
|
||||
enter-active-class="transition duration-150 ease-out"
|
||||
enter-from-class="opacity-0 scale-95"
|
||||
enter-to-class="opacity-100 scale-100"
|
||||
leave-active-class="transition duration-100 ease-in"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div
|
||||
v-show="userMenuOpen"
|
||||
class="absolute right-0 top-[calc(100%+8px)] z-50 w-56 overflow-hidden rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] py-1 shadow-xl ring-1 ring-black/5"
|
||||
>
|
||||
<NuxtLink
|
||||
to="/account"
|
||||
class="flex items-center gap-2 px-3 py-2.5 text-sm text-[var(--text-primary)] transition hover:bg-[var(--brand-faint)]"
|
||||
@click="closeUserMenu"
|
||||
>
|
||||
<UIcon name="i-heroicons-user-circle" class="h-4 w-4 opacity-70" />
|
||||
My account
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/settings"
|
||||
class="flex items-center gap-2 px-3 py-2.5 text-sm text-[var(--text-primary)] transition hover:bg-[var(--brand-faint)]"
|
||||
@click="closeUserMenu"
|
||||
>
|
||||
<UIcon name="i-heroicons-cog-6-tooth" class="h-4 w-4 opacity-70" />
|
||||
Software settings
|
||||
</NuxtLink>
|
||||
<div class="my-1 border-t border-[var(--sidebar-border)]" />
|
||||
<div class="px-3 py-1.5">
|
||||
<p class="text-[12px] font-medium text-[var(--text-primary)]">Session (mock)</p>
|
||||
<p class="text-[11px] text-[var(--text-muted)]">broker@demo.com</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text-muted)] opacity-50 cursor-not-allowed"
|
||||
disabled
|
||||
>
|
||||
<UIcon name="i-heroicons-arrow-right-on-rectangle" class="h-4 w-4" />
|
||||
Sign out (soon)
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
height: 2.5rem;
|
||||
padding: 0 0.75rem;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
|
||||
background: var(--topbar-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.app-topbar { padding: 0 1rem; }
|
||||
}
|
||||
|
||||
.app-topbar-icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.625rem;
|
||||
height: 1.625rem;
|
||||
border-radius: 6px;
|
||||
color: #a0a09c;
|
||||
transition: color 150ms ease, background 150ms ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.app-topbar-icon-btn:hover {
|
||||
color: #6b6b68;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* ---- Contextual action buttons (home) ---- */
|
||||
.app-topbar-action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #8a8a86;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0,0,0,0.06);
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.app-topbar-action-btn:hover {
|
||||
color: var(--text-primary);
|
||||
background: rgba(0,0,0,0.03);
|
||||
border-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
.app-topbar-action-primary {
|
||||
color: #ffffff;
|
||||
background: #01696f;
|
||||
border-color: #01696f;
|
||||
}
|
||||
.app-topbar-action-primary:hover {
|
||||
color: #ffffff;
|
||||
background: #015b60;
|
||||
border-color: #015b60;
|
||||
}
|
||||
|
||||
/* ---- Centered search bar ---- */
|
||||
.app-topbar-search-wrap {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.app-topbar-search-wrap { display: block; }
|
||||
}
|
||||
|
||||
/* Search input — quiet at rest, reveals on focus */
|
||||
.app-topbar-search-wrap :deep(input) {
|
||||
border-radius: 8px !important;
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 0.75rem !important;
|
||||
height: 1.75rem;
|
||||
font-size: 0.6875rem;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05) !important;
|
||||
color: var(--text-secondary) !important;
|
||||
transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
|
||||
}
|
||||
.app-topbar-search-wrap :deep(input):focus {
|
||||
background: var(--surface) !important;
|
||||
border-color: rgba(0, 0, 0, 0.1) !important;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
/* Round the input wrapper/container */
|
||||
.app-topbar-search-wrap :deep(.relative) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.app-topbar-search-wrap :deep(> div) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
168
app/components/quotes/QuoteComparativeLayout.vue
Normal file
168
app/components/quotes/QuoteComparativeLayout.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<script setup lang="ts">
|
||||
import type { QuoteComparativeView } from '~/types/quote-view-model'
|
||||
|
||||
defineProps<{
|
||||
model: QuoteComparativeView
|
||||
}>()
|
||||
|
||||
function fmtUsd(n: number) {
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
maximumFractionDigits: 0
|
||||
}).format(n)
|
||||
}
|
||||
|
||||
function fmtDate(iso: string) {
|
||||
try {
|
||||
return new Intl.DateTimeFormat('es-PA', { dateStyle: 'long' }).format(new Date(`${iso}T12:00:00`))
|
||||
} catch {
|
||||
return iso
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="quote-comparative space-y-8 text-[var(--text-primary)]">
|
||||
<div
|
||||
class="flex flex-wrap items-start justify-between gap-4 rounded-xl border border-[var(--card-border)] bg-gradient-to-br from-[var(--surface)] to-white p-6 shadow-sm"
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--brand)]">{{ model.title }}</p>
|
||||
<h2 class="mt-1 text-2xl font-bold tracking-tight text-[var(--text-primary)]">{{ model.subtitle }}</h2>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">{{ model.tagline }}</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-[var(--brand-soft)] bg-[var(--brand-faint)] px-4 py-2 text-right text-sm">
|
||||
<p class="text-[var(--text-muted)]">Cotización</p>
|
||||
<p class="font-medium text-[var(--text-primary)]">{{ fmtDate(model.quoteDateIso) }}</p>
|
||||
<UBadge color="primary" variant="soft" class="mt-1">Válida {{ model.validDays }} días</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--surface)] shadow-sm">
|
||||
<div
|
||||
class="border-b border-[var(--brand-soft)] bg-gradient-to-r from-[var(--brand)] to-[var(--brand)] px-5 py-2 text-sm font-semibold text-white"
|
||||
>
|
||||
1 · Cliente y cotización solicitada
|
||||
</div>
|
||||
<div class="grid gap-6 p-5 md:grid-cols-2">
|
||||
<div>
|
||||
<h3 class="mb-3 text-xs font-bold uppercase tracking-wide text-[var(--text-muted)]">Datos del cliente</h3>
|
||||
<dl class="grid grid-cols-[8rem_1fr] gap-x-3 gap-y-2 text-sm">
|
||||
<dt class="text-[var(--text-muted)]">Nombre</dt>
|
||||
<dd class="font-medium">{{ model.client.name }}</dd>
|
||||
<dt class="text-[var(--text-muted)]">Edad</dt>
|
||||
<dd>{{ model.client.ageYears }} años</dd>
|
||||
<dt class="text-[var(--text-muted)]">Género</dt>
|
||||
<dd>{{ model.client.gender }}</dd>
|
||||
<dt class="text-[var(--text-muted)]">Fumador/a</dt>
|
||||
<dd>{{ model.client.smoker ? 'Sí' : 'No' }}</dd>
|
||||
<dt class="text-[var(--text-muted)]">Clasificación</dt>
|
||||
<dd>{{ model.client.riskClass }}</dd>
|
||||
<dt class="text-[var(--text-muted)]">Ocupación</dt>
|
||||
<dd>{{ model.client.occupation }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xs font-bold uppercase tracking-wide text-[var(--text-muted)]">Lo que cotizamos</h3>
|
||||
<p class="text-3xl font-bold text-[var(--text-primary)]">{{ fmtUsd(model.request.sumAssuredUsd) }}</p>
|
||||
<p class="text-sm text-[var(--text-muted)]">Suma asegurada</p>
|
||||
<p class="mt-4 text-2xl font-semibold text-[var(--brand)]">
|
||||
{{ fmtUsd(model.request.monthlyPremiumUsd) }}
|
||||
<span class="text-base font-normal text-[var(--text-muted)]">/ mes</span>
|
||||
</p>
|
||||
<p class="text-sm text-[var(--text-muted)]">
|
||||
Prima anual equivalente: {{ fmtUsd(model.request.annualPremiumUsd) }} / año
|
||||
</p>
|
||||
<dl class="mt-4 space-y-1 text-sm">
|
||||
<div class="flex justify-between gap-4">
|
||||
<dt class="text-[var(--text-muted)]">Tipo de beneficio</dt>
|
||||
<dd>{{ model.request.benefitTypeLabel }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between gap-4">
|
||||
<dt class="text-[var(--text-muted)]">Coberturas adicionales</dt>
|
||||
<dd>{{ model.request.additionalCoverageLabel }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between gap-4">
|
||||
<dt class="text-[var(--text-muted)]">Depósito inicial</dt>
|
||||
<dd>{{ model.request.initialDepositLabel }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="space-y-6">
|
||||
<h3 class="text-sm font-bold uppercase tracking-wide text-[var(--text-muted)]">
|
||||
2 · Comparativo de valores (rescate / ahorro)
|
||||
</h3>
|
||||
<div
|
||||
v-for="(row, idx) in model.carriers"
|
||||
:key="idx"
|
||||
class="overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--surface)] shadow-sm"
|
||||
>
|
||||
<div
|
||||
class="border-b px-4 py-2 text-sm font-semibold text-white"
|
||||
:class="idx % 2 === 0 ? 'bg-slate-800' : 'bg-orange-600'"
|
||||
>
|
||||
{{ row.carrierName }} · {{ row.productName }}
|
||||
</div>
|
||||
<div class="p-4 text-xs text-[var(--text-muted)]">{{ row.ratesLine }}</div>
|
||||
<div class="overflow-x-auto px-2 pb-4">
|
||||
<table class="min-w-full text-center text-xs sm:text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-[var(--card-border)] text-[var(--text-muted)]">
|
||||
<th class="px-2 py-2">Suma asegurada</th>
|
||||
<th v-for="(c, ci) in row.cells" :key="ci" class="px-2 py-2">
|
||||
{{ c.yearLabel }}
|
||||
<span class="block text-[10px] font-normal text-[var(--text-muted)] opacity-70">Edad {{ c.ageLabel }}</span>
|
||||
</th>
|
||||
<th class="px-2 py-2 text-[var(--brand)]">Destacado</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-[var(--divider)]">
|
||||
<td class="px-2 py-3 font-mono text-xs">{{ fmtUsd(row.sumAssuredUsd) }}</td>
|
||||
<td v-for="(c, ci) in row.cells" :key="ci" class="px-2 py-3 align-top">
|
||||
<span class="block text-base font-bold text-[var(--text-primary)]">{{ fmtUsd(c.guaranteed) }}</span>
|
||||
<span class="text-xs text-[var(--brand)]">{{ fmtUsd(c.projected) }}</span>
|
||||
</td>
|
||||
<td class="bg-[var(--surface)] px-3 py-3 align-top text-left text-xs text-[var(--text-primary)]">
|
||||
<p v-if="row.highlightProjectedUsd != null" class="text-lg font-bold text-[var(--text-primary)]">
|
||||
{{ fmtUsd(row.highlightProjectedUsd) }}
|
||||
</p>
|
||||
<p v-if="row.highlightNote" class="mt-1 text-[10px] text-amber-800">
|
||||
{{ row.highlightNote }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p v-if="row.footnote" class="border-t border-[var(--divider)] px-4 py-2 text-[10px] text-[var(--text-muted)]">
|
||||
{{ row.footnote }}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="rounded-xl border border-amber-200 bg-amber-50/50 p-4 text-sm">
|
||||
<p class="font-semibold text-[var(--text-primary)]">Primas acumuladas pagadas (referencia)</p>
|
||||
<div class="mt-2 flex flex-wrap gap-4 font-mono text-xs text-[var(--text-primary)]">
|
||||
<span v-for="(p, i) in model.accumulatedPremiumsUsd" :key="i">Hito {{ i + 1 }}: {{ fmtUsd(p) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden rounded-xl border border-slate-800 bg-slate-900 text-white shadow-md">
|
||||
<div class="border-b border-slate-700 px-5 py-2 text-sm font-semibold">Análisis del asesor</div>
|
||||
<div class="grid gap-4 p-5 md:grid-cols-3">
|
||||
<div
|
||||
v-for="(col, i) in model.advisorColumns"
|
||||
:key="i"
|
||||
class="rounded-lg bg-[var(--surface)]/5 p-3 text-xs leading-relaxed text-[var(--text-muted)] opacity-50"
|
||||
>
|
||||
{{ col }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
121
app/components/quotes/auto/AcceptanceStep.vue
Normal file
121
app/components/quotes/auto/AcceptanceStep.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
AUTO_COVERAGE_PLANS,
|
||||
AUTO_MARCA_OPTIONS,
|
||||
AUTO_MODELO_OPTIONS,
|
||||
AUTO_QUOTE_CARRIERS,
|
||||
AUTO_SUB_RAMO_OPTIONS
|
||||
} from '~/data/auto-quote-intake'
|
||||
import type { AutoQuoteDraft, AutoQuoteMode, AutoQuoteSegment } from '~/types/auto-quote-intake'
|
||||
|
||||
const props = defineProps<{
|
||||
draft: AutoQuoteDraft
|
||||
quoteMode: AutoQuoteMode
|
||||
segment: AutoQuoteSegment
|
||||
}>()
|
||||
|
||||
function carrierName(id: string) {
|
||||
return AUTO_QUOTE_CARRIERS.find((c) => c.id === id)?.name ?? id
|
||||
}
|
||||
|
||||
function planLabel(id: string) {
|
||||
return AUTO_COVERAGE_PLANS.find((p) => p.id === id)?.label ?? id
|
||||
}
|
||||
|
||||
const segmentLabel: Record<AutoQuoteSegment, string> = {
|
||||
individual: 'Individual',
|
||||
corporate: 'Corporate',
|
||||
fleet: 'Fleet'
|
||||
}
|
||||
|
||||
const modeLabel: Record<AutoQuoteMode, string> = {
|
||||
single: 'Single quote',
|
||||
comparative_pdf: 'Comparative PDF'
|
||||
}
|
||||
|
||||
function optLabel(opts: { label: string; value: string }[], v: string) {
|
||||
if (!v) return '—'
|
||||
return opts.find((o) => o.value === v)?.label ?? v
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<p class="text-sm text-[var(--text-muted)]">Review and send quote requests to carrier quoting inboxes.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-5 ring-1 ring-black/[0.04]">
|
||||
<div class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
|
||||
<div>
|
||||
<span class="text-[var(--text-muted)]">Intent</span>
|
||||
<p class="font-medium text-[var(--text-primary)]">{{ modeLabel[quoteMode] }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-[var(--text-muted)]">Policy type</span>
|
||||
<p class="font-medium text-[var(--text-primary)]">{{ segmentLabel[segment] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Client</p>
|
||||
<dl class="mt-2 grid gap-2 text-sm sm:grid-cols-2">
|
||||
<div>
|
||||
<dt class="text-[var(--text-muted)]">Name</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.client.fullName || '—' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[var(--text-muted)]">Email</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.client.email || '—' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[var(--text-muted)]">Phone</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.client.phone || '—' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[var(--text-muted)]">ID</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.client.documentId || '—' }}</dd>
|
||||
</div>
|
||||
<div v-if="draft.client.organizationName" class="sm:col-span-2">
|
||||
<dt class="text-[var(--text-muted)]">Organization</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.client.organizationName }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Vehicle</p>
|
||||
<p class="mt-2 text-sm text-[var(--text-primary)]">
|
||||
{{ optLabel(AUTO_MARCA_OPTIONS, draft.vehicle.marca) }} {{ optLabel(AUTO_MODELO_OPTIONS, draft.vehicle.modelo) }}
|
||||
· Plate {{ draft.vehicle.placa || '—' }} · {{ draft.vehicle.year || '—' }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-[var(--text-muted)]">
|
||||
Sub-line {{ optLabel(AUTO_SUB_RAMO_OPTIONS, draft.vehicle.subRamo) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Carriers</p>
|
||||
<ul class="mt-2 list-inside list-disc text-sm text-[var(--text-primary)]">
|
||||
<li v-for="id in draft.solicit.carrierIds" :key="id">{{ carrierName(id) }}</li>
|
||||
<li v-if="draft.solicit.carrierIds.length === 0" class="list-none text-[var(--text-muted)]">None selected</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Plans</p>
|
||||
<ul class="mt-2 list-inside list-disc text-sm text-[var(--text-primary)]">
|
||||
<li v-for="id in draft.solicit.planIds" :key="id">{{ planLabel(id) }}</li>
|
||||
<li v-if="draft.solicit.planIds.length === 0" class="list-none text-[var(--text-muted)]">None selected</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
title="What happens next"
|
||||
description="We’ll send quote requests to each carrier’s registered quoting email (configured under Settings → Providers). For comparative quotes, coverage rows follow your selected plans; when you receive pricing by email, paste figures into the comparative view."
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
154
app/components/quotes/auto/CustomerVehicleStep.vue
Normal file
154
app/components/quotes/auto/CustomerVehicleStep.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
AUTO_CLASE_OPTIONS,
|
||||
AUTO_MARCA_OPTIONS,
|
||||
AUTO_MODELO_OPTIONS,
|
||||
AUTO_RAMO_LABEL,
|
||||
AUTO_SUB_RAMO_OPTIONS,
|
||||
AUTO_USO_OPTIONS,
|
||||
AUTO_YEAR_OPTIONS
|
||||
} from '~/data/auto-quote-intake'
|
||||
import type { AutoQuoteDraft, AutoQuoteSegment } from '~/types/auto-quote-intake'
|
||||
|
||||
const props = defineProps<{
|
||||
draft: AutoQuoteDraft
|
||||
/** Null until policy type is chosen — hides org field */
|
||||
segment: AutoQuoteSegment | null
|
||||
}>()
|
||||
|
||||
const showInterfaseBadge = computed(() => props.draft.vehicle.subRamo === 'cobertura_completa')
|
||||
|
||||
const showOrganization = computed(
|
||||
() => props.segment === 'corporate' || props.segment === 'fleet'
|
||||
)
|
||||
|
||||
const inputPh =
|
||||
'w-full placeholder:text-[var(--text-muted)] placeholder:opacity-[0.55] text-[var(--text-primary)]'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-[var(--text-primary)]">Client</h2>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Contact on file for this quote — we’ll use it for status and carrier emails.</p>
|
||||
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<UFormField label="Legal name" required>
|
||||
<UInput v-model="draft.client.fullName" :class="inputPh" placeholder="As on government ID" />
|
||||
</UFormField>
|
||||
<UFormField label="Email" required>
|
||||
<UInput
|
||||
v-model="draft.client.email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
:class="inputPh"
|
||||
placeholder="name@company.com"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Phone">
|
||||
<UInput v-model="draft.client.phone" type="tel" :class="inputPh" placeholder="+593 …" />
|
||||
</UFormField>
|
||||
<UFormField label="Government ID">
|
||||
<UInput v-model="draft.client.documentId" :class="inputPh" placeholder="Cédula, passport, or RUC" />
|
||||
</UFormField>
|
||||
<UFormField v-if="showOrganization" label="Organization" class="md:col-span-2">
|
||||
<UInput v-model="draft.client.organizationName" :class="inputPh" placeholder="Company or fleet name" />
|
||||
</UFormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-8">
|
||||
<h2 class="text-lg font-semibold text-[var(--text-primary)]">Vehicle</h2>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Risk details carriers use for auto rating.</p>
|
||||
|
||||
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<UFormField label="Line">
|
||||
<UInput :model-value="AUTO_RAMO_LABEL" disabled class="w-full opacity-90" />
|
||||
</UFormField>
|
||||
<div class="relative pt-1">
|
||||
<UBadge
|
||||
v-if="showInterfaseBadge"
|
||||
color="info"
|
||||
variant="soft"
|
||||
size="xs"
|
||||
class="pointer-events-none absolute -top-0 right-0 z-[1]"
|
||||
>
|
||||
Interfase
|
||||
</UBadge>
|
||||
<UFormField label="Sub-line">
|
||||
<USelect
|
||||
v-model="draft.vehicle.subRamo"
|
||||
:items="AUTO_SUB_RAMO_OPTIONS"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
<UFormField label="Class">
|
||||
<USelect
|
||||
v-model="draft.vehicle.clase"
|
||||
:items="AUTO_CLASE_OPTIONS"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Use">
|
||||
<USelect
|
||||
v-model="draft.vehicle.uso"
|
||||
:items="AUTO_USO_OPTIONS"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<p class="mb-4 mt-8 text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Vehicle details</p>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<UFormField label="Make">
|
||||
<USelect
|
||||
v-model="draft.vehicle.marca"
|
||||
:items="AUTO_MARCA_OPTIONS"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Model">
|
||||
<USelect
|
||||
v-model="draft.vehicle.modelo"
|
||||
:items="AUTO_MODELO_OPTIONS"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="License plate">
|
||||
<UInput v-model="draft.vehicle.placa" :class="inputPh" class="font-mono uppercase" placeholder="ABC-1234" />
|
||||
</UFormField>
|
||||
<UFormField label="Year">
|
||||
<USelect
|
||||
v-model="draft.vehicle.year"
|
||||
:items="AUTO_YEAR_OPTIONS"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Capacity" description="Passengers">
|
||||
<UInput v-model="draft.vehicle.capacidadPasajeros" :class="inputPh" inputmode="numeric" placeholder="—" />
|
||||
</UFormField>
|
||||
<UFormField label="Declared value" description="USD">
|
||||
<UInput v-model="draft.vehicle.valorVehiculo" :class="inputPh" inputmode="decimal" placeholder="—" />
|
||||
</UFormField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
97
app/components/quotes/auto/SetupStep.vue
Normal file
97
app/components/quotes/auto/SetupStep.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<script setup lang="ts">
|
||||
import type { AutoQuoteDraft, AutoQuoteMode, AutoQuoteSegment } from '~/types/auto-quote-intake'
|
||||
|
||||
const props = defineProps<{
|
||||
draft: AutoQuoteDraft
|
||||
modeCards: { id: AutoQuoteMode; title: string; hint: string; icon: string }[]
|
||||
segmentCards: { id: AutoQuoteSegment; title: string; hint: string; icon: string }[]
|
||||
}>()
|
||||
|
||||
function setMode(m: AutoQuoteMode) {
|
||||
props.draft.quoteMode = m
|
||||
}
|
||||
|
||||
function setSegment(s: AutoQuoteSegment) {
|
||||
props.draft.segment = s
|
||||
}
|
||||
|
||||
/** Mount vehicle + selects after first paint — avoids blocking the main thread when the route opens */
|
||||
const showDetails = ref(false)
|
||||
onMounted(() => {
|
||||
requestAnimationFrame(() => {
|
||||
showDetails.value = true
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-10">
|
||||
<section class="space-y-4">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">How can I help?</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Single quote or comparative — same workflow; comparative opens the comparison sheet after you send requests.</p>
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<button
|
||||
v-for="card in modeCards"
|
||||
:key="card.id"
|
||||
type="button"
|
||||
class="group rounded-xl border p-5 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
|
||||
:class="
|
||||
draft.quoteMode === card.id
|
||||
? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
|
||||
: 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
|
||||
"
|
||||
@click="setMode(card.id)"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--brand-faint)] text-[var(--brand)]"
|
||||
>
|
||||
<UIcon :name="card.icon" class="h-5 w-5" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">{{ card.hint }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="space-y-4 border-t border-[var(--sidebar-border)] pt-10">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">Policy type</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Who is this policy for?</p>
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-3">
|
||||
<button
|
||||
v-for="card in segmentCards"
|
||||
:key="card.id"
|
||||
type="button"
|
||||
class="rounded-xl border p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
|
||||
:class="
|
||||
draft.segment === card.id
|
||||
? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
|
||||
: 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
|
||||
"
|
||||
@click="setSegment(card.id)"
|
||||
>
|
||||
<UIcon :name="card.icon" class="h-7 w-7 text-[var(--brand)]" />
|
||||
<p class="mt-2 font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
|
||||
<p class="mt-0.5 text-xs text-[var(--text-muted)]">{{ card.hint }}</p>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="border-t border-[var(--sidebar-border)] pt-10">
|
||||
<QuotesAutoCustomerVehicleStep v-if="showDetails" :draft="draft" :segment="draft.segment" />
|
||||
<div
|
||||
v-else
|
||||
class="min-h-[14rem] rounded-xl bg-[var(--sidebar-border)]/25 animate-pulse"
|
||||
aria-busy="true"
|
||||
aria-label="Loading form"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
97
app/components/quotes/auto/SolicitQuotesStep.vue
Normal file
97
app/components/quotes/auto/SolicitQuotesStep.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<script setup lang="ts">
|
||||
import { AUTO_COVERAGE_PLANS, AUTO_QUOTE_CARRIERS } from '~/data/auto-quote-intake'
|
||||
import type { AutoQuoteDraft, AutoQuoteMode } from '~/types/auto-quote-intake'
|
||||
|
||||
const props = defineProps<{
|
||||
draft: AutoQuoteDraft
|
||||
quoteMode: AutoQuoteMode
|
||||
}>()
|
||||
|
||||
function setCarrier(id: string, checked: boolean) {
|
||||
const xs = props.draft.solicit.carrierIds
|
||||
if (checked && !xs.includes(id)) xs.push(id)
|
||||
if (!checked) {
|
||||
const i = xs.indexOf(id)
|
||||
if (i !== -1) xs.splice(i, 1)
|
||||
}
|
||||
}
|
||||
|
||||
function carrierChecked(id: string) {
|
||||
return props.draft.solicit.carrierIds.includes(id)
|
||||
}
|
||||
|
||||
function setPlan(id: string, checked: boolean) {
|
||||
const xs = props.draft.solicit.planIds
|
||||
if (checked && !xs.includes(id)) xs.push(id)
|
||||
if (!checked) {
|
||||
const i = xs.indexOf(id)
|
||||
if (i !== -1) xs.splice(i, 1)
|
||||
}
|
||||
}
|
||||
|
||||
function planChecked(id: string) {
|
||||
return props.draft.solicit.planIds.includes(id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<p class="text-sm text-[var(--text-muted)]">
|
||||
Choose carriers (quoting emails are maintained per provider in Settings). Pick coverage packages to request.
|
||||
</p>
|
||||
<UAlert
|
||||
v-if="quoteMode === 'comparative_pdf'"
|
||||
color="info"
|
||||
variant="soft"
|
||||
class="mt-4"
|
||||
title="Comparative quote"
|
||||
description="We’ll prepare side-by-side comparisons using your predetermined plans. When premiums arrive by email, you can enter them into the comparative sheet."
|
||||
/>
|
||||
<UAlert
|
||||
v-else
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
class="mt-4"
|
||||
title="Single quote"
|
||||
description="We’ll email each selected carrier’s quoting address on file. Attach the same vehicle and coverage ask in each request."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Insurance companies</p>
|
||||
<ul class="mt-3 divide-y divide-[var(--sidebar-border)]">
|
||||
<li
|
||||
v-for="c in AUTO_QUOTE_CARRIERS"
|
||||
:key="c.id"
|
||||
class="flex flex-wrap items-start justify-between gap-3 py-3 first:pt-0"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="carrierChecked(c.id)"
|
||||
:label="c.name"
|
||||
@update:model-value="(v: boolean) => setCarrier(c.id, v)"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-muted)]">{{ c.detail }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Coverages / plans</p>
|
||||
<ul class="mt-3 space-y-3">
|
||||
<li
|
||||
v-for="p in AUTO_COVERAGE_PLANS"
|
||||
:key="p.id"
|
||||
class="flex flex-col gap-1 rounded-lg border border-[var(--sidebar-border)]/80 bg-[var(--page-bg)]/50 p-3 sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="planChecked(p.id)"
|
||||
:label="p.label"
|
||||
@update:model-value="(v: boolean) => setPlan(p.id, v)"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-muted)] sm:text-right">{{ p.hint }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
127
app/components/quotes/health/AcceptanceStep.vue
Normal file
127
app/components/quotes/health/AcceptanceStep.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<script setup lang="ts">
|
||||
import { HEALTH_COVERAGE_PLANS, HEALTH_QUOTE_CARRIERS } from '~/data/health-quote-intake'
|
||||
import type { HealthQuoteDraft, HealthQuoteMode, HealthQuoteSegment } from '~/types/health-quote-intake'
|
||||
|
||||
const props = defineProps<{
|
||||
draft: HealthQuoteDraft
|
||||
quoteMode: HealthQuoteMode
|
||||
segment: HealthQuoteSegment
|
||||
}>()
|
||||
|
||||
const { quoteRequestEmailEnabled } = useQuoteRequestEmailEnabled()
|
||||
|
||||
function carrierName(id: string) {
|
||||
return HEALTH_QUOTE_CARRIERS.find((c) => c.id === id)?.name ?? id
|
||||
}
|
||||
|
||||
function planLabel(id: string) {
|
||||
return HEALTH_COVERAGE_PLANS.find((p) => p.id === id)?.label ?? id
|
||||
}
|
||||
|
||||
const segmentLabel: Record<HealthQuoteSegment, string> = {
|
||||
individual: 'Individual',
|
||||
corporate: 'Corporate',
|
||||
group: 'Group'
|
||||
}
|
||||
|
||||
const modeLabel: Record<HealthQuoteMode, string> = {
|
||||
single: 'Single quote',
|
||||
comparative_pdf: 'Comparative PDF'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<p class="text-sm text-[var(--text-muted)]">Review the health quote request before sending or saving.</p>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
v-if="!quoteRequestEmailEnabled"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
title="Provider emails are turned off"
|
||||
description="Settings → Quote requests: outbound emails disabled. This run saves the request locally (or uses table / AI pricing when connected) without emailing carriers."
|
||||
/>
|
||||
|
||||
<div class="space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-5 ring-1 ring-black/[0.04]">
|
||||
<div class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
|
||||
<div>
|
||||
<span class="text-[var(--text-muted)]">Intent</span>
|
||||
<p class="font-medium text-[var(--text-primary)]">{{ modeLabel[quoteMode] }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-[var(--text-muted)]">Policy type</span>
|
||||
<p class="font-medium text-[var(--text-primary)]">{{ segmentLabel[segment] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Subscriber</p>
|
||||
<dl class="mt-2 grid gap-2 text-sm sm:grid-cols-2">
|
||||
<div>
|
||||
<dt class="text-[var(--text-muted)]">Name</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.client.fullName || '—' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[var(--text-muted)]">Email</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.client.email || '—' }}</dd>
|
||||
</div>
|
||||
<div v-if="draft.client.organizationName" class="sm:col-span-2">
|
||||
<dt class="text-[var(--text-muted)]">Organization</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.client.organizationName }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Age & health</p>
|
||||
<dl class="mt-2 grid gap-2 text-sm sm:grid-cols-3">
|
||||
<div>
|
||||
<dt class="text-[var(--text-muted)]">Age</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.health.age || '—' }}</dd>
|
||||
</div>
|
||||
<div v-if="draft.health.preexistingConditions" class="sm:col-span-2">
|
||||
<dt class="text-[var(--text-muted)]">Preexisting conditions</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.health.preexistingDetails || 'Yes (no details provided)' }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Coverage</p>
|
||||
<p class="mt-2 text-sm text-[var(--text-primary)]">
|
||||
Area {{ draft.health.coverageArea || '—' }} · Network {{ draft.health.networkTier || '—' }} · Deductible
|
||||
{{ draft.health.deductible || '—' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Carriers</p>
|
||||
<ul class="mt-2 list-inside list-disc text-sm text-[var(--text-primary)]">
|
||||
<li v-for="id in draft.solicit.carrierIds" :key="id">{{ carrierName(id) }}</li>
|
||||
<li v-if="draft.solicit.carrierIds.length === 0" class="list-none text-[var(--text-muted)]">None selected</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Plans</p>
|
||||
<ul class="mt-2 list-inside list-disc text-sm text-[var(--text-primary)]">
|
||||
<li v-for="id in draft.solicit.planIds" :key="id">{{ planLabel(id) }}</li>
|
||||
<li v-if="draft.solicit.planIds.length === 0" class="list-none text-[var(--text-muted)]">None selected</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
title="What happens next"
|
||||
:description="
|
||||
quoteRequestEmailEnabled
|
||||
? 'We can queue emails to each carrier’s quoting address on file (Settings → Providers), unless your tenant uses published tables or AI instead.'
|
||||
: 'No outbound provider emails for this tenant — capture the request here and price via tables, APIs, or agentic workflows.'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
250
app/components/quotes/health/SetupStep.vue
Normal file
250
app/components/quotes/health/SetupStep.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
HEALTH_AGE_BAND_REFERENCE,
|
||||
HEALTH_COVERAGE_AREA,
|
||||
HEALTH_DEDUCTIBLE,
|
||||
HEALTH_NETWORK_TIER,
|
||||
HEALTH_QUOTE_CARRIERS
|
||||
} from '~/data/health-quote-intake'
|
||||
import type { HealthQuoteDraft, HealthQuoteMode, HealthQuoteSegment } from '~/types/health-quote-intake'
|
||||
|
||||
const props = defineProps<{
|
||||
draft: HealthQuoteDraft
|
||||
modeCards: { id: HealthQuoteMode; title: string; hint: string; icon: string }[]
|
||||
segmentCards: { id: HealthQuoteSegment; title: string; hint: string; icon: string }[]
|
||||
}>()
|
||||
|
||||
function setMode(m: HealthQuoteMode) {
|
||||
props.draft.quoteMode = m
|
||||
}
|
||||
|
||||
function setSegment(s: HealthQuoteSegment) {
|
||||
props.draft.segment = s
|
||||
}
|
||||
|
||||
const showPublishedTable = computed(() =>
|
||||
HEALTH_QUOTE_CARRIERS.some((c) => c.hasPublishedRateTable)
|
||||
)
|
||||
|
||||
const inputPh =
|
||||
'w-full placeholder:text-[var(--text-muted)] placeholder:opacity-[0.55] text-[var(--text-primary)]'
|
||||
|
||||
const showOrganization = computed(
|
||||
() => props.draft.segment === 'corporate' || props.draft.segment === 'group'
|
||||
)
|
||||
|
||||
/** Compute age from date of birth */
|
||||
watch(
|
||||
() => props.draft.health.dateOfBirth,
|
||||
(dob) => {
|
||||
if (!dob) {
|
||||
props.draft.health.age = ''
|
||||
return
|
||||
}
|
||||
const birth = new Date(dob)
|
||||
const today = new Date()
|
||||
let age = today.getFullYear() - birth.getFullYear()
|
||||
const m = today.getMonth() - birth.getMonth()
|
||||
if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--
|
||||
props.draft.health.age = String(age)
|
||||
}
|
||||
)
|
||||
|
||||
const showDetails = ref(false)
|
||||
onMounted(() => {
|
||||
requestAnimationFrame(() => {
|
||||
showDetails.value = true
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-10">
|
||||
<section class="space-y-4">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">How can I help?</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Single quote or comparative PDF — same steps; comparative opens the comparison sheet after acceptance.</p>
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<button
|
||||
v-for="card in modeCards"
|
||||
:key="card.id"
|
||||
type="button"
|
||||
class="group rounded-xl border p-5 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
|
||||
:class="
|
||||
draft.quoteMode === card.id
|
||||
? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
|
||||
: 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
|
||||
"
|
||||
@click="setMode(card.id)"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--brand-faint)] text-[var(--brand)]">
|
||||
<UIcon :name="card.icon" class="h-5 w-5" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">{{ card.hint }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="space-y-4 border-t border-[var(--sidebar-border)] pt-10">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">Policy type</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Individual, employer corporate, or group policy.</p>
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-3">
|
||||
<button
|
||||
v-for="card in segmentCards"
|
||||
:key="card.id"
|
||||
type="button"
|
||||
class="rounded-xl border p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
|
||||
:class="
|
||||
draft.segment === card.id
|
||||
? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
|
||||
: 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
|
||||
"
|
||||
@click="setSegment(card.id)"
|
||||
>
|
||||
<UIcon :name="card.icon" class="h-7 w-7 text-[var(--brand)]" />
|
||||
<p class="mt-2 font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
|
||||
<p class="mt-0.5 text-xs text-[var(--text-muted)]">{{ card.hint }}</p>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="showDetails" class="border-t border-[var(--sidebar-border)] pt-10">
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">Subscriber & contact</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Primary insured and notification email.</p>
|
||||
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<UFormField label="Legal name" required>
|
||||
<UInput v-model="draft.client.fullName" :class="inputPh" placeholder="As on ID" />
|
||||
</UFormField>
|
||||
<UFormField label="Email" required>
|
||||
<UInput v-model="draft.client.email" type="email" :class="inputPh" placeholder="name@company.com" />
|
||||
</UFormField>
|
||||
<UFormField label="Phone">
|
||||
<UInput v-model="draft.client.phone" :class="inputPh" placeholder="+593 …" />
|
||||
</UFormField>
|
||||
<UFormField label="Government ID">
|
||||
<UInput v-model="draft.client.documentId" :class="inputPh" placeholder="ID or RUC" />
|
||||
</UFormField>
|
||||
<UFormField v-if="showOrganization" label="Organization / group name" class="md:col-span-2" required>
|
||||
<UInput v-model="draft.client.organizationName" :class="inputPh" placeholder="Employer or group trust" />
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Age & health screening</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Basic information carriers use for eligibility and rate bands.</p>
|
||||
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<UFormField label="Date of birth" required>
|
||||
<UInput v-model="draft.health.dateOfBirth" type="date" :class="inputPh" />
|
||||
</UFormField>
|
||||
<UFormField label="Age">
|
||||
<UInput :model-value="draft.health.age" disabled :class="inputPh" placeholder="Auto-calculated" />
|
||||
</UFormField>
|
||||
<div />
|
||||
</div>
|
||||
<div class="mt-5 space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
|
||||
<UCheckbox v-model="draft.health.preexistingConditions" label="Preexisting medical conditions" />
|
||||
<div v-if="draft.health.preexistingConditions" class="ml-6">
|
||||
<UFormField label="Describe conditions" hint="Diabetes, hypertension, cardiac history, etc.">
|
||||
<UTextarea
|
||||
v-model="draft.health.preexistingDetails"
|
||||
:class="inputPh"
|
||||
placeholder="List conditions and approximate diagnosis dates"
|
||||
:rows="3"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Coverage intent</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Product parameters carriers use before underwriting.</p>
|
||||
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<UFormField label="Coverage area">
|
||||
<USelect
|
||||
v-model="draft.health.coverageArea"
|
||||
:items="HEALTH_COVERAGE_AREA"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Network tier">
|
||||
<USelect
|
||||
v-model="draft.health.networkTier"
|
||||
:items="HEALTH_NETWORK_TIER"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Deductible preference">
|
||||
<USelect
|
||||
v-model="draft.health.deductible"
|
||||
:items="HEALTH_DEDUCTIBLE"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Forms</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">
|
||||
Confirm required templates are completed (uploads wire to the forms library later).
|
||||
</p>
|
||||
<div class="mt-4 space-y-3 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
|
||||
<UCheckbox v-model="draft.forms.medicalQuestionnaire" label="Medical questionnaire (declaración de salud)" />
|
||||
<UCheckbox v-model="draft.forms.beneficiaryDesignation" label="Beneficiary designation" />
|
||||
<UCheckbox
|
||||
v-model="draft.forms.groupCensus"
|
||||
label="Group census / employee roster (required for group policies)"
|
||||
:disabled="draft.segment !== 'group'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="showPublishedTable" class="mt-10">
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">Published rate reference (age bands)</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">
|
||||
Some carriers publish indicative premiums by age band. Use as a guide; final quotes may still require
|
||||
underwriting. When your tenant uses table pricing or AI instead of email, turn off outbound emails under
|
||||
Settings → Quote requests.
|
||||
</p>
|
||||
<div class="mt-4 overflow-x-auto rounded-xl border border-[var(--sidebar-border)]">
|
||||
<table class="min-w-full text-left text-sm text-[var(--text-primary)]">
|
||||
<thead class="bg-[var(--page-bg)] text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">
|
||||
<tr>
|
||||
<th class="px-3 py-2">Age band</th>
|
||||
<th class="px-3 py-2">Employee</th>
|
||||
<th class="px-3 py-2">Spouse</th>
|
||||
<th class="px-3 py-2">Child</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in HEALTH_AGE_BAND_REFERENCE" :key="row.ageBand" class="border-t border-[var(--sidebar-border)]">
|
||||
<td class="px-3 py-2 font-medium">{{ row.ageBand }}</td>
|
||||
<td class="px-3 py-2">${{ row.employee }}</td>
|
||||
<td class="px-3 py-2">${{ row.spouse }}</td>
|
||||
<td class="px-3 py-2">${{ row.children }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
v-else
|
||||
class="mt-10 min-h-[8rem] rounded-xl bg-[var(--sidebar-border)]/25 animate-pulse"
|
||||
aria-busy="true"
|
||||
aria-label="Loading"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
90
app/components/quotes/health/SolicitQuotesStep.vue
Normal file
90
app/components/quotes/health/SolicitQuotesStep.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
import { HEALTH_COVERAGE_PLANS, HEALTH_QUOTE_CARRIERS } from '~/data/health-quote-intake'
|
||||
import type { HealthQuoteDraft, HealthQuoteMode } from '~/types/health-quote-intake'
|
||||
|
||||
const props = defineProps<{
|
||||
draft: HealthQuoteDraft
|
||||
quoteMode: HealthQuoteMode
|
||||
}>()
|
||||
|
||||
function setCarrier(id: string, checked: boolean) {
|
||||
const xs = props.draft.solicit.carrierIds
|
||||
if (checked && !xs.includes(id)) xs.push(id)
|
||||
if (!checked) {
|
||||
const i = xs.indexOf(id)
|
||||
if (i !== -1) xs.splice(i, 1)
|
||||
}
|
||||
}
|
||||
|
||||
function carrierChecked(id: string) {
|
||||
return props.draft.solicit.carrierIds.includes(id)
|
||||
}
|
||||
|
||||
function setPlan(id: string, checked: boolean) {
|
||||
const xs = props.draft.solicit.planIds
|
||||
if (checked && !xs.includes(id)) xs.push(id)
|
||||
if (!checked) {
|
||||
const i = xs.indexOf(id)
|
||||
if (i !== -1) xs.splice(i, 1)
|
||||
}
|
||||
}
|
||||
|
||||
function planChecked(id: string) {
|
||||
return props.draft.solicit.planIds.includes(id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<p class="text-sm text-[var(--text-muted)]">
|
||||
Choose carriers and product shells to request. Quoting contacts live per provider in Settings.
|
||||
</p>
|
||||
<UAlert
|
||||
v-if="quoteMode === 'comparative_pdf'"
|
||||
color="info"
|
||||
variant="soft"
|
||||
class="mt-4"
|
||||
title="Comparative quote"
|
||||
description="We’ll align columns to your selected plan mix. Enter premiums from email, rate tables, or AI-assisted pricing when available."
|
||||
/>
|
||||
<UAlert v-else color="neutral" variant="soft" class="mt-4" title="Single quote" description="We’ll package one request per carrier with the same subscriber and coverage intent." />
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Carriers</p>
|
||||
<ul class="mt-3 divide-y divide-[var(--sidebar-border)]">
|
||||
<li
|
||||
v-for="c in HEALTH_QUOTE_CARRIERS"
|
||||
:key="c.id"
|
||||
class="flex flex-wrap items-start justify-between gap-3 py-3 first:pt-0"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="carrierChecked(c.id)"
|
||||
:label="c.name"
|
||||
@update:model-value="(v: boolean) => setCarrier(c.id, v)"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-muted)]">{{ c.detail }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Plans / benefit shells</p>
|
||||
<ul class="mt-3 space-y-3">
|
||||
<li
|
||||
v-for="p in HEALTH_COVERAGE_PLANS"
|
||||
:key="p.id"
|
||||
class="flex flex-col gap-1 rounded-lg border border-[var(--sidebar-border)]/80 bg-[var(--page-bg)]/50 p-3 sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="planChecked(p.id)"
|
||||
:label="p.label"
|
||||
@update:model-value="(v: boolean) => setPlan(p.id, v)"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-muted)] sm:text-right">{{ p.hint }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
149
app/components/quotes/life/AcceptanceStep.vue
Normal file
149
app/components/quotes/life/AcceptanceStep.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<script setup lang="ts">
|
||||
import { LIFE_COVERAGE_PLANS, LIFE_QUOTE_CARRIERS } from '~/data/life-quote-intake'
|
||||
import type { LifeQuoteDraft, LifeQuoteMode, LifeQuoteSegment } from '~/types/life-quote-intake'
|
||||
|
||||
const props = defineProps<{
|
||||
draft: LifeQuoteDraft
|
||||
quoteMode: LifeQuoteMode
|
||||
segment: LifeQuoteSegment
|
||||
}>()
|
||||
|
||||
const { quoteRequestEmailEnabled } = useQuoteRequestEmailEnabled()
|
||||
|
||||
function carrierName(id: string) {
|
||||
return LIFE_QUOTE_CARRIERS.find((c) => c.id === id)?.name ?? id
|
||||
}
|
||||
|
||||
function planLabel(id: string) {
|
||||
return LIFE_COVERAGE_PLANS.find((p) => p.id === id)?.label ?? id
|
||||
}
|
||||
|
||||
const segmentLabel: Record<LifeQuoteSegment, string> = {
|
||||
individual: 'Individual',
|
||||
corporate_keyman: 'Corporate / Key person',
|
||||
group: 'Group'
|
||||
}
|
||||
|
||||
const modeLabel: Record<LifeQuoteMode, string> = {
|
||||
single: 'Single quote',
|
||||
comparative_pdf: 'Comparative PDF'
|
||||
}
|
||||
|
||||
function formatAmount(val: string) {
|
||||
const n = Number(val)
|
||||
if (!n) return val || '—'
|
||||
return '$' + n.toLocaleString()
|
||||
}
|
||||
|
||||
function termLabel(val: string) {
|
||||
if (val === 'whole') return 'Whole life'
|
||||
return val ? `${val} years` : '—'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<p class="text-sm text-[var(--text-muted)]">Review the life quote request before sending or saving.</p>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
v-if="!quoteRequestEmailEnabled"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
title="Provider emails are turned off"
|
||||
description="Settings -> Quote requests: outbound emails disabled. This run saves the request locally (or uses table / AI pricing when connected) without emailing carriers."
|
||||
/>
|
||||
|
||||
<div class="space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-5 ring-1 ring-black/[0.04]">
|
||||
<div class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
|
||||
<div>
|
||||
<span class="text-[var(--text-muted)]">Intent</span>
|
||||
<p class="font-medium text-[var(--text-primary)]">{{ modeLabel[quoteMode] }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-[var(--text-muted)]">Policy type</span>
|
||||
<p class="font-medium text-[var(--text-primary)]">{{ segmentLabel[segment] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Insured person</p>
|
||||
<dl class="mt-2 grid gap-2 text-sm sm:grid-cols-2">
|
||||
<div>
|
||||
<dt class="text-[var(--text-muted)]">Name</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.client.fullName || '—' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[var(--text-muted)]">Email</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.client.email || '—' }}</dd>
|
||||
</div>
|
||||
<div v-if="draft.client.organizationName" class="sm:col-span-2">
|
||||
<dt class="text-[var(--text-muted)]">Organization</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.client.organizationName }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Age & health</p>
|
||||
<dl class="mt-2 grid gap-2 text-sm sm:grid-cols-3">
|
||||
<div>
|
||||
<dt class="text-[var(--text-muted)]">Age</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.life.age || '—' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[var(--text-muted)]">Gender</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.life.gender || '—' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[var(--text-muted)]">Smoker</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.life.smoker ? 'Yes' : 'No' }}</dd>
|
||||
</div>
|
||||
<div v-if="draft.life.preexistingConditions" class="sm:col-span-3">
|
||||
<dt class="text-[var(--text-muted)]">Preexisting conditions</dt>
|
||||
<dd class="font-medium text-[var(--text-primary)]">{{ draft.life.preexistingDetails || 'Yes (no details provided)' }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Coverage</p>
|
||||
<p class="mt-2 text-sm text-[var(--text-primary)]">
|
||||
{{ formatAmount(draft.life.coverageAmount) }} · {{ termLabel(draft.life.coverageTerm) }}
|
||||
</p>
|
||||
<p v-if="draft.life.beneficiaryName" class="mt-1 text-sm text-[var(--text-muted)]">
|
||||
Beneficiary: {{ draft.life.beneficiaryName }}
|
||||
<span v-if="draft.life.beneficiaryRelationship"> ({{ draft.life.beneficiaryRelationship }})</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Carriers</p>
|
||||
<ul class="mt-2 list-inside list-disc text-sm text-[var(--text-primary)]">
|
||||
<li v-for="id in draft.solicit.carrierIds" :key="id">{{ carrierName(id) }}</li>
|
||||
<li v-if="draft.solicit.carrierIds.length === 0" class="list-none text-[var(--text-muted)]">None selected</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-[var(--sidebar-border)] pt-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Plans</p>
|
||||
<ul class="mt-2 list-inside list-disc text-sm text-[var(--text-primary)]">
|
||||
<li v-for="id in draft.solicit.planIds" :key="id">{{ planLabel(id) }}</li>
|
||||
<li v-if="draft.solicit.planIds.length === 0" class="list-none text-[var(--text-muted)]">None selected</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
title="What happens next"
|
||||
:description="
|
||||
quoteRequestEmailEnabled
|
||||
? 'We can queue emails to each carrier\'s quoting address on file (Settings -> Providers), unless your tenant uses published tables or AI instead.'
|
||||
: 'No outbound provider emails for this tenant — capture the request here and price via tables, APIs, or agentic workflows.'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
233
app/components/quotes/life/SetupStep.vue
Normal file
233
app/components/quotes/life/SetupStep.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
LIFE_GENDER_OPTIONS,
|
||||
LIFE_COVERAGE_TERM_OPTIONS,
|
||||
LIFE_COVERAGE_AMOUNT_OPTIONS,
|
||||
LIFE_BENEFICIARY_RELATIONSHIP_OPTIONS
|
||||
} from '~/data/life-quote-intake'
|
||||
import type { LifeQuoteDraft, LifeQuoteMode, LifeQuoteSegment } from '~/types/life-quote-intake'
|
||||
|
||||
const props = defineProps<{
|
||||
draft: LifeQuoteDraft
|
||||
modeCards: { id: LifeQuoteMode; title: string; hint: string; icon: string }[]
|
||||
segmentCards: { id: LifeQuoteSegment; title: string; hint: string; icon: string }[]
|
||||
}>()
|
||||
|
||||
function setMode(m: LifeQuoteMode) {
|
||||
props.draft.quoteMode = m
|
||||
}
|
||||
|
||||
function setSegment(s: LifeQuoteSegment) {
|
||||
props.draft.segment = s
|
||||
}
|
||||
|
||||
const inputPh =
|
||||
'w-full placeholder:text-[var(--text-muted)] placeholder:opacity-[0.55] text-[var(--text-primary)]'
|
||||
|
||||
const showOrganization = computed(
|
||||
() => props.draft.segment === 'corporate_keyman' || props.draft.segment === 'group'
|
||||
)
|
||||
|
||||
/** Compute age from date of birth */
|
||||
watch(
|
||||
() => props.draft.life.dateOfBirth,
|
||||
(dob) => {
|
||||
if (!dob) {
|
||||
props.draft.life.age = ''
|
||||
return
|
||||
}
|
||||
const birth = new Date(dob)
|
||||
const today = new Date()
|
||||
let age = today.getFullYear() - birth.getFullYear()
|
||||
const m = today.getMonth() - birth.getMonth()
|
||||
if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--
|
||||
props.draft.life.age = String(age)
|
||||
}
|
||||
)
|
||||
|
||||
const showDetails = ref(false)
|
||||
onMounted(() => {
|
||||
requestAnimationFrame(() => {
|
||||
showDetails.value = true
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-10">
|
||||
<section class="space-y-4">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">How can I help?</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Single quote or comparative PDF — same steps; comparative opens the comparison sheet after acceptance.</p>
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<button
|
||||
v-for="card in modeCards"
|
||||
:key="card.id"
|
||||
type="button"
|
||||
class="group rounded-xl border p-5 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
|
||||
:class="
|
||||
draft.quoteMode === card.id
|
||||
? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
|
||||
: 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
|
||||
"
|
||||
@click="setMode(card.id)"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--brand-faint)] text-[var(--brand)]">
|
||||
<UIcon :name="card.icon" class="h-5 w-5" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">{{ card.hint }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="space-y-4 border-t border-[var(--sidebar-border)] pt-10">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">Policy type</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Individual, corporate / key person, or group policy.</p>
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-3">
|
||||
<button
|
||||
v-for="card in segmentCards"
|
||||
:key="card.id"
|
||||
type="button"
|
||||
class="rounded-xl border p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
|
||||
:class="
|
||||
draft.segment === card.id
|
||||
? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
|
||||
: 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
|
||||
"
|
||||
@click="setSegment(card.id)"
|
||||
>
|
||||
<UIcon :name="card.icon" class="h-7 w-7 text-[var(--brand)]" />
|
||||
<p class="mt-2 font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
|
||||
<p class="mt-0.5 text-xs text-[var(--text-muted)]">{{ card.hint }}</p>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="showDetails" class="border-t border-[var(--sidebar-border)] pt-10">
|
||||
<!-- Insured basic info -->
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">Insured person</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Primary insured and notification email.</p>
|
||||
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<UFormField label="Legal name" required>
|
||||
<UInput v-model="draft.client.fullName" :class="inputPh" placeholder="As on ID" />
|
||||
</UFormField>
|
||||
<UFormField label="Email" required>
|
||||
<UInput v-model="draft.client.email" type="email" :class="inputPh" placeholder="name@company.com" />
|
||||
</UFormField>
|
||||
<UFormField label="Phone">
|
||||
<UInput v-model="draft.client.phone" :class="inputPh" placeholder="+593 ..." />
|
||||
</UFormField>
|
||||
<UFormField label="Government ID">
|
||||
<UInput v-model="draft.client.documentId" :class="inputPh" placeholder="ID or RUC" />
|
||||
</UFormField>
|
||||
<UFormField v-if="showOrganization" label="Organization / group name" class="md:col-span-2" required>
|
||||
<UInput v-model="draft.client.organizationName" :class="inputPh" placeholder="Employer or group trust" />
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Age & health screening -->
|
||||
<h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Age & health screening</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Basic underwriting inputs — carriers use these to determine eligibility and rate class.</p>
|
||||
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<UFormField label="Date of birth" required>
|
||||
<UInput v-model="draft.life.dateOfBirth" type="date" :class="inputPh" />
|
||||
</UFormField>
|
||||
<UFormField label="Age">
|
||||
<UInput :model-value="draft.life.age" disabled :class="inputPh" placeholder="Auto-calculated" />
|
||||
</UFormField>
|
||||
<UFormField label="Gender" required>
|
||||
<USelect
|
||||
v-model="draft.life.gender"
|
||||
:items="LIFE_GENDER_OPTIONS"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
<div class="mt-5 space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
|
||||
<UCheckbox v-model="draft.life.smoker" label="Smoker / tobacco user (within last 12 months)" />
|
||||
<UCheckbox v-model="draft.life.preexistingConditions" label="Preexisting medical conditions" />
|
||||
<div v-if="draft.life.preexistingConditions" class="ml-6">
|
||||
<UFormField label="Describe conditions" hint="Diabetes, hypertension, cardiac history, etc.">
|
||||
<UTextarea
|
||||
v-model="draft.life.preexistingDetails"
|
||||
:class="inputPh"
|
||||
placeholder="List conditions and approximate diagnosis dates"
|
||||
:rows="3"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Coverage parameters -->
|
||||
<h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Coverage intent</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Sum assured, term, and beneficiary details.</p>
|
||||
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<UFormField label="Coverage amount" required>
|
||||
<USelect
|
||||
v-model="draft.life.coverageAmount"
|
||||
:items="LIFE_COVERAGE_AMOUNT_OPTIONS"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Coverage term" required>
|
||||
<USelect
|
||||
v-model="draft.life.coverageTerm"
|
||||
:items="LIFE_COVERAGE_TERM_OPTIONS"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Beneficiary name">
|
||||
<UInput v-model="draft.life.beneficiaryName" :class="inputPh" placeholder="Full legal name" />
|
||||
</UFormField>
|
||||
<UFormField label="Beneficiary relationship">
|
||||
<USelect
|
||||
v-model="draft.life.beneficiaryRelationship"
|
||||
:items="LIFE_BENEFICIARY_RELATIONSHIP_OPTIONS"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Forms -->
|
||||
<h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Forms</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">
|
||||
Confirm required templates are completed (uploads wire to the forms library later).
|
||||
</p>
|
||||
<div class="mt-4 space-y-3 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
|
||||
<UCheckbox v-model="draft.forms.medicalQuestionnaire" label="Medical questionnaire (declaracion de salud)" />
|
||||
<UCheckbox v-model="draft.forms.beneficiaryDesignation" label="Beneficiary designation form" />
|
||||
<UCheckbox
|
||||
v-model="draft.forms.groupCensus"
|
||||
label="Group census / employee roster (required for group policies)"
|
||||
:disabled="draft.segment !== 'group'"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
v-else
|
||||
class="mt-10 min-h-[8rem] rounded-xl bg-[var(--sidebar-border)]/25 animate-pulse"
|
||||
aria-busy="true"
|
||||
aria-label="Loading"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
90
app/components/quotes/life/SolicitQuotesStep.vue
Normal file
90
app/components/quotes/life/SolicitQuotesStep.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
import { LIFE_COVERAGE_PLANS, LIFE_QUOTE_CARRIERS } from '~/data/life-quote-intake'
|
||||
import type { LifeQuoteDraft, LifeQuoteMode } from '~/types/life-quote-intake'
|
||||
|
||||
const props = defineProps<{
|
||||
draft: LifeQuoteDraft
|
||||
quoteMode: LifeQuoteMode
|
||||
}>()
|
||||
|
||||
function setCarrier(id: string, checked: boolean) {
|
||||
const xs = props.draft.solicit.carrierIds
|
||||
if (checked && !xs.includes(id)) xs.push(id)
|
||||
if (!checked) {
|
||||
const i = xs.indexOf(id)
|
||||
if (i !== -1) xs.splice(i, 1)
|
||||
}
|
||||
}
|
||||
|
||||
function carrierChecked(id: string) {
|
||||
return props.draft.solicit.carrierIds.includes(id)
|
||||
}
|
||||
|
||||
function setPlan(id: string, checked: boolean) {
|
||||
const xs = props.draft.solicit.planIds
|
||||
if (checked && !xs.includes(id)) xs.push(id)
|
||||
if (!checked) {
|
||||
const i = xs.indexOf(id)
|
||||
if (i !== -1) xs.splice(i, 1)
|
||||
}
|
||||
}
|
||||
|
||||
function planChecked(id: string) {
|
||||
return props.draft.solicit.planIds.includes(id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<p class="text-sm text-[var(--text-muted)]">
|
||||
Choose carriers and plan shells to request. Quoting contacts live per provider in Settings.
|
||||
</p>
|
||||
<UAlert
|
||||
v-if="quoteMode === 'comparative_pdf'"
|
||||
color="info"
|
||||
variant="soft"
|
||||
class="mt-4"
|
||||
title="Comparative quote"
|
||||
description="We'll align columns to your selected plan mix. Enter premiums from email, rate tables, or AI-assisted pricing when available."
|
||||
/>
|
||||
<UAlert v-else color="neutral" variant="soft" class="mt-4" title="Single quote" description="We'll package one request per carrier with the same insured and coverage intent." />
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Carriers</p>
|
||||
<ul class="mt-3 divide-y divide-[var(--sidebar-border)]">
|
||||
<li
|
||||
v-for="c in LIFE_QUOTE_CARRIERS"
|
||||
:key="c.id"
|
||||
class="flex flex-wrap items-start justify-between gap-3 py-3 first:pt-0"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="carrierChecked(c.id)"
|
||||
:label="c.name"
|
||||
@update:model-value="(v: boolean) => setCarrier(c.id, v)"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-muted)]">{{ c.detail }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Plans / coverage shells</p>
|
||||
<ul class="mt-3 space-y-3">
|
||||
<li
|
||||
v-for="p in LIFE_COVERAGE_PLANS"
|
||||
:key="p.id"
|
||||
class="flex flex-col gap-1 rounded-lg border border-[var(--sidebar-border)]/80 bg-[var(--page-bg)]/50 p-3 sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="planChecked(p.id)"
|
||||
:label="p.label"
|
||||
@update:model-value="(v: boolean) => setPlan(p.id, v)"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-muted)] sm:text-right">{{ p.hint }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
171
app/components/sales/SalesFlowIndicator.vue
Normal file
171
app/components/sales/SalesFlowIndicator.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* Airline-ticket-style horizontal flow indicator for the sales process.
|
||||
* Always visible at the top of any sales page, highlighting "you are here."
|
||||
*/
|
||||
const props = defineProps<{
|
||||
/** Which stage the current page represents */
|
||||
currentStage: 'quick_lead' | 'customer' | 'get_quotes' | 'present_quotes' | 'solicitud' | 'emission'
|
||||
}>()
|
||||
|
||||
const stages = [
|
||||
{ id: 'quick_lead', label: 'Quick Lead', icon: 'i-heroicons-bolt', route: '/sales/quick-lead' },
|
||||
{ id: 'customer', label: 'Customer', icon: 'i-heroicons-user-plus', route: '/registration/client' },
|
||||
{ id: 'get_quotes', label: 'Get Quotes', icon: 'i-heroicons-document-magnifying-glass', route: '/quotes/new' },
|
||||
{ id: 'present_quotes', label: 'Present Quotes', icon: 'i-heroicons-presentation-chart-bar', route: '/quotes/compare' },
|
||||
{ id: 'solicitud', label: 'Solicitud', icon: 'i-heroicons-clipboard-document-check', route: '/onboarding/solicitud' },
|
||||
{ id: 'emission', label: 'Emission', icon: 'i-heroicons-check-badge', route: '/onboarding/emissions' },
|
||||
] as const
|
||||
|
||||
type StageId = typeof stages[number]['id']
|
||||
|
||||
function stageIndex(id: StageId): number {
|
||||
return stages.findIndex(s => s.id === id)
|
||||
}
|
||||
|
||||
const currentIdx = computed(() => stageIndex(props.currentStage))
|
||||
|
||||
function state(id: StageId): 'done' | 'current' | 'upcoming' {
|
||||
const idx = stageIndex(id)
|
||||
if (idx < currentIdx.value) return 'done'
|
||||
if (idx === currentIdx.value) return 'current'
|
||||
return 'upcoming'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="sfi-root" aria-label="Sales process flow">
|
||||
<div class="sfi-track">
|
||||
<template v-for="(stage, i) in stages" :key="stage.id">
|
||||
<!-- Connector -->
|
||||
<div
|
||||
v-if="i > 0"
|
||||
class="sfi-connector"
|
||||
:class="state(stage.id) === 'upcoming' ? 'sfi-conn-upcoming' : 'sfi-conn-done'"
|
||||
/>
|
||||
|
||||
<!-- Stage node -->
|
||||
<NuxtLink
|
||||
:to="stage.route"
|
||||
class="sfi-node"
|
||||
:class="[
|
||||
`sfi-node-${state(stage.id)}`,
|
||||
state(stage.id) !== 'upcoming' ? 'sfi-node-clickable' : '',
|
||||
]"
|
||||
:aria-current="state(stage.id) === 'current' ? 'step' : undefined"
|
||||
>
|
||||
<div class="sfi-icon-circle" :class="`sfi-ic-${state(stage.id)}`">
|
||||
<UIcon v-if="state(stage.id) === 'done'" name="i-heroicons-check" style="width: 14px; height: 14px;" />
|
||||
<UIcon v-else :name="stage.icon" style="width: 14px; height: 14px;" />
|
||||
</div>
|
||||
<span class="sfi-label">{{ stage.label }}</span>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sfi-root {
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0,0,0,0.06);
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.sfi-track {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ── Connector line ── */
|
||||
.sfi-connector {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
min-width: 16px;
|
||||
max-width: 80px;
|
||||
margin-top: 17px; /* vertically center with the 36px circle */
|
||||
border-radius: 1px;
|
||||
}
|
||||
.sfi-conn-done {
|
||||
background: #01696f;
|
||||
}
|
||||
.sfi-conn-upcoming {
|
||||
background: rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* ── Stage node ── */
|
||||
.sfi-node {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
text-decoration: none;
|
||||
min-width: 72px;
|
||||
padding: 0 4px;
|
||||
cursor: default;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sfi-node-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.sfi-node-clickable:hover .sfi-label {
|
||||
color: #01696f;
|
||||
}
|
||||
.sfi-node-clickable:hover .sfi-ic-done {
|
||||
box-shadow: 0 0 0 3px rgba(1,105,111,0.12);
|
||||
}
|
||||
|
||||
/* ── Icon circle ── */
|
||||
.sfi-icon-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all 180ms ease;
|
||||
}
|
||||
.sfi-ic-done {
|
||||
background: #01696f;
|
||||
color: #fff;
|
||||
}
|
||||
.sfi-ic-current {
|
||||
background: #fff;
|
||||
border: 2.5px solid #01696f;
|
||||
color: #01696f;
|
||||
box-shadow: 0 0 0 4px rgba(1,105,111,0.10);
|
||||
animation: sfi-glow 2.5s ease-in-out infinite;
|
||||
}
|
||||
.sfi-ic-upcoming {
|
||||
background: rgba(0,0,0,0.04);
|
||||
color: #c0c0bc;
|
||||
border: 1.5px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
@keyframes sfi-glow {
|
||||
0%, 100% { box-shadow: 0 0 0 4px rgba(1,105,111,0.10); }
|
||||
50% { box-shadow: 0 0 0 6px rgba(1,105,111,0.18); }
|
||||
}
|
||||
|
||||
/* ── Labels ── */
|
||||
.sfi-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
transition: color 150ms ease;
|
||||
}
|
||||
.sfi-node-upcoming .sfi-label {
|
||||
color: #c0c0bc;
|
||||
}
|
||||
.sfi-node-current .sfi-label {
|
||||
color: #01696f;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
</style>
|
||||
447
app/components/sales/SalesPipelineBar.vue
Normal file
447
app/components/sales/SalesPipelineBar.vue
Normal file
@@ -0,0 +1,447 @@
|
||||
<script setup lang="ts">
|
||||
import { PIPELINE_STAGES, type SalesDeal, type PipelineStage, type DealForm } from '~/composables/useSalesPipeline'
|
||||
|
||||
const props = defineProps<{
|
||||
deal: SalesDeal
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'navigate', stage: PipelineStage): void
|
||||
}>()
|
||||
|
||||
const { stageFormProgress } = useSalesPipeline()
|
||||
|
||||
const expandedStage = ref<PipelineStage | null>(null)
|
||||
|
||||
function stageState(stageId: PipelineStage): 'completed' | 'active' | 'waiting' | 'upcoming' {
|
||||
if (props.deal.completedStages.includes(stageId)) return 'completed'
|
||||
if (props.deal.currentStage === stageId) {
|
||||
const meta = PIPELINE_STAGES.find(s => s.id === stageId)
|
||||
return meta?.isWaiting ? 'waiting' : 'active'
|
||||
}
|
||||
return 'upcoming'
|
||||
}
|
||||
|
||||
function stageIdx(stageId: PipelineStage): number {
|
||||
return PIPELINE_STAGES.findIndex(s => s.id === stageId)
|
||||
}
|
||||
|
||||
function isClickable(stageId: PipelineStage): boolean {
|
||||
const state = stageState(stageId)
|
||||
return state === 'completed' || state === 'active'
|
||||
}
|
||||
|
||||
function toggleExpand(stageId: PipelineStage) {
|
||||
expandedStage.value = expandedStage.value === stageId ? null : stageId
|
||||
}
|
||||
|
||||
function stageForms(stageId: PipelineStage): DealForm[] {
|
||||
return props.deal.forms[stageId] ?? []
|
||||
}
|
||||
|
||||
function formStatusIcon(f: DealForm): string {
|
||||
if (f.status === 'complete') return 'i-heroicons-check-circle-solid'
|
||||
if (f.status === 'in_progress') return 'i-heroicons-ellipsis-horizontal-circle'
|
||||
return 'i-heroicons-minus-circle'
|
||||
}
|
||||
|
||||
function formStatusColor(f: DealForm): string {
|
||||
if (f.status === 'complete') return '#059669'
|
||||
if (f.status === 'in_progress') return '#c27b1a'
|
||||
return '#c0c0bc'
|
||||
}
|
||||
|
||||
function timeAgo(iso?: string) {
|
||||
if (!iso) return ''
|
||||
const diff = Date.now() - new Date(iso).getTime()
|
||||
if (diff < 3600000) return `${Math.max(1, Math.round(diff / 60000))}m ago`
|
||||
if (diff < 86400000) return `${Math.round(diff / 3600000)}h ago`
|
||||
if (diff < 172800000) return 'Yesterday'
|
||||
return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="spb-root">
|
||||
<!-- Deal header -->
|
||||
<div class="spb-header">
|
||||
<div class="spb-deal-info">
|
||||
<span class="spb-deal-name">{{ deal.customerName }}</span>
|
||||
<span class="spb-deal-product">{{ deal.productLine }}</span>
|
||||
<span v-if="deal.carrier" class="spb-deal-carrier">{{ deal.carrier }} {{ deal.carrierProduct }}</span>
|
||||
</div>
|
||||
<span class="spb-deal-id">{{ deal.id }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Stage stepper -->
|
||||
<div class="spb-stepper">
|
||||
<template v-for="(stage, i) in PIPELINE_STAGES" :key="stage.id">
|
||||
<!-- Connector line -->
|
||||
<div v-if="i > 0" class="spb-connector" :class="stageState(stage.id) === 'upcoming' ? 'spb-conn-upcoming' : stageState(PIPELINE_STAGES[i - 1].id) === 'completed' ? 'spb-conn-done' : 'spb-conn-upcoming'" />
|
||||
|
||||
<!-- Stage node -->
|
||||
<button
|
||||
type="button"
|
||||
class="spb-stage"
|
||||
:class="[
|
||||
`spb-stage-${stageState(stage.id)}`,
|
||||
isClickable(stage.id) ? 'spb-stage-clickable' : '',
|
||||
expandedStage === stage.id ? 'spb-stage-expanded' : '',
|
||||
]"
|
||||
@click="isClickable(stage.id) ? toggleExpand(stage.id) : undefined"
|
||||
>
|
||||
<!-- Stage circle -->
|
||||
<div class="spb-circle" :class="`spb-circle-${stageState(stage.id)}`">
|
||||
<UIcon v-if="stageState(stage.id) === 'completed'" name="i-heroicons-check" style="width: 12px; height: 12px;" />
|
||||
<UIcon v-else-if="stageState(stage.id) === 'waiting'" name="i-heroicons-clock" style="width: 12px; height: 12px;" />
|
||||
<span v-else-if="stageState(stage.id) === 'active'" class="spb-circle-dot" />
|
||||
<span v-else class="spb-circle-num">{{ i + 1 }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Stage label + progress -->
|
||||
<div class="spb-stage-content">
|
||||
<span class="spb-stage-label">{{ stage.label }}</span>
|
||||
|
||||
<!-- Form progress micro-bar (only for non-waiting stages with forms) -->
|
||||
<template v-if="!stage.isWaiting && stageForms(stage.id).length > 0">
|
||||
<div class="spb-micro-bar">
|
||||
<div class="spb-micro-fill" :style="{ width: stageFormProgress(deal, stage.id) + '%' }" :class="stageFormProgress(deal, stage.id) === 100 ? 'spb-fill-done' : stageFormProgress(deal, stage.id) > 0 ? 'spb-fill-progress' : 'spb-fill-empty'" />
|
||||
</div>
|
||||
<span class="spb-micro-pct">{{ stageFormProgress(deal, stage.id) }}%</span>
|
||||
</template>
|
||||
|
||||
<!-- Waiting indicator -->
|
||||
<span v-if="stageState(stage.id) === 'waiting'" class="spb-waiting-label">
|
||||
{{ timeAgo(deal.stageTimestamps[stage.id]) }}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Expanded stage detail (form list) -->
|
||||
<Transition
|
||||
enter-active-class="transition-all duration-200 ease-out"
|
||||
enter-from-class="opacity-0 -translate-y-1 max-h-0"
|
||||
enter-to-class="opacity-100 translate-y-0 max-h-[400px]"
|
||||
leave-active-class="transition-all duration-150 ease-in"
|
||||
leave-from-class="opacity-100 max-h-[400px]"
|
||||
leave-to-class="opacity-0 -translate-y-1 max-h-0"
|
||||
>
|
||||
<div v-if="expandedStage" class="spb-detail">
|
||||
<div class="spb-detail-header">
|
||||
<span class="spb-detail-title">{{ PIPELINE_STAGES.find(s => s.id === expandedStage)?.label }} — Forms</span>
|
||||
<button type="button" class="spb-detail-nav" @click="emit('navigate', expandedStage!)">
|
||||
Go to stage
|
||||
<UIcon name="i-heroicons-arrow-right" style="width: 11px; height: 11px;" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="stageForms(expandedStage).length === 0" class="spb-detail-empty">
|
||||
No forms assigned to this stage.
|
||||
</div>
|
||||
|
||||
<div v-else class="spb-form-list">
|
||||
<div v-for="f in stageForms(expandedStage)" :key="f.id" class="spb-form-row">
|
||||
<UIcon :name="formStatusIcon(f)" :style="{ width: '16px', height: '16px', color: formStatusColor(f), flexShrink: 0 }" />
|
||||
<div class="spb-form-info">
|
||||
<span class="spb-form-label">{{ f.label }}</span>
|
||||
<span class="spb-form-fields">{{ f.completedFields }}/{{ f.requiredFields }} fields</span>
|
||||
</div>
|
||||
<div class="spb-form-bar-wrap">
|
||||
<div class="spb-form-bar" :style="{ width: f.completionPct + '%' }" :class="f.completionPct === 100 ? 'spb-bar-done' : f.completionPct > 0 ? 'spb-bar-progress' : 'spb-bar-empty'" />
|
||||
</div>
|
||||
<span class="spb-form-pct" :class="f.completionPct === 100 ? 'spb-pct-done' : f.completionPct > 0 ? 'spb-pct-progress' : 'spb-pct-empty'">{{ f.completionPct }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.spb-root {
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0,0,0,0.06);
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.spb-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.04);
|
||||
background: rgba(0,0,0,0.01);
|
||||
}
|
||||
.spb-deal-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.spb-deal-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.spb-deal-product {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 1px 7px;
|
||||
border-radius: 9999px;
|
||||
background: rgba(1,105,111,0.08);
|
||||
color: #01696f;
|
||||
}
|
||||
.spb-deal-carrier {
|
||||
font-size: 10px;
|
||||
color: #8a8a86;
|
||||
}
|
||||
.spb-deal-id {
|
||||
font-size: 10px;
|
||||
font-family: ui-monospace, monospace;
|
||||
color: #8a8a86;
|
||||
}
|
||||
|
||||
/* ── Stepper ── */
|
||||
.spb-stepper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 14px 16px;
|
||||
gap: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Connector line */
|
||||
.spb-connector {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
min-width: 12px;
|
||||
margin-top: 11px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.spb-conn-done { background: #01696f; }
|
||||
.spb-conn-upcoming { background: rgba(0,0,0,0.08); }
|
||||
|
||||
/* Stage button */
|
||||
.spb-stage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: default;
|
||||
flex-shrink: 0;
|
||||
min-width: 64px;
|
||||
}
|
||||
.spb-stage-clickable { cursor: pointer; }
|
||||
.spb-stage-clickable:hover .spb-stage-label { color: #01696f; }
|
||||
|
||||
/* Circle */
|
||||
.spb-circle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
.spb-circle-completed {
|
||||
background: #01696f;
|
||||
color: #fff;
|
||||
}
|
||||
.spb-circle-active {
|
||||
background: #fff;
|
||||
border: 2px solid #01696f;
|
||||
color: #01696f;
|
||||
}
|
||||
.spb-circle-waiting {
|
||||
background: #fff;
|
||||
border: 2px dashed #c27b1a;
|
||||
color: #c27b1a;
|
||||
animation: spb-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
.spb-circle-upcoming {
|
||||
background: rgba(0,0,0,0.04);
|
||||
color: #c0c0bc;
|
||||
}
|
||||
.spb-circle-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #01696f;
|
||||
}
|
||||
.spb-circle-num {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #c0c0bc;
|
||||
}
|
||||
|
||||
@keyframes spb-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
/* Stage content */
|
||||
.spb-stage-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
.spb-stage-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
transition: color 150ms ease;
|
||||
}
|
||||
.spb-stage-upcoming .spb-stage-label {
|
||||
color: #c0c0bc;
|
||||
}
|
||||
.spb-stage-waiting .spb-stage-label {
|
||||
color: #c27b1a;
|
||||
}
|
||||
|
||||
/* Micro progress bar */
|
||||
.spb-micro-bar {
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
border-radius: 1.5px;
|
||||
background: rgba(0,0,0,0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
.spb-micro-fill {
|
||||
height: 100%;
|
||||
border-radius: 1.5px;
|
||||
transition: width 300ms ease;
|
||||
}
|
||||
.spb-fill-done { background: #059669; }
|
||||
.spb-fill-progress { background: #c27b1a; }
|
||||
.spb-fill-empty { background: transparent; }
|
||||
|
||||
.spb-micro-pct {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: #8a8a86;
|
||||
}
|
||||
|
||||
.spb-waiting-label {
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
color: #c27b1a;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Expanded detail ── */
|
||||
.spb-detail {
|
||||
border-top: 1px solid rgba(0,0,0,0.06);
|
||||
padding: 12px 16px;
|
||||
background: rgba(0,0,0,0.01);
|
||||
overflow: hidden;
|
||||
}
|
||||
.spb-detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.spb-detail-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.spb-detail-nav {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
background: rgba(1,105,111,0.06);
|
||||
color: #01696f;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
.spb-detail-nav:hover { background: rgba(1,105,111,0.12); }
|
||||
.spb-detail-empty {
|
||||
font-size: 12px;
|
||||
color: #8a8a86;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* Form list */
|
||||
.spb-form-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.spb-form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0,0,0,0.04);
|
||||
}
|
||||
.spb-form-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.spb-form-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.spb-form-fields {
|
||||
font-size: 10px;
|
||||
color: #8a8a86;
|
||||
}
|
||||
|
||||
/* Form bar */
|
||||
.spb-form-bar-wrap {
|
||||
flex: 1;
|
||||
height: 5px;
|
||||
border-radius: 2.5px;
|
||||
background: rgba(0,0,0,0.05);
|
||||
overflow: hidden;
|
||||
min-width: 60px;
|
||||
}
|
||||
.spb-form-bar {
|
||||
height: 100%;
|
||||
border-radius: 2.5px;
|
||||
transition: width 300ms ease;
|
||||
min-width: 0;
|
||||
}
|
||||
.spb-bar-done { background: #059669; }
|
||||
.spb-bar-progress { background: #c27b1a; }
|
||||
.spb-bar-empty { background: transparent; }
|
||||
|
||||
.spb-form-pct {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
min-width: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
.spb-pct-done { color: #059669; }
|
||||
.spb-pct-progress { color: #c27b1a; }
|
||||
.spb-pct-empty { color: #c0c0bc; }
|
||||
|
||||
/* ── Expanded highlight ── */
|
||||
.spb-stage-expanded .spb-circle {
|
||||
box-shadow: 0 0 0 3px rgba(1,105,111,0.15);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user