software-engineering/policy-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP jordan

Browse Source
This commit is contained in:
Jordan Weingarten
2026-04-16 11:11:44 -05:00
parent ff2d7b18b5
commit 67482f6629
163 changed files with 50627 additions and 728 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
app/components/quotes/QuoteComparativeLayout.vue Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>