WIP jordan
This commit is contained in:
Jordan Weingarten
364
app/pages/onboarding/emissions/index.vue
Normal file
364
app/pages/onboarding/emissions/index.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({ ssr: false })
|
||||
usePageTitle('Emissions review')
|
||||
|
||||
const toast = useToast()
|
||||
const { items, approve, sendToInsurer, markInForce } = useEmissionsQueue()
|
||||
|
||||
const pending = computed(() => items.value.filter((x) => x.status === 'pending_review'))
|
||||
const rest = computed(() => items.value.filter((x) => x.status !== 'pending_review'))
|
||||
|
||||
function onApprove(id: string) {
|
||||
approve(id)
|
||||
toast.add({ title: 'Marked approved', color: 'success' })
|
||||
}
|
||||
|
||||
function onSend(id: string) {
|
||||
sendToInsurer(id)
|
||||
toast.add({ title: 'Marked sent to insurer', color: 'success' })
|
||||
}
|
||||
|
||||
function onInForce(id: string) {
|
||||
markInForce(id)
|
||||
toast.add({ title: 'Marked in force', color: 'success' })
|
||||
}
|
||||
|
||||
/* ── Mock pipeline data for when queue is empty ── */
|
||||
const mockEmissions = [
|
||||
{ id: 'EM-2025-0041', customer: 'María Elena Pérez', insurer: 'ASSA', line: 'Auto', product: '2023 Toyota RAV4 — Comprehensive', premium: '$1,840', status: 'pending_review' as const, submitted: '2025-04-03', agent: 'Ana R.', docs: 3, docsTotal: 3 },
|
||||
{ id: 'EM-2025-0040', customer: 'Roberto Jiménez Mora', insurer: 'Pan-American Life', line: 'Life', product: 'Whole life — $150K', premium: '$1,440', status: 'approved' as const, submitted: '2025-04-02', agent: 'Ana R.', docs: 4, docsTotal: 4 },
|
||||
{ id: 'EM-2025-0039', customer: 'Luis Andrés Solís', insurer: 'Blue Cross', line: 'Health', product: 'Family health — Platinum', premium: '$8,400', status: 'sent_to_insurer' as const, submitted: '2025-04-01', agent: 'Ana R.', docs: 5, docsTotal: 5 },
|
||||
{ id: 'EM-2025-0038', customer: 'Sofía Campos Rojas', insurer: 'INS', line: 'Auto', product: '2024 Mazda CX-30 — Comprehensive', premium: '$1,380', status: 'pending_review' as const, submitted: '2025-03-30', agent: 'Marco V.', docs: 2, docsTotal: 3 },
|
||||
{ id: 'EM-2025-0037', customer: 'Carolina Fallas Vargas', insurer: 'ASSA', line: 'Renter', product: "Renter's insurance — Paraíso apt", premium: '$320', status: 'in_force' as const, submitted: '2025-03-28', agent: 'Marco V.', docs: 2, docsTotal: 2 },
|
||||
{ id: 'EM-2025-0036', customer: 'Roberto Jiménez Mora', insurer: 'ASSA', line: 'Home', product: 'Homeowner — Belén residence', premium: '$890', status: 'in_force' as const, submitted: '2025-03-25', agent: 'Ana R.', docs: 4, docsTotal: 4 },
|
||||
]
|
||||
|
||||
type EmissionStatus = 'pending_review' | 'approved' | 'sent_to_insurer' | 'in_force'
|
||||
|
||||
const statusMeta: Record<EmissionStatus, { label: string; class: string; icon: string }> = {
|
||||
pending_review: { label: 'Pending review', class: 'em-status-pending', icon: 'i-heroicons-clock' },
|
||||
approved: { label: 'Approved', class: 'em-status-approved', icon: 'i-heroicons-check' },
|
||||
sent_to_insurer: { label: 'Sent to insurer', class: 'em-status-sent', icon: 'i-heroicons-paper-airplane' },
|
||||
in_force: { label: 'In force', class: 'em-status-force', icon: 'i-heroicons-shield-check' },
|
||||
}
|
||||
|
||||
const activeFilter = ref<EmissionStatus | 'all'>('all')
|
||||
const filterTabs: { id: EmissionStatus | 'all'; label: string; count: number }[] = [
|
||||
{ id: 'all', label: 'All', count: mockEmissions.length },
|
||||
{ id: 'pending_review', label: 'Pending', count: mockEmissions.filter(e => e.status === 'pending_review').length },
|
||||
{ id: 'approved', label: 'Approved', count: mockEmissions.filter(e => e.status === 'approved').length },
|
||||
{ id: 'sent_to_insurer', label: 'Sent', count: mockEmissions.filter(e => e.status === 'sent_to_insurer').length },
|
||||
{ id: 'in_force', label: 'In force', count: mockEmissions.filter(e => e.status === 'in_force').length },
|
||||
]
|
||||
|
||||
const filteredEmissions = computed(() => {
|
||||
if (activeFilter.value === 'all') return mockEmissions
|
||||
return mockEmissions.filter(e => e.status === activeFilter.value)
|
||||
})
|
||||
|
||||
/* ── KPI summary ── */
|
||||
const kpis = [
|
||||
{ label: 'Pending review', value: mockEmissions.filter(e => e.status === 'pending_review').length.toString(), sub: 'Awaiting QA', dot: 'background: #c27b1a' },
|
||||
{ label: 'Approved', value: mockEmissions.filter(e => e.status === 'approved').length.toString(), sub: 'Ready to send', dot: 'background: #01696f' },
|
||||
{ label: 'Sent to insurer', value: mockEmissions.filter(e => e.status === 'sent_to_insurer').length.toString(), sub: 'Awaiting response', dot: 'background: #7c3aed' },
|
||||
{ label: 'In force', value: mockEmissions.filter(e => e.status === 'in_force').length.toString(), sub: 'This month', dot: 'background: #0f7b5f' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="em mx-auto max-w-5xl space-y-6 pb-12">
|
||||
<!-- Back -->
|
||||
<NuxtLink to="/onboarding" class="inline-flex">
|
||||
<UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Pipeline</UButton>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Sales flow indicator -->
|
||||
<SalesFlowIndicator current-stage="emission" />
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Emissions Review</h1>
|
||||
<p class="mt-1 max-w-2xl text-[13px] text-[var(--text-muted)]">
|
||||
Completed intakes land here for brokerage QA before submission to the carrier.
|
||||
</p>
|
||||
</div>
|
||||
<NuxtLink to="/onboarding/solicitud">
|
||||
<UButton size="sm" color="primary" icon="i-heroicons-plus">New solicitud</UButton>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- KPI Strip -->
|
||||
<div class="em-kpi-strip">
|
||||
<div v-for="(kpi, i) in kpis" :key="kpi.label" class="em-kpi">
|
||||
<p class="em-kpi-label">{{ kpi.label }}</p>
|
||||
<p class="em-kpi-value">{{ kpi.value }}</p>
|
||||
<div class="mt-1 flex items-center gap-1.5">
|
||||
<span class="em-kpi-dot" :style="kpi.dot" />
|
||||
<p class="text-[11px] text-[var(--text-muted)]">{{ kpi.sub }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter tabs -->
|
||||
<div class="em-tabs">
|
||||
<button
|
||||
v-for="tab in filterTabs"
|
||||
:key="tab.id"
|
||||
type="button"
|
||||
class="em-tab"
|
||||
:class="activeFilter === tab.id ? 'em-tab-on' : 'em-tab-off'"
|
||||
@click="activeFilter = tab.id"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<span class="em-tab-count" :class="activeFilter === tab.id ? 'em-tab-count-on' : ''">{{ tab.count }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Emissions table -->
|
||||
<div class="em-card">
|
||||
<div class="em-card-head">
|
||||
<UIcon name="i-heroicons-document-check" style="width: 16px; height: 16px; color: #01696f;" />
|
||||
<span>Emissions queue</span>
|
||||
<span class="ml-auto text-[11px] text-[var(--text-muted)]">{{ filteredEmissions.length }} items</span>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredEmissions.length === 0" class="px-6 py-12 text-center">
|
||||
<UIcon name="i-heroicons-inbox-stack" style="width: 40px; height: 40px; color: #c0c0bc; margin: 0 auto 12px;" />
|
||||
<p class="text-[13px] text-[var(--text-muted)]">No emissions in this status</p>
|
||||
</div>
|
||||
|
||||
<table v-else class="em-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Customer</th>
|
||||
<th>Insurer</th>
|
||||
<th>Product</th>
|
||||
<th>Premium</th>
|
||||
<th>Docs</th>
|
||||
<th>Status</th>
|
||||
<th>Submitted</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="em in filteredEmissions" :key="em.id">
|
||||
<td class="font-mono text-[11px] font-medium">{{ em.id }}</td>
|
||||
<td>
|
||||
<p class="text-[13px] font-medium text-[var(--text-primary)]">{{ em.customer }}</p>
|
||||
<p class="text-[11px] text-[var(--text-muted)]">{{ em.agent }}</p>
|
||||
</td>
|
||||
<td class="text-[13px]">{{ em.insurer }}</td>
|
||||
<td>
|
||||
<p class="text-[13px] text-[var(--text-primary)]">{{ em.line }}</p>
|
||||
<p class="text-[11px] text-[var(--text-muted)] max-w-[200px] truncate">{{ em.product }}</p>
|
||||
</td>
|
||||
<td class="text-[13px] font-medium tabular-nums">{{ em.premium }}</td>
|
||||
<td>
|
||||
<span class="em-doc-badge" :class="em.docs === em.docsTotal ? 'em-doc-complete' : 'em-doc-partial'">
|
||||
{{ em.docs }}/{{ em.docsTotal }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span :class="statusMeta[em.status].class">
|
||||
{{ statusMeta[em.status].label }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-[12px] tabular-nums text-[var(--text-muted)]">{{ em.submitted }}</td>
|
||||
<td class="text-right">
|
||||
<div class="flex justify-end gap-1">
|
||||
<button v-if="em.status === 'pending_review'" type="button" class="em-action-btn em-action-approve" title="Approve">
|
||||
<UIcon name="i-heroicons-check" style="width: 14px; height: 14px;" />
|
||||
</button>
|
||||
<button v-if="em.status === 'approved'" type="button" class="em-action-btn em-action-send" title="Send to insurer">
|
||||
<UIcon name="i-heroicons-paper-airplane" style="width: 14px; height: 14px;" />
|
||||
</button>
|
||||
<button v-if="em.status === 'sent_to_insurer'" type="button" class="em-action-btn em-action-force" title="Mark in force">
|
||||
<UIcon name="i-heroicons-shield-check" style="width: 14px; height: 14px;" />
|
||||
</button>
|
||||
<button type="button" class="em-action-btn" title="View details">
|
||||
<UIcon name="i-heroicons-eye" style="width: 14px; height: 14px;" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Queue from composable (if any real items exist) -->
|
||||
<div v-if="items.length > 0" class="em-card">
|
||||
<div class="em-card-head">
|
||||
<UIcon name="i-heroicons-queue-list" style="width: 16px; height: 16px; color: #01696f;" />
|
||||
<span>Live queue (from solicitud intake)</span>
|
||||
</div>
|
||||
<table class="em-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Created</th>
|
||||
<th>Customer</th>
|
||||
<th>Insurer</th>
|
||||
<th>Sub-ramo</th>
|
||||
<th>Line</th>
|
||||
<th>Status</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in items" :key="row.id">
|
||||
<td class="font-mono text-[11px]">{{ row.createdAt.slice(0, 10) }}</td>
|
||||
<td class="text-[13px]">{{ row.customerLabel }}</td>
|
||||
<td class="text-[13px]">{{ row.insurerSlug }}</td>
|
||||
<td class="text-[13px]">{{ row.subRamoKey }}</td>
|
||||
<td class="text-[13px]">{{ row.productLine }}</td>
|
||||
<td>
|
||||
<span :class="statusMeta[row.status as EmissionStatus]?.class ?? 'em-status-pending'">
|
||||
{{ statusMeta[row.status as EmissionStatus]?.label ?? row.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="flex justify-end gap-1">
|
||||
<button v-if="row.status === 'pending_review'" type="button" class="em-action-btn em-action-approve" @click="onApprove(row.id)">
|
||||
<UIcon name="i-heroicons-check" style="width: 14px; height: 14px;" />
|
||||
</button>
|
||||
<button v-if="row.status === 'approved'" type="button" class="em-action-btn em-action-send" @click="onSend(row.id)">
|
||||
<UIcon name="i-heroicons-paper-airplane" style="width: 14px; height: 14px;" />
|
||||
</button>
|
||||
<button v-if="row.status === 'sent_to_insurer'" type="button" class="em-action-btn em-action-force" @click="onInForce(row.id)">
|
||||
<UIcon name="i-heroicons-shield-check" style="width: 14px; height: 14px;" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.em-section-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: #8a8a86; margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* ── KPI strip ── */
|
||||
.em-kpi-strip {
|
||||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
|
||||
border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
|
||||
background: rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.03);
|
||||
overflow: hidden;
|
||||
}
|
||||
.em-kpi {
|
||||
padding: 16px 20px; background: #ffffff;
|
||||
}
|
||||
.em-kpi:first-child { border-radius: 12px 0 0 12px; }
|
||||
.em-kpi:last-child { border-radius: 0 12px 12px 0; }
|
||||
.em-kpi-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.04em; color: #8a8a86;
|
||||
}
|
||||
.em-kpi-value {
|
||||
margin-top: 4px; font-size: 22px; font-weight: 600;
|
||||
color: var(--text-primary); font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.em-kpi-dot {
|
||||
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.em-kpi-strip { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
/* ── Tabs ── */
|
||||
.em-tabs {
|
||||
display: inline-flex; gap: 2px; padding: 3px;
|
||||
border-radius: 10px; background: rgba(0,0,0,0.04);
|
||||
}
|
||||
.em-tab {
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
padding: 6px 14px; border-radius: 8px;
|
||||
font-size: 13px; font-weight: 500;
|
||||
border: none; cursor: pointer; transition: all 150ms ease;
|
||||
}
|
||||
.em-tab-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
.em-tab-off { background: transparent; color: var(--text-muted); }
|
||||
.em-tab-off:hover { color: var(--text-primary); }
|
||||
.em-tab-count {
|
||||
font-size: 10px; font-weight: 600; padding: 1px 5px;
|
||||
border-radius: 9999px; background: rgba(0,0,0,0.06); color: var(--text-muted);
|
||||
}
|
||||
.em-tab-count-on { background: rgba(1,105,111,0.1); color: #01696f; }
|
||||
|
||||
/* ── Card ── */
|
||||
.em-card {
|
||||
border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
|
||||
background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
|
||||
overflow: hidden;
|
||||
}
|
||||
.em-card-head {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 14px 20px; border-bottom: 1px solid rgba(0,0,0,0.06);
|
||||
font-size: 13px; font-weight: 600; color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ── Table ── */
|
||||
.em-table {
|
||||
width: 100%; border-collapse: collapse; font-size: 13px;
|
||||
}
|
||||
.em-table th {
|
||||
text-align: left; padding: 10px 16px;
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.04em; color: #8a8a86;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
.em-table td {
|
||||
padding: 12px 16px; color: var(--text-primary);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.04);
|
||||
vertical-align: top;
|
||||
}
|
||||
.em-table tr:last-child td { border-bottom: none; }
|
||||
.em-table tr:hover td { background: rgba(0,0,0,0.015); }
|
||||
|
||||
/* ── Status badges ── */
|
||||
.em-status-pending {
|
||||
font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
|
||||
background: rgba(194,123,26,0.08); color: #964219;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.em-status-approved {
|
||||
font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
|
||||
background: rgba(1,105,111,0.08); color: #01696f;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.em-status-sent {
|
||||
font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
|
||||
background: rgba(124,58,237,0.08); color: #7c3aed;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.em-status-force {
|
||||
font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
|
||||
background: rgba(15,123,95,0.08); color: #0f7b5f;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── Doc badge ── */
|
||||
.em-doc-badge {
|
||||
font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
|
||||
}
|
||||
.em-doc-complete { background: rgba(15,123,95,0.08); color: #0f7b5f; }
|
||||
.em-doc-partial { background: rgba(194,123,26,0.08); color: #964219; }
|
||||
|
||||
/* ── Action buttons ── */
|
||||
.em-action-btn {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 28px; height: 28px; border-radius: 6px;
|
||||
border: none; cursor: pointer;
|
||||
background: rgba(0,0,0,0.03); color: #8a8a86;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
.em-action-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
|
||||
.em-action-approve:hover { background: rgba(15,123,95,0.1); color: #0f7b5f; }
|
||||
.em-action-send:hover { background: rgba(1,105,111,0.1); color: #01696f; }
|
||||
.em-action-force:hover { background: rgba(15,123,95,0.1); color: #0f7b5f; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user